Menampilkan teks html pada blog

Mungkin masih ada diantara kita yang belum tau bagaimana caranya menampilkan kode HTML pada artikel di blog kita seperti ini :

<style type="text/css">#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrVtD0VV1VTGh3vwZ82H7ZzJNaEG2_X4baX4euFJmfsIRAqmlyT3z5apKypA2aFDUANWjpK0lOllPnis7DJr1WvmAOCx2BhOU1glUHX7wu3WR0rFFq5g8MhasuQwK3hkhHLVuC76m7OPuF/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Masukkan kod Shout Box di sini
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Untuk menampilkan kode seperti itu caranya adalah dengan mengganti :

* Kode < diganti menjadi &lt;

* Kode " diganti menjadi &quot;

* Kode > diganti menjadi &gt;

Tapi bagaimana kalau kode yang akan kita tampilkan karakternya lumayan banyak seperti diatas ? Tentu kita akan kesulitan mengedit kodenya satu-satu.
Untuk hal ini kita dapat menggunakan software untuk encode atau decode HTML, Namun yang paling mudah menurut saya adalah dengan menggunakan web generator yang memiliki tool untuk encode dan decode HTML.
Saya sering menggunakan 3 situs yang penggunaannya cukup mudah yaitu :

1. Centricle.com

Caranya silahkan buka situsnya terlebih dahulu lalu klik tool atau langsung klik Link ini
Setelah itu maka akan muncul halaman diman terdapat kolom seperti pada gambar berikut :



Silahkan copy dan paste kode HTML pada kolom tersebut lalau klik "ENCODE". Setelah itu copy kode yang muncul untuk anda salin ke artikel setelah proses ENCODE selesai.

2. Blogcrowds.com

Cara mengoprasikan tidak jauh berbdeda dengan yang pertama, tampilannya seperti ini :



3. Acessify.com

Tampilannya seperti ini :



NB : dikutip dari http://www.tenriewa.co.cc/2010/06/cara-menampilkan-kode-html-pada-artikel.html