Mendesain Widget Popular Post Menjadi Warna-Warni Seperti Evo Magz

Cara Mendesain/Membuat Widget Popular Post Menjadi Warna-Warni (Pelangi) Ala Evo Magz - Di kesempatan kali ini saya akan share mendesain widget popular post menjadi warna-warni seperti evo magz. Widget popular post adalah widget dari blogger yang memungkinkan kita untuk melihat entri populer (Artikel dengan pageviews terbanyak). Widget ini juga sangat penting bagi blog karena widget ini memungkinkan pengunjung untuk membaca artikel lainnya.

Widget Popular Post Ala Evo Magz

Salah satu widget popular post yang terkenal adalah widget popular post dari template Evo Magz karena widget popular post dari evo magz sangat keren dan berwarna warni. Untuk kalian yang belum tau bagaimana tampak dari widget popular post evo magz, anda bisa melihat gambar di atas tadi. Bagaimana? berminat untuk mendesain widget popular post anda menjadi seperti gambar di atas tadi? mari simak tutorial saya kali ini tentang cara mendesain widget popular post blogger menjadi seperti evo magz.

Tutorial Mendesain Widget Popular Post Menjadi Seperti Evo Magz : 

1.) Masuk ke dasbor blogger -> Template -> Lalu klik "Edit HTML"

2.) Cari kode ]]></b:skin> Atau kode </style> (Untuk mempermudah pencarian klik ctrl+f, masukkan kode lalu enter)

3.) Masukkan CSS ini Di Atas kode tadi.

/* 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}

4.) Klik Simpan Template.
Selesai, widget popular post anda sudah menjadi keren seperti widget popular post evo magz :)
Baca Juga : Cara Memasang Widget Metro Style Social Icon Untuk Blogger

Mendesain Widget Popular Post Menjadi Warna-Warni Seperti Evo Magz 2014-10-30T15:11:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous