Cara Membuat Popular Post Warna-Warni Seperti Evo Mag Cara Membuat Popular Post Warna-Warni Seperti Evo Mag - mizipediacom mizipediacom: Cara Membuat Popular Post Warna-Warni Seperti Evo Mag










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara Membuat Popular Post Warna-Warni Seperti Evo Mag

Sabtu, 11 Maret 2017



Cara Membuat Popular Post Warna-Warni Seperti Evo Magz

Bagi anda yang tertarik untuk membuat Popular Post Warna-Warni Seperti Template Evo Magz mas sugeng, terlebih dahulu simak penejlasan singkat  saya pada pagi ini, 


Cara Desain Widget Popular Post Warna-Warni Ala Evo Magz
Nah  hal yang menarik dari template evo magz mas sugeng adalah pada widget postnya tersebut berwarna layaknya seperti pelangi , bisa membuat design template anda menjadi lebih indah jika anda ingin menerapkan cara pembuatannya,  jika anda tidak suka maka anda abaikan saja, tetapi jika anda ingin memiliki widget popular post seperti Template Evo Magz mas sugeng , Langsung saja anda ikuti langkah-langkah nya seperti di bawah ini.

Cara Membuat Popular Post Berwarna Ala Evo Mag


  1. Pertama , pastikan andasudah memasang widget popular postnya anda
  2. Perlu i ketahui anda sudah memasang widget popular postnya pada template blog anda
  3. Kemudian anda klik Edit HTml
  4. Selanjutnya tambahkan kode css berikut bawah ini letakan di atas ]]></b:skin> atau </style>untuk mengubah widget popular postnya 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}
  5. JNah jika sudah anda mnegikuiti langkah- langkah di atas, maka ilahkan anda save template dan liat hasilnya
Setelah anda memasang code css nya ke HTML blog anda, maka anda bisa melihat hasilnya post populer anda menjadi warna warni kayak seperti template Evo Magz mas sugeng..selamat mencoba dan semoga berhasil ya.hehe.
Lihat Juga