Memasang Widget Popular Posts Ala Evo Magz

Cara Memasang Widget Popular Posts Warna Warni Ala EvoMagz - Pada postingan perdana saya kali ini, saya akan membagikan cara memasang widget Popular Posts ala Template Premium EvoMagz yang sangat keren.

EvoMagz merupakan template premium buatan Mas Sugeng. Salah satu yang menarik dari template tersebut adalah widget popular postsnya. Salah satu keunggulan widget popular posts ini yaitu berwarna warni layaknya pelangi diangkasa yang memikat siapapun yang melihatnya (lebay). Untuk itu saya akan membagikan tutorial untuk memasang widget tersebut.

Langkah - Langkah Membuat Popular Post Berwarna Ala Evo Mag

1. Pertama pasang widget Popular Postsnya di Tata Letak.

2. Lalu tambahkan kode CSS dibawah ini diatas ]]></b:skin> atau </style> agar widget popular postsnya menjadi berwarna.

/* 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. Setelah itu silahkan klik Save Template.

Dengan menambahkan CSS diatas pada widget popular posts, sobat bisa membuat widgetnya menjadi warna warni bagai pelangi. Jika sobat ingin mengubah warnanya silahkan ganti kode #xxxxxx sesuai keinginan sobat.

sumber : http://www.masyadi.com/2014/09/cara-desain-widget-popular-post-warna-warni-ala-evo-magz.html

Share :

Tweet

✚

Related Post