Cara memberi scroll pada Popular posts di Blog

Cara Membuat Scroll Widget Popular Post

Setelah beberapa kali gagal saat menerapkan tutorial mengenai cara membuat scroll blog popular post dari tutorial rekan rekan blogger, akhirnya saya mendapatkan cara yang cukup praktis dan gampang untuk diterapkan di blog saya dan berhasil saya pasang pada widget popular post, widget recent post maupun widget lainnya di blog saya ini.

Yang baru saya tahu ada dua cara untuk membuat scroll atau menambahkan fungsi scroll pada widget, yang pertama yaitu dengan cara menambahkan kode CSS langsung didalam widget html dan yang kedua dengan cara menambahkan kode CSS pada bagian dalam kode template (edit template).

Cara yang pertama sudah saya coba dan berhasil, tetapi hasilnya saya kurang puas, karena bagian tepi scroll nya tidak pas sejajar dengan batas side bar widget bagian luar (padahal pengaturan "width" nya sudah saya set "auto").

Akhirnya saya pakai cara yang kedua, yaitu dengan edit html dan hasilnya bagian tepi scroll dapat sejajar secara otomatis dengan bagian tepi side bar widget.

Selain itu cara yang kedua ini menurut saya sangat praktis untuk diterapkan didalam blog saya, apabila rekan-rekan mau mencoba silahkan dicoba sendiri dan rasakan sensasinya....

Berikut caranya:
  1. Login ke blogger dengan akun rekans
  2. Masuk ke halaman Template
  3. Klik Edit HTML Lalu Lanjutkan
  4. Cari kode ]]></b:skin>
    (gunakan Ctrl+F)
  5. Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin>
     6. Simpan template dan lihat hasilnya

Demikian tutorial dari saya mengenai cara membuat scroll blog popular post, semoga bermanfaat dan happy blogging buat rekans semua.

Keterangan:
  • #PopularPosts1 : adalah id untuk widget popular post yang akan dibuatkan scroll nya, untuk widget yang lain rekan-rekan bisa cari sendiri id nya, biasanya untuk widget selain popular post menggunakan nama HTML1, HTML2, HTML3 dan seterusnya.
  • height:200px : adalah tinggi scroll, bisa rekan-rekan rubah sesuai keinginan atau kebutuhannya.

0 comments: