Cara Pasang Scroll Widget Popular Posts

Cara Pasang Scroll Widget Popular Posts – Walaupun judulnya tentang cara pasang scroll widget popular posts, tapi sebenarnya ini ditujukan untuk beberapa perubahan yang bisa kita lakukan pada widget, selain memasang scroll tentunya.

Memasang scroll pada widget popular posts bisa kita lakukan dengan 2 cara. Karena tidak menggunakan script seperti pada widget recent posts atau daftar isi, kita bisa langsung mengedit kode HTML nya atau bisa juga membuatkan kode CSS.

Kalau saya lebih tertarik untuk cara yang kedua, sekalian belajar mengenal cara menggunakan kode CSS agar tidak bingung-bingung amat🙂.

Sebelum membuat kode css terlebih dahulu kita mencari tahu id widget nya:
-Pilih menu Rancangan: Klik edit pada gadget yang ingin kita buatkan kode CSS, lihat gambar 1 dan 2.

Gambar 1

Gambar 2

Setelah mengetahui id widgetnya barulah kita mulai penulisan kode css, misalnya untuk popular post:

#PopularPosts1 .widget-content{
overflow:auto;
height:175px;
width:auto;
}

Sampai disini scroll untuk popular posts anda sudah jadi, tapi jika anda ingin melakukan perubahan yang lain seperti mengubah font judul widget dan memberinya background dengan sudut tumpul:

#PopularPosts1 h2 {
Background: #990000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
font: normal 150% Forte;
}

atau ingin mengubah font judul post/content:

#PopularPosts1 .widget-content{
font: bold 96% Tahoma;
}

-Jadi jika di gabung akan seperti ini dan letakkan diatas kode ]]></b:skin>

#PopularPosts1 h2 {
Background: #990000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
font: normal 150% Forte;
}
#PopularPosts1 .widget-content{
font: bold 96% Tahoma;
overflow:auto;
height:175px;
width:auto;
}