Trik untuk membuat Scrool widget | Animasi

H ai sobat blogger mau buka rahasia nich buat sobat blogger yang masih kebingungan untuk membuat scroll pada widget ,sebagai contoh widget itu berjudul "full  tutorial blog disini" kaya judul wiget punyaku coba lihat gambar di bawah ini:

Coba bayangkan andai postingan/ artikel kita berjumlah ratusan lalu mau di masukkan ke dalam satu widget bisa kebayangkan pasti akan memanjang kebawah ,yang tentu saja tidak bagus buat penampilan sebuah website /blog.nah untuk mengatasinya  tentu saja kita harus menggunakan fungsi scroll box ,Nah menariknya fungsi scroll yang akan kita buat ini bisa di gunakan untuk widget apa pun ,misalkan kalian kasih  Judul,Label,kategories,kumpulan script dll .terserah kalian mau kasih nama apa .....sebelum sobat memulai cara membuat scroll dan animasinya coba simpan dulu kode css dibawah ini di notepad atau wardpad sekedar buat persiapan berikut

kode nya:
#Nama widget .widget-content li{list-style:none;padding-left:40px;
        background:url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/panah-jalan.gif) no-repeat 0 6px;}
#Nama widget .widget-content{
height:250px;
width:auto;
overflow:auto;}

sekedar info saja  untuk teks warna merah nantinya diganti dengan nama widget yang akan kita beri scroll /Animasi ,dan untuk teks yang berwarna biru adalah link gambar animasi terserah mau diganti dengan link gambar yang sobat sukai  dan ukuran nya kalau dalam bentuk jpeg atau png sekitar width:9px height :9px
wah ..panjang juga yach infonya belum lagi tutorialnya pasti yang baca Capek apa lagi yang nulis he he he he ..oke bos kita langsung menuju ke tutorialnya :

1. masuk ke dasboard  janganlupa download lengkap template 
2. Edit html terus Expand Template Widget  
3. lalu dengan bantuan CTRL + F cari nama widget yang akan kamu kasih scroll sebagai contoh nama widget nya adalah "full tutorial  blog disini "nantinya sobat akan menemui kode kode seperti gambar di bawah ini :
   
4. Lihat contoh gambar diatas yan dilingkari merah ada kode HTML6  kopy  kode tersebut dan pastekan ke kode css yang di simpan di wardpad atau notepad  tadi maka nantinya akan menjadi seperti ini :
   #HTML6 .widget-content li{list-style:none;padding-left:40px;
           background:url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/panah-jalan.gif) no-repeat 0 6px;}
   #HTML6 .widget-content{
   height:250px;
   width:auto;
   overflow:auto;}
   
5. lalu kopy kan semua css kode di atas tepat di atas kode ]]></b:skin> dan lihat hasilnya .trik ini bisa sobat lakukan ke semua  widget dengan cara yang sama seperti contoh di atas .
Lalu save template

Untuk mengatur ketinggian  ganti teks yang berwarna biru .
Akhir nya selesai juga ....nah buat sobat blogger yang masih kesulitan atau masukan mungkin ada kesalahan pemasangan script koreksi di kotak komentar...Wassalam