Mendesain Widget Popular Post Warna - Warni Ala Evo Magz

Penulis adit

Kamis, 02 Oktober 2014

Bagikan :

Tweet

Cara Mendesain Widget Popular Post Pelangi (Warna-Warni) Ala Evo Magz - Di kesempatan kali ini saya akan share tutorial mengenai Blogging lagi. setelah kemarin saya share "cara buat tombol social media ala fastest magz", kali ini saya akan share cara mendesain widget popular post menjadi warna-warni seperti evo magz. Untuk yang belum tau kerennya widget popular post ini, anda bisa lihat penampakannya di bawah ini..

Penampakan Widget Popular Post Ala Evo Magz

Untuk kalian yang tidak tau Evo Magz, Evo Magz adalah template lanjutan dari karya mas sugeng sebelumnya (Fastest Magz) yang di rilis pada 29 april 2014. Widget Popular Post adalah salah satu widget yang menarik di template evo magz ini. Untuk kalian yang ingin memasang widget popular post keren seperti evo magz ini, anda bisa ikuti tutorial saya kali ini.

Tutorial Mendesai Widget Popular Post Menjadi Seperti Evo Magz :

1.) Masuk ke dasbor blogger >> Template >> lalu klick Edit HTML (Sebelumnya pastikan di blog anda sudah terpasang widget popular post)

2.) Cari kode ]]></b:skin> atau kode </style> , lalu tambahkan kode CSS ini Di Atas Kode Tadi.

/* 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}

3.) Klick Simpan Template atau jika ingin test dulu bisa klick pritinjau template. Selamat widget popular post blog anda sudah menjadi berwarna seperti evo magz :)

Sekian artikel mengenai Mendesain Widget Popular Post Warna - Warni Ala Evo Magz. Semoga artikel tersebut bermanfaat untuk Anda. Anda juga dapat menyebarluaskan atau mengcopy artikel Mendesain Widget Popular Post Warna - Warni Ala Evo Magz ini jika memang bermanfaat bagi Anda, namun jangan lupa untuk mencantumkan link sumbernya. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan, Terima Kasih.

Tag : Blogging, Tutorial