Skip to content Skip to sidebar Skip to footer
Home / Blog Design / Blog Widget / Blogging

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
Tidak ada seorang muslim pun yang mendo’akan kebaikan bagi saudaranya (sesama muslim) tanpa sepengetahuannya, melainkan malaikat akan berkata, “Dan bagimu juga kebaikan yang sama”.
  • Facebook
  • WhatsApp
  • Instagram