Selasa, 08 Juni 2010


Cara Menampilkan Kode HTML Pada Artikel

Cara Menampilkan Kode HTML Pada Artikel - 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('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/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 http://centricle.com/tools/html-entities/
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 :



Selain cara yang saya tuliskan diatas kita juga menggunakan kode textarea dengan kode seperti ini <textarea>kode HTML</textarea>

Tampilan kode HTML dengan menggunakan textarea seperti dibawah ini :



Kode yang membentuk textarea diatas seperti ini :

<p align="center"><textarea style="WIDTH: 500px; HEIGHT: 300px" name="txt" rows="100" wrap="VIRTUAL" cols="55"><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('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/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></textarea></p>

Untuk mengubah TINGGI dan LEBAR textarea silahkan ubah angka pada "HEIGHT" dan "WIDTH" pada contoh diatas saya menggunakan "WIDTH: 300px; HEIGHT: 500px"

Untuk mengubah ukuran silahkan ubah nilai yang ada sesuai keinginan anda.

Salam : Basri Tamang

0 komentar:

Posting Komentar

Anda tidak diperbolehkan berkomentar bersifat promosi produk yang sama dengan di artikel, Apabila anda tetap berkomentar maka komentar anda akan kami Hapus