Menambahkan Scroll Pada Widget-Widget

Situseo Blog : Memasang atau menambahkan scroll pada widget, dari beberapa widget yang terpasang mungkin ukurannya tidak selalu sama antara yang satu widget dengan widget yang lainnya, selain untuk menghemat ruang, dengan menambahkan scroll pada widget bisa kita manfaatkan untuk merapihkan atau membuat sama ukuran widgetnya.

Jika sebelumnya pernah dikupas Cara Memasang Scroll Pada Postingan, untuk menambahkan scroll pada widget ada 2 cara untuk melakukannya, walaupun kode utama scroll tetap sama yaitu overflow:...;, sebagai contoh kita akan memasang scroll pada widget Popular Post, saya asumsikan kalian sudah memasang widget popular post pada blog kalian, untuk menambahkan scroll pada popular post, masuk Edit HTML - Ceklist Expand Widget Template dan lakukan backup template jika diperlukan untuk menghindari kesalahan.

Cara 1 :
Setelah masuk menu Edit HTML, cari kode :

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

kemudian 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'>

popular-post merupakan nama widget yang akan dipasang scroll, sedangkan height:200px merupakan ukuran tinggi dari widget popular post tersebut, kalian bisa atur ukuran ketinggian dari widget tersebut dengan mengubah angkanya.

Cara 2 :
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 id dari widget popular post, jika kalian akan memasang scroll pada widget yang lainnya, kalian harus mengetahui id 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, jika dari contoh diatas kurang cocok dari segi tampilannya, kalian bisa menambah style-style lainnya, atau bisa juga backgroundnya diganti dengan gambar kesayangan kalian.

Semoga bermanfaat,