Membuat widget scroll sidebar

Sering kali kita menemukan blog yang menampilkan widget dengan navigasi scroll, istilahnya scroll box. Widget ini memiliki penggulung di sebelah kanan dan kadang juga di sebelah bawah berisi teks link, tulisan biasa, dsb. Tujuannya tentu saja selain untuk mempercantik blog juga agar pembaca atau pengunjung lebih mudah mengeksplorasi konten blog.



Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box
Contoh Scroll Box

Adapun cara membuat scroll box ini adalah dengan menggunakan script di bawah ini.
Code
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #FFFFFF;">
ISI KONTEN WIDGET
</div>
Keterangan:
  • ISI KONTEN WIDGET ini diganti dengan teks, link atau script yang Anda inginkan.
  • overflow:auto; penggulung tampil setelah isi scroll box telah melebihi batas tinggi atau lebar default sidebar template.
  • width:100%px; lebar widget scroll box
  • height:200px; tinggi scroll box
  • padding:10px; jarak antara tulisan di dalam scroll box dengan garis tepi scroll box
  • border:1px solid #FFFFFF; ketebalan dan kode warna garis scroll box.
  • Semua nilai di atas bisa dirubah sesuai kebutuhan.
Contoh:
Kita ingin menampilkan seluruh arsip blog pada widget ini. Isikan kode berikut pada Gadget HTML/Javascript :
Code
<div style="overflow:auto; width:100%px; height:300px; padding:10px; border:1px solid #FFFFFF;">
<script src="http://kerahledrek.googlecode.com/files/bloggermonthlysitemap.js">
</script><script src="http://kerahledrek.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>
Note : Ganti URL yang berwarna merah dengan URL blog sobat dan lihat hasilnya.
Selamat mencoba, semangat dan salam blogger.

1 komentar :

  1. artikel menarik, kunjungan baliknya gan
    www.mbahgahol.blogspot.com
    follow aja nnti saya followbalik blog agan

    BalasHapus

Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.