Cara Membuat Text Area di WordPress.com

Cara Membuat Text Area di Halaman/Tulisan

Bila anda ingin membuat text area pada Halaman (page) atau Tulisan (post) di blog WordPress.com, berikut caranya :

  • Login ke halaman admin blog WordPress.com anda
  • Di sidebar sebelah kiri sorot mouse anda ke bagian ‘Tulisan’ atau ke bagian ‘Halaman’ lalu klik tanda [ ▼ ] agar submenu dropdown-nya muncul
  • Kemudian klik sub menu ‘Tambahkan Baru’
  • Setelah tampil halaman ‘Add New Post’ atau ‘Add New Page’, silahkan klik pada mode ‘HTML’
  • Masukkan kode dibawah ini pada mode ‘HTML’
<div style="BORDER-RIGHT: rgb(153,153,153) 3px solid;
BORDER-TOP: rgb(153,153,153) 3px solid; OVERFLOW: auto;
BORDER-LEFT: rgb(153,153,153) 3px solid; WIDTH: 500px;
BORDER-BOTTOM: rgb(153,153,153) 3px solid; HEIGHT:150px
">Tulis disini...</div>
  • Kemudian kembali pada mode ‘Visual’, untuk melakukan penulisan biasa
  • Setelah selesai, klik tombol ‘Simpan Konsep’ bila anda ingin menyimpan dan mengeditnya kembali atau klik pada tombol ‘Pratampil’ jika anda ingin melihat hasil tulisan anda atau klik tombol ‘Terbitkan’ bila anda ingin mempublikasikan atau menampilkan pada halaman blog anda.
  • Hasil yang didapatkan adalah seperti ini:
Tulis disini…

Keterangan :

  • Width : lebar text area.
  • Height : tinggi text area.
  • Tulis disini… : tulisan anda.

Cara Membuat Text Area Berwarna di Halaman/Tulisan

  • Copy kode dibawah ini dan taruh pada area penulisan dalam mode ‘HTML’.
<div style="overflow: auto; width: 500px; height: 100px;
background-color: #c1eeec; text-align: justify; padding: 5px;
border: 3px solid #999999;
">Tulis disini... </div>
  • Hasil yang didapatkan adalah seperti ini:
Tulis disini…

Keterangan :

  • background color #c1eeec bisa diubah dengan merubah color hex code-nya. bisa sobat untuk list lengkap color hex codes

Cara Membuat Text Area di Sidebar

  • Login ke akun blog WordPress.com anda
  • Di sidebar sebelah kiri sorot mouse anda ke bagian ‘Tampilan’  lalu klik tanda [ ▼ ] agar submenu dropdown-nya muncul
  • Kemudian klik sub menu ‘Widget’
  • Pada halaman ‘Widget’ pilih widget ‘Teks’
  • Kemudian tahan dan geser widget Teks ini ke samping kanan pada menu ‘Sidebar’
  • Setelah anda letakkan di samping kanan pada menu ‘Sidebar’ kemudian klik tanda [ ▼ ] pada pojok kanan atas widgets text tersebut agar area dropdown-nya muncul
  • copy kode dibawah ini pada area tersebut
<div style="overflow: auto; width: 200px; height: 100px;
background-color: #c1eeec; text-align: justify; padding: 5px;
border: 1px solid #999999;
">Tulis disini... </div>
  • Jika sudah, klik tombol ‘Simpan’
  • Kemudian jangan lupa klik tombol ‘Tutup’ ketika selesai mengedit widget
  • Hasilnya? Bisa anda lihat di sidebar  ini

Keterangan:

  • Width : lebar text area.
  • Height : tinggi text area.
  • Background-color : warna background text area
  • text-align : perataan text
  • padding : jarak antar tulisan dengan border
  • Tulis disini… : tulisan anda.

Bang Red, saya ingin text area-nya persis kaya punyamu di blog ini. Bisa kasih tahu kode HTML text area -nya?

Text Area Widget “Warning”

<code><div style=”width:250px;height:20px;background-color:#FF0000;border:3px solid #000000;padding:5px;”>

<p style=”text-align:center;”><span style=”color:#ffffff;font-size:large;”>WARNING</span></div>

<div style=”overflow:auto;width:250px;background-color:#ffff00;text-align:justify;border:3px solid #000000;padding:5px;”>

Blog ini menyimpan artikel untuk keharmonisan mahligai rumah tangga. Harap diperhatikan: bagi yang belum cukup umur, jangan memraktekkan apa yg belum menjadi hak kalian. <br>

