Cara Membuat Popular Post Warna Warni Seperti Evo Magz

Cara Membuat Popular Post Warna Warni Seperti Evo Magz - Kembali lagi bersama Anas Blogging Tips. Pada artikel sebelumnya saya sudah share template elegan dari Arlina Design, yakni Nubie Banget Responsive Blogger Template. Sekarang saya akan memberikan tutorial bagaimana membuat widget popular post agar berwarna warni seperti yang ada di template Evo Magz besutan Mas Sugeng.

Seperti yang kita ketahui jika sobat seorang Blogger tipe Template Hunter tentu saja saya rasa sobat tahu Template Sejuta Umat karya Mas Sugeng, Evo Magz Blogger Template.

Baca juga : Evo Magz V3.3 Blogger Template

Cara Membuat Popular Post Warna Warni Seperti Evo Magz

1. Sebelumnya pastikan dulu sobat sudah memasang widget popular post nya di blog sobat

2. Login akun blogger sobat dan buka menu template >> edit HTML

3. Pasang kode CSS berikut di atas kode ]]><b/:skin> atau </style> untuk mengubah nya menjadi berwarna seperti Evo Magz

/* 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:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:#000!important;text-decoration:none}

.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:nth-child(1){background-color:#A51A5D;margin-right:1%!important}

.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(2){background-color:#F53477;margin-right:2%!important}

.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!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(8){background-color:#44CCF2;margin-right:8%!important}

.PopularPosts .item-snippet{font-size:11px}

.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}

4. Save template

Silahkan lihat hasilnya apakah widget popular post sobat berubah? Bagaimana pasti lebih keren kan?

Di artikel selanjutnya saya akan share Tutorial Cara Membuat Navigasi Yang Keren Seperti Evo Magz.

Dan silahkan follow Anas Blogging Tips untuk terus mengetahui Panduan, Trik, Dan Tips Lengkap Lain nya Tentang Blogging serta nantikan artikel berikutnya ya.

Terima kasih sobat telah membaca artikel "Cara Membuat Popular Post Warna Warni Seperti Evo Magz". Sobat tidak diperbolehkan untuk menyalin (copy-paste) segala dan keseluruhan konten Anas Blogging Tips

 

Tweet