gubhugreyot: Demo & Tutorial: Cara membuat Scroll Box Widget Popular Posts di Blogger

Saturday 14 January 2012

Cara membuat Scroll Box Widget Popular Posts di Blogger

Scroll Box Widget Popular Posts

Jika anda salah satu pengguna widget popular posts blogger plugin dan setting popular posts dengan jumlah 10 posting maka pasti widget ini akan terlihat sebagai deret meninggi seperti layaknya gedung pencakar langit. Ada beberapa cara untuk membuat tinggi box widget popular posts ini menjadi lebih pendek agar widget popular posts lebih fleksibel penempatannya sekaligus membuat widget ini terlihat lebih rapi. Membuat scroll box adalah salah satu cara yang paling sederhana dan gampang. Kode CSS bisa kita manfaatkan atau dapat juga langsung kita gunakan kode html di bagian body.

Scroll Box Widget Popular Posts Blogger Plugin dg Kode CSS

Jika anda ingin menggunakan kode CSS untuk membuat scroll box, simpan kode CSS di atas kode ]]></b:skin>.

Kode CSS Scroll Box

.popular-posts{
       height:250px;
       overflow:auto;
}

Scroll Box Widget Popular Posts Blogger Plugin dg xHTML

Berbeda dengan ketika kita gunakan kode CSS, saat kita membuat scroll box widget popular posts menggunakan xHTML maka modifikasi/perubahan kode html yang terdapat di antara tag pembuka body (<body>) dan tag penutup body (</body>) harus dilakukan.

Carilah kode berikut ini:

xHTML yang harus dirubah

<div class='widget-content popular-posts'>

Ganti dengan kode berikut:

xHTML Scroll Box Widget Popular Posts

<div class='widget-content popular-posts' style='height:250px;overflow:auto;'>

Catatan/Keterangan:

Jika anda blom mengaktifkan widget popular posts atau mungkin ingin membuat sebuah ticker cantik untuk widget popular posts, silahkan buka tutorialnya melalui link di bawah ini: