Cara Membuat Widget Popular Post Pelangi seperti EVO MAGZ Blogger Template

SETELAH sebelumnya membahas membuat widget poppular post seperti sang seo, kali ini tentang cara membuat widget popular post pelangi dan warna warni seperti template blogger evo magz mas sugeng riyadi.

Cara Membuat Widget Popular Post Pelangi seperti EVO MAGZ Blogger Template

Beberapa blogger beranggapan bahwa desain popular post ini tergolong unik dan tampak seperti pelangi, ada begitu banyak warna di tiap-tiap artikel, konten atau posting blog yang dianggap paling banyak dibaca minggu ini, bulan ini atau setiap saat.

Bagi Anda yang ingin mempercantik tampilan website, silahkan dicoba saja tutorial dibawah ini. Barangkali cocok untuk tampilan blog Anda nantinya.

Cara Membuat Widget Popular Post Pelangi seperti EVO MAGZ


Buat dan pasang terlebih dahulu widget popular post dibagian layout template blog. Silahkan atur konfigurasi atau setting widget, pastikan tampilannya mencapai 10 artikel terpopuler.

Jika sudah, sekarang saatnya menambahkan kode css diatas ]]></b:skin> atau diatas </style>. Fungsinya adalah mengubah tampilan widget popular yang awalnya biasa-biasa saja menjadi warna-warni (pelangi).

1. Masuk ke HTML blogger template
2. Cari (CTRL+F) kode ]]></b:skin> atau </style>
3. Tambahkan kode dibawah ini, tepat diatas ]]></b:skin> atau diatas </style>

/* Custom CSS for Blogger Popular Post Widget Evo Magz*/
.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}

4. Simpan template blogger. Coba cek tampilan blog Anda. Berhasil!

Setelah saya telusuri, ternyata sudah banyak situs-situs yang membahas tutorial widget popular post evo magz ini. Wah, saya ketinggalan dong. Hihihi. Good luck!

0 Response to "Cara Membuat Widget Popular Post Pelangi seperti EVO MAGZ Blogger Template"

Post a Comment

Komentar spam & link aktif akan dihapus. Centang OK pada "notify me" agar komentar balasan saya masuk ke email Anda.