Cara Membuat Popular Post Seperti Template EVO MAGZ

Mahrus Net - Bagaimana Popular Post Seperti Template EVO MAGZ? Niscaya nir sedikit orang yang ingin mengedit blognya menjadi keren serta tampil beda, misalnya memodifikasi template baik body, widget juga sidebarnya.
Nah disini aku terdapat tutorial blogging buat merubah tampilan popular post atau entri popular sebagai keren banget yang telah diterapkan sang mas sugeng di template andalannya evo magz. Berikut tampilan screen shotnya gan :

Cara Membuat Popular Post Seperti Template EVO MAGZ :

Silahkan anda ikuti cara mengolahnya gan :

1. Pastikan Sahabat Sudah Login ke blogger.com
2. Pilih Template  
3. klik Edit HTML
4. Cari kode ini ]]>

Copy kode pada bawah ini Tepat di atas kode ]]> 

/* 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 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
font-weight:bold;
color:#000 !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;
}
/* Set color and level */
.popularPosts ul li:nth-child(1) background-color:#A51A5D;margin-right:1% !Important
.popularPosts ul li:nth-child(dua) background-color:#F53477;margin-right:dua% !Important
.popularPosts ul li:nth-child(3) background-color:#FD7FAA;margin-right:tiga% !Important
.popularPosts ul li:nth-child(4) background-color:#FF9201;margin-right:4% !Important
.popularPosts ul li:nth-child(5) background-color:#FDCB01;margin-right:lima% !Important
.popularPosts ul li:nth-child(6) background-color:#DEDB00;margin-right:6% !Important
.popularPosts ul li:nth-child(7) background-color:#89C237;margin-right:7% !Important
.popularPosts ul li:nth-child(8) background-color:#44CCF2;margin-right:8% !Important
.popularPosts ul li:nth-child(9) background-color:#01ACE2;margin-right:9% !Important
.popularPosts ul li:nth-child(10) background-color:#94368E;margin-right:10% !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;
 

     6. Simpan/Save dan lihat hasilnya..

Mudah bukan semoga bisa membantu anda serta berguna.