Cara Membuat Popular Post Pelangi Ala Evo Magz

Cara Membuat Widget Popular Post Seperti Evo Magz Template - Halo sobat blogger semua, bagaimana kabarnya ? saya harap semuanya baik-baik saja. Setelah saya membagikan Cara Membuat Label Keren Seperti Evo Magz Template hari ini saya akan membagikan cara membuat default popular post di blogger menjadi lebih cantik.

Pada template Evo Magz buatan Mas Sugeng ini salah satu yang menarik adalah widget popular post-nya yang warna-warni ala pelangi, jadi membuat design popular post anda menjadi indah, jika anda ingin membuat widget popular post anda menjadi layaknya widget popular post evo magz, kali ini saya akan membagikan tips-nya bagi anda.

Berikut Cara Membuat Widget Popular Post Ala Evo Magz :

1. Pastikan sobat sudah memasang widget popular post di blog sobat
2. Masuk blogger
3. Pilih Template => Edit HTML
4. Tambahkan kode berikut diatas kode ]]></b:skin> atau </style>

/* 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(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !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:5% !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;
}

5. Jangan lupa klik simpan

Nah dengan menambah kode css diatas widget popular post anda menjadi lebih indah seperti template evo magz.