Widget Popular Post Blogger
Sesuai namanya, widget ini ditujukan kepada pengguna yang ingin menampilkan post-nya yang paling sering dikunjungi visitor melalui sebuah widget. Penempatan bisa dilakukan di sidebar kanan/kiri atau di footer.
Fungsi lain dari widget ini selain memberi nilai lebih pada penampilan blog yaitu menjadi salah satu navigasi bagi visitor untuk mengakses artikel - artikel/post yang ada di blog.
Tampilan popular post tanpa thumbnail gambar yang akan kita buat disini kurang lebih seperti screenshot di bawah ini.
![]() |
| sumber gambar : dokumen pribadi |
Untuk membuatnya kurang lebihnya ada dua tahap, yaitu menambahkan widget lalu menambahkan CSS.
Pertama, Anda harus menambahkan widget terlebih dahulu,
1. Login ke Blogger --> Tata Letak (bagi yang belum tahu, Tata Letak muncul dengan mengklik tombol tanda panah ke bawah setelah Anda login di blog) --> Tambahkan Gadget.
![]() |
| sumber gambar : dokumen pribadi |
2. Pada halam kecil yang muncul, pilih Entri Populer.
![]() |
| sumber gambar : dokumen pribadi |
3. Lalu sesuaikan pengaturan sesuai dengan yang Anda inginkan.
![]() |
| sumber gambar : dokumen pribadi |
4. Setelah selesai, klik Simpan.
Tahap kedua, Anda harus memasukkan CSS ke blog Anda.
1. Pergilah ke Template, lalu klik Edit HTML.
![]() |
| sumbet gambar : dokumen pribadi |
2. Cari kode ]]></b:skin> lalu paste kode berikut tepat di atasnya.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFFFFF;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
<a href="http://www.nurwahidin.com/">Muhammad Nurwahidin</a>
}
.popular-posts ul li {background: #FFFFFF;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
<a href="http://www.nurwahidin.com/">Muhammad Nurwahidin</a>
}
3. Ganti kode warna sesuai yang Anda inginkan. Untuk mengetahui kode warna untuk warna tertentu, silakan buka saja Colorhexa.
4. Setelah selesai, klik Simpan Template dan widget Anda sudah dimodifikasi tampilannya dengan CSS (Cascading Style Sheet).
Semoga bermanfaat...
4. Setelah selesai, klik Simpan Template dan widget Anda sudah dimodifikasi tampilannya dengan CSS (Cascading Style Sheet).
Semoga bermanfaat...






No comments