Membuat Widget Terkenal Post Ala Evo Magz

Baca Juga

Selamat pagi sobat, mumpung ada waktu luang jadi pagi ini Saya akan posting sob. Sebelumnya saya sudah membagikan Download Template Evo Magz Gratis, dan pada pagi ini Saya akan posting Cara Membuat Popular Post Ala Evo Magz. Widget popular post ala evo magz yaitu popular post yang berwarna-warni menyerupai pelangi.

Bagaimana sob? apa Anda ingin menciptakan Popular Post Warna-warni Ala Evo Magz. Jika Anda ingin, ayo ikuti caranya menyerupai dibawah ini.
1.Pertama Anda masuk dulu pada akun blogger Anda.
2.Pilih Template ==> Edit HTML
3.Cari instruksi ]]></b:skin> Kalau sudah ketemu copy instruksi CSS di bawah ini dan letakan di atas instruksi ]]></b:skin>

/* 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 0 0 0 !important; padding:10px 20px 10px 10px !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; font-family:arial, sans-serif !important; font-size:12px; font-weight:bold !important; display:block; position:absolute; top:-5px; right:-5px; border-radius:16px; background-color:#333; color:#fff !important; width:28px; height:28px; line-height:28px; text-align:center; padding-right:0px !important; border:2px solid #fff; } /* Set color and level */ .PopularPosts ul li:nth-child(1) {background-color:#A51A5D; } .PopularPosts ul li:nth-child(2) {background-color:#F53477; } .PopularPosts ul li:nth-child(3) {background-color:#FD7FAA; } .PopularPosts ul li:nth-child(4) {background-color:#FF9201; } .PopularPosts ul li:nth-child(5) {background-color:#FDCB01; } .PopularPosts ul li:nth-child(6) {background-color:#DEDB00; } .PopularPosts ul li:nth-child(7) {background-color:#89C237; } .PopularPosts ul li:nth-child(8) {background-color:#44CCF2; } .PopularPosts ul li:nth-child(9) {background-color:#01ACE2; } .PopularPosts ul li:nth-child(10) {background-color:#94368E; } .PopularPosts .item-thumbnail { margin:0 0 0 0; } .PopularPosts .item-snippet { font-size:11px; }

Nah. Setelah Anda melaksanakan cara di atas kini widget popular post Anda jadi keren. Hehe.
Baca juga Membuat Popular Post Dengan Nomer
Mungkin hanya itu saja yang dapat Saya share di postingan Cara Membuat Widget Popular Post Ala Evo Magz