Cara Memasang Scroll Pada Blog Cara Memasang Scroll Pada Blog

 

Widget yang dipasang di Blog terkadang ukurannya bisa terlalu tinggi jika dipaksakan untuk menampilkan semua isi dari widget tersebut.

Untuk mengatasinya kita bisa menambahkan fungsi scroll pada widget tersebut untuk menyesuaikan ketinggian dari widget yang kita pasang.

Widget pada blog (blogspot) terbagi dua, yaitu widget bawaan  dan widget custom.

Widget yang dipasang di Blog terkadang ukurannya bisa terlalu tinggi jika dipaksakan untuk menampilkan semua isi dari widget tersebut.

Untuk mengatasinya kita bisa menambahkan fungsi scroll pada widget tersebut untuk menyesuaikan ketinggian dari widget yang kita pasang.

Widget pada blog (blogspot) terbagi dua, yaitu widget bawaan  dan widget custom.

Widget bawaan adalah widget yang memang sudah disediakan oleh Blogspot itu sendiri. Sedangkan widget custom maksudnya adalah widget yang dibuat/dipasang sendiri oleh user dengan menambahkan dan mengedit kode HTML/Javascript, karena widget tersebut tidak disediakan oleh Blogspot. 

Untuk dapat menambahkan scroll pada kedua jenis widget ini caranya akan berbeda.

Pada postingan kali ini saya ingin membahas cara memasang scroll pada blog untuk widget standar/bawaan blogspot. Untuk contoh kali ini, widget yang akan ditambahkan scroll adalah widget Populer Post bawaan Blogspot.

Tambahkan dulu widget Popular Posts seperti contoh dibawa ini:

Setelah widget Popular Posts terpasang pada blog, selanjutnya kita buka menu Template pada blog untuk menambahkan script didalam widget popular posts tersebut.

Selanjutnya cari widget popular posts yang sudah dibuat tadi, gunakan CTRL+F agar lebih cepat, kemudian akan muncul kode html seperti berikut (ini contoh di dalam template blog saya):

<b:widget id='PopularPosts3' locked='false' title='Populer Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<div style='overflow:auto; width:105%;height:200px;'>
====== kode script lainnya pada widget =======
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Perhatikan kode yang di tandai warna merah dan biru (<div style='overflow:auto; width:105%;height:200px;'>) dan (</div>) di atas. 

Kode itulah yang harus disisipkan kedalam script widget popular posts yang telah dibuat tadi. Untuk kode yang berwarna biru (height:200px;) untuk mengatur tinggi fungsi scroll.

Simpan/Save template dan silahkan lihat hasilnya.