Cara Menjadikan Popular Post Warna-warni

Ketika telah mebuat recent post berwarna-warni, saya lengkapi juga dengan membuat popular post warna-warni. Ini maksudnya agar seimbang dengan recent postnya. Dalam dunia desain, masalah keseimbangan sangat penting. Kita juga tidak senang jika ada yang tidak seimbang. Dengan seimbang membuat blog kita tampil menarik dan profesional.
 
Adapun cara membuat popular post warna-warni seperti pelangi sangat berbeda dengan membuat recent post warna-warni. Bedanya adalah, kita harus membedah HTML di dalam tubuh blog. Siapkan pisaunya dan asah terlebih dahuru sebelum membedah. Siap menjadi dokter bedah?

Ayo kita bedah…
1. Masuk ke edit template di bilah kiri bawah di antara tataletak dan setelan
2. Klik edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Copy dan tempelkan kode berikut diatas kode ]]></b:skin> atau </style>

 /*Custom Popular Post*/
.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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;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;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

5. Simpan Template
6. Beralih ke tata letak, pilih gadget dan pilih lagi popular post lalu simpan
7. Beri komentar jika Anda berhasil atau gagal. Insya Allah saya akan posting cara yang lainnya.
8. Terimakasih…

Cara Menjadikan Popular Post Warna-warni

. Saksikan tips blogging lainnya

Yuk bantu share. Semoga jadi amal jariyah dengan ikut berbagi ilmu bermanfaat ini. Aamiin.
Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Pin on Pinterest
Pinterest
Share on Tumblr
Tumblr
Share on LinkedIn
Linkedin

Leave a Reply