Buat Scroll Di Widget

Cara Membuat Scroll Widget di Blogger

Membuat atau menambahkan scroll pada widget sangat bermanfaat selain menghemat ruang page Blog Anda juga dengan membuat scroll di widget ini bisa merapikan ukuran dari beberapa widget yang terpasang, yang mungkin ukurannya tidak selalu sama antara yang satu  dengan widget yang lainnya.

Ada widget yang biasanya banyak memerlukan ruang yang lebih seperti widget Popular Post, Blog Archieve,   mungkin juga Blogroll atau yang lainnya. Widget-widget tersebut akan  membuat halaman page terlihat memanjang ke bawah bila contentnya sudah terbilang banyak. Oleh karena itu, tidak ada salahnya mencoba dengan menambahkan scroll di widget tersebut, seperti digambar ini :

contoh tampilan scroll widget 

Kode utama scroll umumnya yaitu overflow:...;, code ini yang akan kita pakai untuk ditambahkan di template nantinya. Untuk membuat scroll pada widget ada 2 cara untuk melakukannya,  sebagai contoh kita akan memasang scroll pada widget Popular Post, seperti yang ada di blog ini.

Cara Pertama 

• Masuk ke Edit HTML--->Centang Expand Widget
• backup template Anda dahulu untuk menghindari adanya kesalahan
• Setelah masuk menu Edit HTML, cari kode :

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

tambahkan kode scroll, style='overflow:auto; height:200px' sehingga kode-nya menjadi seperti ini ;

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

• Save Template

*height:200px merupakan ukuran tinggi dari widget popular post tersebut, Anda bisa atur ukuran ketinggian dari widget tersebut dengan mengubah angkanya sesuai keinginan.

Cara ini simple dan mudah dipraktekan dan hasilnya bisa dilihat langsung. Sebelum save coba di ditinjau dahulu dengan klik pratinjau.

Cara Kedua

Selain dengan cara pertama yang begitu simple dalam pemasangan fungsi scroll pada widget, kalian bisa menambahkan scroll pada widget dengan cara menambah kode css yang ditempatkan diatas kode ]]></b:skin>, seperti contoh pada cara pertama yaitu memasang scroll pada widget popular post, kode css yang harus ditambahkan adalah :

#PopularPosts1 .widget-content {

   height:200px;

   overflow:auto;

}

#PopularPosts1 merupakan nama dari widget popular post, jika kalian akan memasang scroll pada widget yang lainnya, kalian harus mengetahui nama dari widget yang akan ditambahkan scroll.

Selain hanya memasang scroll pada widget dengan menambahkan kode css seperti diatas, kalian bisa memodifikasi widget tersebut dengan penambahan background ataupun dengan pemberian bentuk dll, sebagai contoh sederhana kita tambahkan kode css untuk memberi background dan border lengkung, kode css yang ditambahkan :

#PopularPosts1 .widget-content {

   Background: #91AC53;

   border-radius: 10px;

}

 Sehingga keseluruhan kode css yang perlu diletakan diatas kode ]]></b:skin> adalah sebagai berikut :

#PopularPosts1 .widget-content {

   height:200px;

   overflow:auto;

   Background: #91AC53;

   border-radius: 10px;

}

Save template kalian dan lihat hasilnya.

• Anda bisa merubah warna backgorund, border radius, height (ukuran) sesuai dengan selara.

Setelah saya terapkan diblog ini saya puas dengan tampilan scroll di widget ini,namun kekuranganya tip modif css ini hanya optimal tampilannya di browser Chrome dan kurang memuaskan bila dipakai di Firework browser. Tip modifikasi ini saya kutip dari blog situseo yang  banyak membahas artikel modifikasi css yang cukup keren menurut saya.

Share always with u.....