Menampilkan Script HTML/PHP/Javascript Pada Posting Blog

Menampilkan script atau kode HTML kedalam sebuah halaman web atau blog kadang menjadi masalah tersendiri. Apalagi bagi mereka yang sering memberikan tutorial yang berkaitan dengan Web atau Blog. Hal tersebut tidak bisa terlepas dari Script yang memang harus ditampilkan sebagai penjelasan dalam sebuah tutorialnya. Oleh karena itu disini saya akan sedikit menjelaskan beberapa cara menampilkan script HTML diantaranya:

1. Menggunakan Text Area

cara ini cukup mudah dilakukan, anda hanya memasukkan script html kedalam Text Area, berikut ini contoh script nya :

<p>
Konten disini</p>
<br>Konten disini</br>
<b>Konten disini</b>

Hasilnya :
<p> Konten disini</p> <br>Konten disini</br> <b>Konten disini</b>

2. Menggunakan Parse

Cara ini cukup sedikit ribet karena anda harus terbiasa dengan kode parse untuk menggatikan tag HTML yang akan anda tampilkan. berikut ini table Parse yang dapat anda gunakan :

Result	Description	Entity Name	Entity Number
	non-breaking space	 	 
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
§	section	&sect;	&#167;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;
™	trademark	&trade;	&#8482;

Contoh saya akan menampikan script  berikut :

<table border="1"> <tbody> <tr> <td>Mata Kuliah</td> <td>Pemrograman Web Dasar</td> </tr> </tbody></table>

Kemudian ganti semua tak sesuai tabel parse diatas, jika anda kesulitan menggantinya, anda dapat memanfaatkan link Convert berikut ini  : PARSE HTML
Hasilnya :

---

<table border="1">
 <tbody>
 <tr>
 <td>Mata Kuliah</td> 
 <td>Pemrograman Web Dasar</td> 
 </tr> 
</tbody>
</table>

---

3. Menggunakan High Lighter

cara ini cukup populer dan sangat banyak Blog atau Website yang menggunakanya. saya sudah menggunakanya pada  penjelasan  cara 1 dan 2. Oke tanpa panjang x lebar lagi saya akan menjelaskan step by step pengaplikasiannya ke dalam blogspot.

1. Login ke blog anda, kemudian masuk ke Template--> Edit HTML
2. Carilah </head>, kemudian pastekan scrip dibawah ini :

<!-- Syntax Highlighter 3.0.83 START --> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script> <!-- Syntax Highlighter 3.0.83 END -->

3. Kemudian klik Simpan Template
4. Untuk menggunakanya  pada postingan anda yaitu dengan menuliskan script berikut :

<pre class="brush: html"> untuk script html <pre class="brush: css"> untuk kode css <pre class="brush: java"> untuk coding java <pre class="brush: php"> untuk coding php

Untuk melihat dukungan bahasa lainnya klik disini

<pre class="brush: html"> <!----Awal isi konten-----> <table border="1"> <tbody> <tr> <td>Progdi :</td> <td>Teknik Informatika</td> </tr> </tbody></table> <!----Akhir isi konten-----> </pre>

5. Hasilnya :

    
Progdi :
    
Teknik Informatika
  

Terima Kasih, Semoga Bermanfaat.