Cara Membuat Kotak Gulir / Scroll box pada Blog

Fungsi dari Kotak Gulir atau Scroll Box adalah untuk merapikan Blog, salah satunya seperti Widget atau Gadget yang banyak terdapat pada Blog bisa kita rapikan dan menghemat tempat.

Selain bisa di pasang pada Widget atau Gadget, Kotak Gulir atau Scroll Box juga bisa di pasang di Tulisan Posting atau Halaman.

Oke untuk Tutorial saat ini saya akan membuatnya pada Widget atau Gadget

Langkah pertama Cara Membuat Kotak Gulir / Scroll box pada Blog adalah :

Login Blog =>Klik Tata Letak =>Klik Tambahkan Gadget

Cari Gadget HTML/JavaScript, lalu masukan Kode Script di bawah ini

<div style="overflow:auto; width:100%px; height:200px;
padding:10px; border:1px solid #eee;">
#######

</div>

Keterangan

- ####### => Ganti dengan Kode Script, Tulisan atau Link Blog/Web
- width:100%px; => Lebar
- height:200px; => Tinggi
- solid #eee; => Warna garis batas
- border:1px =>Garis batas
- padding:10px; => Jarak Tulisan atau gadget dengan garis batas kiri


Contoh Penulisan Jika Hanya Judul Tulisan

<div style="overflow:auto; width:100%px; height:200px;
padding:10px; border:1px solid #eee;">

jumadriansyah<br/>
ola ehen<br/>
Mardian<br />
<a href="http://jhoe-1987.blogspot.com/" target="_blank">jhoe-1987</a><br />
ayo<br />
ngeblog<br />
di blogger<br />
dan wordpress<br />

</div>
ditambahkan <br/> Supaya supaya Judul Tulisan tidak bersambunng seperti contoh diatas
untuk yang warna hijau contoh penulisan kode script jika ada Link Url nya
Warna kuning adalah Link URL
Warna Merah adalah Judul Link


Contoh Penulisan menggunakan Kode Script Gadget atau Widget

<div style="overflow:auto; width:100%px; height:200px;
padding:10px; border:1px solid #eee;">

<!-- Start Backlink Code --><a target="_blank" href="http://www.backlink4u.net/" title="Free Automatic Backlink"><img border="0" width="80" alt="Free Automatic Backlink" src="http://www.backlink4u.net/images/backlink.gif" height="15"/></a><!-- End Backlink Code -->
<br/>

<!-- auto ping by http://www.auto-ping.com/ -->
<a href="http://www.auto-ping.com/pinger" target="_blank"><img src="http://www.auto-ping.com/iping.php?aut=EF14380489BD68920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" alt="Ping your blog, website, or RSS feed for Free" border="0" /></a>
<!-- auto ping by http://www.auto-ping.com/-->
<br/>

</div>

Kode Script tersebut bisa dikembangkan lagi dengan macromedia dreamweaver atau program lainya
Jangan Lupa kalo sudah pasang Kode Script nya, klik SIMPAN    Hehehehehe
Selamat mencoba