Membuat Popular Post Blog Warna-Warni keren

Popular post adalah salah satu widget blogger yang paling sering di pasang di blog, yang bertujuan untuk memperlihatkan beberapa artikel terbaik dalam blog, dan ini tentu akan menambah page view untuk blog anda.

Popular post bisa anda pasang pada sidebar blog dengan mudah, karena merupakan salah satu widget default dari blogger. Namun, modifikasi blog saat ini sangat beragam mulai yang suka paduan warna, bermain pada garis atau yang lainnya. Nah, kali ini saya akan membrikan trik untuk membuat popular post default menjadi warna-warni keren banget untuk mempercantik tampilan blog.

Berikut langkah-langkah yang harus dilewati untuk memasang popular post keren di blog:

1. Login dulu akun blogger sobat.

2. Selanjutnya pilih menu “Template” lalu pilih “Edit html”.

3. Kemudian cari kode ]]></b:skin> lalu letakkan kode berikut tepat diatas kode tadi.

/* Popular Post */
.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 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative;}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#444 !important;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;top:0px;right:0px;padding-right:0px !important;}
.PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
.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;}

4. Silahkan Save dan lihat hasilnya.

Sekarang tampilan popular post di blog sobat sudah menjadi keren dan akan memikat hati pengunjung untuk membaca artikel pada popular post. Semoga dapat bermanfaat dan selamat mencoba.

Share this post