Membuat Text Area Cantik dengan Menggunakan Source-Code

Membuat Text Area Dengan Menggunakan Sourcecode Pada WordPress bertujuan untuk mengurangi resiko error ketika kode-kode yang ada pada artikel yang Anda publish diterapkan pada Artikel lain atau sidebar blog Anda.

Ketika kita membuat suatu artikel yang mengharuskan kita untuk menampilkan code/script, kita akan sedikit kebingungan karena setelah diterbitkan dan kita coba untuk memasang kode yang telah kita terbitkan tadi kedalam sidebar blog terjadi error atau kode tersebut tidak dapat berjalan dengan semestinya. lalu bagaimana caranya agar kode yang kita inginkan dapat berjalan normal ketika kita menggunakannya?

Jadi untuk mengatasi hal itu, saya akan berbagi cara agar kode-kode itu tidak bermasalah ketika diterapkan di postingan ataupun disidebar WordPress Anda. Coba kita lihat perbedaan antara html yang menggunakan Source-Code dengan yang tidak.

Contoh kode html tanpa Source-Code :

<div style=”overflow:auto;width:220px;height:212px;background-attachment:scroll;background-image:url(‘http://kumpulanfilegratis.files.wordpress.com/2009/03/bacground.jpg’);border:1px solid #cbcbcb;padding:5px;”>

<a href=”http://s09.flagcounter.com/more/dK9″><img src=”http://s09.flagcounter.com/count/dK9/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_12/viewers_0/labels_0/pageviews_0/” alt=”free counters” border=”0″ /></a>

<a href=”http://www4.clustrmaps.com/user/59cdf754″><img src=”http://www4.clustrmaps.com/stats/maps-no_clusters/irfanhandi.wordpress.com–thumb.jpg” alt=”" width=”150″ height=”100″ /></a>

<a href=”http://www.alexa.com/siteinfo/http://irfanhandi.wordpress.com” target=”_blank”><img src=”http://xsltcache.alexa.com/site_stats/gif/s/a/aHR0cDovL2lyZmFuaGFuZGkud29yZHByZXNzLmNvbS8=/s.gif” /></a>

<a href=”http://www.prchecker.info/” target=”_blank”><img src=”http://pr.prchecker.info/getpr.php?codex=aHR0cDovL2lyZmFuaGFuZGkud29yZHByZXNzLmNvbS8=&amp;tag=2″ alt=”" width=”" height=”" /></a>

</div>

Contoh kode html dengan Source-Code :

<div style="overflow:auto;width:220px;height:212px;background-attachment:scroll;background-image:url('http://kumpulanfilegratis.files.wordpress.com/2009/03/bacground.jpg');border:1px solid #cbcbcb;padding:5px;">

<a href="http://s09.flagcounter.com/more/dK9"><img src="http://s09.flagcounter.com/count/dK9/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_12/viewers_0/labels_0/pageviews_0/" alt="free counters" border="0" /></a>

<a href="http://www4.clustrmaps.com/user/59cdf754"><img src="http://www4.clustrmaps.com/stats/maps-no_clusters/irfanhandi.wordpress.com--thumb.jpg" alt="" width="150" height="100" /></a>

<a href="http://www.alexa.com/siteinfo/http://irfanhandi.wordpress.com" target="_blank"><img src="http://xsltcache.alexa.com/site_stats/gif/s/a/aHR0cDovL2lyZmFuaGFuZGkud29yZHByZXNzLmNvbS8=/s.gif" /></a>

<a href="http://www.prchecker.info/" target="_blank"><img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL2lyZmFuaGFuZGkud29yZHByZXNzLmNvbS8=&amp;tag=2" alt="" width="" height="" /></a>

</div>

Untuk meng-copy kode diatas arahkan mouse ke pojok kanan atas pada area source code dan klik icon ‘view source’.

Jelas terlihat bedanya kan? Selain untuk mengurangi eror, tampilan code-code tersebut akan terlihat lebih cantik.

Lalu bagaimana caranya untuk membuat code seperti diatas?
Anda tinggal mengcopy code dibawah ini, lalu letakkan code html yang Anda inginkan pada tulisan yang berwarna hijau:

[***sourcecode language="css"]
Letakan code html anda disini
[/sourcecode]

Catatan: Setelah di copy-paste hilangkan tanda bintang tiga yang berwarna merah diatas [***] untuk membuat code ini berjalan normal.

Jika masih belum berhasil menampilkan codenya, mari sama-sama kita diskusikan.

Semoga berhasil.

NB : Bagi Master-master Mohon masukannya.