Cara Membuat Scroll pada Widget Blog

Teman- teman Blogger seringkali disulitkan dengan adanya gadget semacam daftar isi, arsip atau link list yang panjang dan tidak sistematis. Karena widget tersebut cukup penting, sayang sekali memang kalau harus dihilangkan hanya gara- gara tampilannya yang tidak cantik. Nah untuk mempercantik penampilan blog ini maka sebaiknya pada widget- widget ini diberikan efek scroll sehingga dapat menghemat space dan lebih enak dilihat oleh pengunjung.

Lalu bagaimana cara membuat scrollpada widget blog?? Sejauh ini ada 3 Cara Membuat Scroll pada widget blog. Dari ketiga tips ini silakan sobat mencoba salah satu yang tentunya lebih nyaman dan mudah diaplikasikan oleh sobat masing- masing :

1.     Dengan Javascript           

·         Login ke akun blogger > Rancangan > Add gadget > Add HTML/ Javascript

·         Masukkan kode berikut ini ke dalam kotak HTML/ Javascript

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

..................................

</div>

·         Ganti tanda titik- titik di atas dengan kode widget

2.     Menambah Kode CSS di Dalam Template

·         Login ke akun blogger > Template > Edit HTML, Centang Expand Template Widget

·         Cari kode ]]></b:skin>

·         Tambahkan kode CSS berikut tepat di atas kode ]]></b:skin>

#BlogArchive .widget-content{

height:230px;

width:auto;

overflow:auto;

}

·         Ganti BlogArchive dengan nama/ judul widget yang ingin diberikan scroll, judul harus sama persis

·         Save/ Simpan

3.     Menambahkan Kode CSS di Dalam Template II

·         Login ke akun blogger > Template > Edit HTML, Centang Expand Template Widget

·         Cari nama/judul widget yang akan diberikan scroll

·         Cari kode <div class='widget-content'> yang letaknya dibawah nama/ judul widget tersebut.

·         Tambahkan kode berikut tepat dibawah kode tersebut :

<div style='overflow:auto; width:ancho; height:300px;'>

·         Sedikit ke bawah, tambahkan  </div> setelah kode <b:include name='quickedit'/>

·         Save/ Simpan

Sekian postingan Cara Membuat Scroll pada Widget Blog. Semoga bermanfaat ^_^.

sumber :  http://blogpemula-tutorial.blogspot.com/2012/06/membuat-scroll-widget-blog.html