Cara Membuat Populer Post Warna Warni Ala Evo Magz

Coba Ngetik - Selamat siang sobat blogger. Mumpung ada waktu luang jadi siang ini saya akan memcoba membuat postingan tentang Cara Membuat Populer Post Warna Warni Ala Evo Magz. Widget populer post ala evo magz adalah populer post yang berwarna-warni seperti pelangi. Ini yang banyak di sukai oleh sahabat blogger, selain warna warni juga ada nomernya di setiap artikel yang populer.
Ini adalah Screnshot tampilan populer post ala evo magz
Baca juga Membuat Post Label Warna Warni Di Blog.

Bagaimana sob? apa Anda ingin membuat Popular Post Warna-warni Ala Evo Magz. Jika Anda ingin membuatnya, mari kita ikuti caranya di bawah ini.

Baca juga : Membuat Label Ala Evo Magz.

  1. Pertama Anda masuk dulu pada akun blogger Anda.
  2. pilih Template ==> Edit HTML.
  3. Kemudian cari kode ]]></b:skin> Kalo sudah ketemucopy 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 selesai melakukan cara di atas sekarang silahkan lihat widget popular post Anda, bagai mana? jadi keliatan keren kan. Hehe. Bagi Anda yang ingin download template Evo Magz gratis silahkan masuk di postingan saya Template Evo Magz Gratis Download.
Ya sudah, mungkin cuma itu yang bisa saya bagikan di postingan Cara Membuat Popular Post Warna Warni Ala Evo Magz

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser