Cara Membuat Widget Popular Post Warna-Warni ala Template Evo Magz

Cara Membuat Widget Popular Post Warna-Warni ala Template Evo Magz - Sebelumnya saya juga sudah sharing tentang Cara Membuat Widget Random Posts Berwarna .Dan kali ini Saya akan memberikan tutorial lagi tentang cara memodifikasi widget default popular post menjadi lebih keren layaknya template premium Evo Magz yang bawaan Mas Sugeng so coolll :D

Salah satu hal yang menarik dari template evo magz adalah pada widget postnya , yaitu widget Popular Post tersebut berwarna layaknya pelangi , jadi membuat design template anda menjadi lebih indah . Jadi jika Anda ingin memiliki widget popular post seperti itu , kali ini saya akan membagikan tutornya bagi Anda supaya blog Anda makin bewarna dan hidup Anda juga makin ceria (alay) :D

Cara Membuat Widget Popular Post Warna-Warni ala Template Evo Magz

1. Pertama , pastikan Anda sudah memasang widget popular postnya
2. Kemudian tambahkan kode css berikut diatas ]]></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:0;right:0;padding-right:0!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}

3. Jika sudah silahkan Save Template dan lihatlah hasilnya

Nah dengan menambahkan bumbu css diatas pada widget popular post , maka widget popular post anda yang mulanya biasa-biasa aja , kini menjadi luar biasa , hehhehe , oke jika Anda tertarik dengan Popular Post ala Evo Magz , silahkan Anda coba tutorial diatas.Dan kalau ada yang kurang paham silahkan tinggalkan komentar Anda. Terima Kasih. 25Writing*