Cara Membuat Popular Post Berwarna dan Keren

Populart Post adalah artikel yang sering dikunjungi atau yang paling banyak dilihat oleh pengunjung. Seperti yang kalian tahu, bahwa Blogger menyediakan Widget Entri Popular. Namun Tampilannya biasa-biasa saja. Bagaimana kita modifikasi saja?

Screenshoot :

Perlu diketahui Blogger menyediakan Populart Post, namun tidak menarik. Bagaimana kita modifikasi saja, agar terlihat menarik dan enak dipandang. Oke langsung saja kita praktekan..

Cara Pertama :

1. Buka Blogger - Login!
2. Dashboard - Template -> Edit HTML.
3. Temukan kode ]]></b:skin> atau </Style>
4. Copy-Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau bisa juga </style>

/*Custom Popular Redesigned By gudangite*/
.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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

5. Simpan Template!
NB : Warna bisa diubah dengan Kode Warna HTML

Cara Terakhir :

1. Buka Tata Letak/Layout.
2. Tambahkan Widget
3. Entri Populer.

Screenshoot :

Begitulah Cara memodifikasi Populart Post agar terlihat menarik. Sekian dari saya, Semoga Bermanfaat!