Blogger CSS3 Trik
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 adalah popular post yang berwarna-warni seperti pelangi.

Bagaimana sob? apa Anda ingin membuat Popular Post Warna-warni Ala Evo Magz. Jika Anda ingin, ayo ikuti caranya seperti dibawah ini.
1.Pertama Anda masuk dulu pada akun blogger Anda.
2.Pilih Template ==> Edit HTML
3.Cari kode ]]></b:skin> Kalau sudah ketemu copy kode CSS di bawah ini dan letakan di atas kode ]]></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 melakukan cara di atas sekarang widget popular post Anda jadi keren. Hehe.
Baca juga Membuat Popular Post Dengan Nomer
Mungkin hanya itu saja yang bisa Saya share di postingan Cara Membuat Widget Popular Post Ala Evo Magz

Diposkan oleh: Warim Pada:

Berlangganan Lewat Email

Kirim alamat email Anda untuk mendapatkan notifikasi artikel terbaru dari blog Website Mini secara GRATIS langsung di kotak masuk Anda.