Cara Mudah Menampilkan Kode HTML pada Artikel Blog

HTML atau HyperText Markup Language adalah sebuah bahasa pemograman yang digunakan untuk membuat halaman website atau blog serta menampilkan berbagai informasi yang terdapat dalam sebuah web browser internet. HTML digunakan untuk membuat sebuah halaman website dan juga menampilkan berbagai informasi yang di inputkan ke dalam HTML tersebut seperti gambar, teks, video, dan lainnya, sehingga bisa ditempilkan melalui web browser. Selain itu, HTML bisa digunakan untuk membuat sebuah link yang nantinya menuju ke sebuah halaman website lainnya dengan kode tertentu.

Untuk menampilkan kode HTML tersebut pada artikel blog, dapat menggunakan beberapa cara. Pada kesempatan kali ini, penulis akan memberikan beberapa tips dan trik untuk menampilkan kode HTML pada artikel blog :

1. Menggunakan Teks Area

Tulis atau copy kode <p align=”center”><textarea name=code” rows=”6” cols=”20”> KODE HTML YANG AKAN DITAMPILKAN </textarea></p> pada menu Posts, seperti pada tampilan dibawah.

Note :

• Rows=”6” : tinggi teks area tersebut. Anda bisa rubah tingga teks area tersebut dengan angka yang lebih tinggi atau rendah sesuai dengan keinginan anda 
• Colss=”20” : lebar teks area tersebut. Dan anda dapat rubah angka tersebut sesuai dengan keinginan anda. 
• <p align=”center”> : teks area berada ditengah artikel. Apabila anda ingin merubah posisi teks area tersebut. Silakan rubah kata Center, posisi di kiri artikel menggunakan Left, atau kanan menggunakan Right. 

Berikut hasil kode HTML yang akan muncul di postingan blog anda

<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/> </b:if> </b:loop> </b:if>

2. Memformat atau Memparse Kode HTML

• Buka situs yang menyediakan tool untuk memformat kode HTML. Misalnya situs favorit penulis http://codeformatter.blogspot.co.id/
• Copy kode HTML yang akan format pada textarea dibawah “Paste Here Your Source Code” 

• Silakan anda atur beberapa opsi format sesuai dengan yang diinginkan. Misal penulis sendiri memilih rubah settingan “Need Line Code Numbering” menjadi “NO” dan “Remove Blank Lines” menjadi “NO”. 

• Kemudian Klik “Format Source Code”. Sehingga akan tampil kode HTML yang sudah diformat seperti dibawah ini. 

• Copy kode HTML yang sudah diformat tersebut pada menu Posts dengan mode posting HTML. Maka hasilnya akan seperti berikut

 <b:if cond='data:post.labels'>   
 <b:loop values='data:post.labels' var='label'>   
 <b:if cond='data:blog.pageType == "item"'>   
 <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>   
 </b:if>   
 </b:loop>   
 </b:if>    
   

Semoga bermanfaat

Happy Fun