Bleckurant.Blogspot.Com: Cara Menampilkan Kode HTML Dalam Artikel Yang Kita Posting

Mungkin teman-teman netter sekalian pernah mengalami pengalaman seperti saya waktu pertama kali memposting kode HTML dalam blog. Karena ketika kita memposting kode HTML secara langsung maka hasil yang nantinya ditampilkan tidak sesuai dengan harapan atau malah muncul karakter-karakter aneh yang tidak kita mengerti.

Untuk menampilkan sebuah kode HTML dapat anda lakukan tahapan sebagia berikut:

1. Lakukan parse terhadap kode HTML yang ingin ditampilkan.
Untuk mengetahui cara melakukan parse anda dapat membaca artikel saya Cara Melakukan Parse Kode HTML
Hal ini berfungsi agar nantinya kode HTML tersebut dapat ditampilkan sesuai dengan keinginan kita.

Misalnya kode ( Tulisan Warna Biru) yang ingin kita tampilkan kedalam postingan adalah sbb:

KODE 1 (Kode HTML Yang Ingin Kita Tampilkan)

<titttle> Uji COba </titttle>
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>

Jika kode tersebut langsung kita masukan ke postingan dengan cara meng'copy paste secara langsung maka hasilnya (Tulisan Warna Biru) setelah postingan ditampilkan adalah sbb:

KODE 2 (Hasil Kode HTML Jika Ditampilkan Tanpa Melakukan Parse)

Uji COba

Dari KODE 2 diatas jelas sekali perbedaan dengan kode aslinya pada KODE 1, yakni dari 3 baris pada KODE 1 hanya ditampilkan satu baris saja itupun hanya sebagian sedangkan kode lainnya hanya terbaca sebagai spasi atau karakter lain dan ini maksud saya hasil yang ditampilkan tidak sesuai dengan yang kita harapkan.

Maka dari itu untuk bisa menampilkan kode agar hasilnya nanti sama persis dengan KODE 1 maka harus dilakukan parse ( baca: Cara Melakukan Parse Kode HTML). Hasilnya jika KODE 1 dilakukan parse adalah sbb:

KODE 3 (Kode Hasil Parse Dari Kode HTML Pada KODE 1)

<titttle> Uji COba </titttle>
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>

2. Setelah kita mendapatkan kode hasil parse diatas (KODE 3) maka kode inilah yang nantinya akan disisipkan kedalam postingan anda seperti pada gambar dibawah dan baru setelah itu tekan "Terbitkan Entri"

3. Apabila ingin menambahkan scroll untuk postingan kode HTML anda seperti contoh dibawah ini:

<b:loop values='data:posts' var='post'><br /><b:loop values='data:post.labels' var='label'><br />textLabel = "<data:label.name/>";<br />var test = 0;<br />for (var i = 0; i < labelArray.length; i++)<br />if (labelArray[i] == textLabel) test = 1;<br />if (test == 0) {<br />labelArray.push(textLabel);<br />var maxLabels = (labelArray.length <= maxNumberOfLabels) ?<br />labelArray.length : maxNumberOfLabels;<br />if (numLabel < maxLabels) {<br />search10(homeUrl3, textLabel);

Maka anda perlu menambahkan kode (Tulisan Warna Biru):

<p align="left"><textarea name="code" rows="10" cols="35">
Kode HTML Yang Sudah Anda Parse
</textarea></p>

Jadi untuk menghasilkan tampilan seperti contoh diatas maka kodenya adalah sbb:

<p align="left"><textarea name="code" rows="10" cols="35">
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
</textarea></p>