Cara Membuat Widget Populer Post yang Keren dan Berwarna

Populer post merupakan widget yang disediakan oleh blogger kepada pengelo blog dimana untuk menampilkan posting-posting populer atau paling banyak dilihat, baik berdasarkan satu minggu, satu bulan, dan satu tahun. Widget populer post sangatlah penting dan wajib dimiliki oleh sebuah blog karena agar pengunjung mengetahui posting mana yang paling sering dilihat pada blog tersebut. Dan juga widget populer post juga dapat menambah pageview karena kemungkinan pengunjung akan membacanya jika tertarik.

Pada kali ini saya akan membagikan widget Populer Post yang keren dan berwarna (seperti populer post blog ini). Tutorial membuat widget populer post sangatlah mudah, berikut tutorial pemasangannya:

1. Pergi ke Blogger.
2. Pilih menu Tata Letak.
3. Tambah Widget lalu pilih Entri Populer.
4. Atur pengisian seperti ini (untuk jumlah posting yang tampil dan perhitungan posting dalam batasan waktu bisa disesuaikan sesuai kebutuhan).
   
    
5. Klik Simpan.

Langkah selanjutnya adalah menambahkan CSS agar tampilan entri populer tersebut menjadi berwarna. Caranya sangat mudah, berikut adalah tutorial pemasangannya:

1. Pergi ke Blogger.
2. Masuk ke menu Template.
3. Lalu pilih Edit HTML.
4. Silahkan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 0 0 0 !important;
padding:10px 20px 10px 10px !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
font-family:arial, sans-serif !important;
font-size:12px;
font-weight:bold !important;
display:block;
position:absolute;
top:-5px;
right:-5px;
border-radius:16px;
background-color:#333;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}

5. Simpan Tema dan lihat blog kalian.

Cukup mudah bukan Tutorial Membuat Widget Populer Post yang Keren dan Berwarna. Baik cukup sekian dan terima kasih sudah berkunjung ke blog ini.