<br><b>Orangtua</b>: mohon pro aktif membimbing anaknya berselancar di dunia maya. Bagi yang sudah cukup umur atau telah membina rumah tangga, semoga anda semua terbantu. Silahkan <a target=”_blank” href=”http://annunaki.wordpress.com/arsip/”>Klik disini!</a> untuk arsip lengkapnya

</div></p></code>

Text Area Widget “Pesan Admin”

<code><div style=”width:250px;height:20px;background-color:#FF0000;border:3px solid #000000;padding:5px;”>

<p style=”text-align:center;”><span style=”color:#ffffff;font-size:large;”>PESAN ADMIN</span></div>

<div style=”overflow:auto;width:250px;background-color:#FFD700;text-align:justify;border:3px solid #000000;padding:5px;”>

Seluruh isi Blog ini bebas Etika Copy/Paste. Silahkan sobat COPY – PASTE seluruh isi <a target=”_blank” href=”http://annunaki.wordpress.com”>Blog Annunaki</a> dengan bebas. Karena begitu indahnya berbagi informasi ^^

</div></p></code>

Text Area Widget “Powered By”

<code><div style=”width:250px;height:20px;background-color:#006400;border:3px solid #000000;padding:5px;”>

<p style=”text-align:center;”><span style=”color:#ffffff;font-size:large;”>POWERED BY</span></div>

<div style=”overflow:auto;width:250px;text-align:center;border:3px solid #000000;padding:5px;”>

<code><p style=”text-align:center;”><a href=”http://www.rahasiaotak.com” title=”simulasi gelombang otak” target=”_blank”><img src=”http://annunaki.files.wordpress.com/2010/02/rahasia-otak.png” width alt=”Rahasia Otak” /></a></p></code>

<p style=”text-align:center;”><a href=”http://s44.sitemeter.com/stats.asp?site=s4477777″ target=”_blank”>
<img src=”http://s44.sitemeter.com/meter.asp?site=s4477777″ alt=”Site Meter” border=”0″ /></a></p></code>

<code><p style=”text-align:center;”>Site Meter</p></code>

<code><p style=”text-align:center;”><a href=”http://www.prchecker.info/” target=”_blank”>
<img src=”http://pr.prchecker.info/getpr.php?codex=aHR0cDovL2FubnVuYWtpLndvcmRwcmVzcy5jb20=&amp;tag=2″ alt=”Page Rank Check” border=”0″ /></a><p></code>

<code><p style=”text-align:center;”>Google Page Rank</p></code>

<code><p style=”text-align:center;”><a href=”http://www.alexa.com/data/details/main?url=http://annunaki.wordpress.com/”><img src=”http://xsltcache.alexa.com/site_stats/gif/t/a/aHR0cDovL2FubnVuYWtpLndvcmRwcmVzcy5jb20v/s.gif” border=”0″ alt=”Alexa Certified Site Stats for http://annunaki.wordpress.com/” /></a>
<p>&nbsp;</p></code>

<code><p style=”text-align:center;”>Alexa Rank</p></code>

<code><p style=”text-align:center;”><a href=”http://www.mypagerank.net”><img title=”Googlebot last access powered by MyPagerank.Net” src=”http://www.mypagerank.net/services/gbla/gbla.php?s=c8481043a1ee7f9d4c96f1895535070742564437aa79e93c03781bb7a4e10fb7854a36a21bd05fc8c17f76″ border=”0″ alt=”” /></a></p></code>

<code><p style=”text-align:center;”>Google Bot Last Crawl</p></code>

</div></p></code>

Text Area “Registered at”

<code><div style=”width:250px;height:20px;background-color:#0000FF;border:3px solid #000000;padding:5px;”>

<p style=”text-align:center;”><span style=”color:#ffffff;font-size:large;”>REGISTERED AT</span></div>

Tulis di sini …..

</div></p></code>

Kata-kata dan isi dari text area-nya silahkan diedit sendiri yah 

NB: lebar text area di widget yang saya gunakan adalah 250 (width=250px), itu karena lebarnya pas dengan lebar sidebar yang disediakan oleh themes yg saya gunakan (INove). Bagi mereka yang menggunakan themes lain di WordPress.com dan tidak cocok dengan lebar 250, silahkan masukkan angka lain. Mungkin cocoknya di angka 225 atau 200, terutama bagi mereka yg themesnya punya 2 sidebar (3 column). Selamat Mencoba !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s