Cara Mudah Memasang Popular Post Warna Warni Ala Kang Mousir

Saat membahas tentang popular post warna-warni pada tampilan blog, pasti yang pertama kali saya ingat adalah template Sang SEO karya Kang Mousir. Hal ini dikarenakan template buatan pihak ketiga pertama kali yang saya gunakan adalah template Sang SEO yang loadingnya sangat ringan dengan tampilan popular post yang khas itu.

Popular Post Warna Warni 

Nah, karena karena saya sangat suka dengan tampilan popular post ini, makanya saya mengkloningnya dengan template karya arlina design dan memakainya untuk blog ini.

Oke, langsung saja. Untuk sobat blogger yang juga ingin memasang popular post warna-warni karya Kang Mousir ini, maka silahkan mengikuti langkah-langkah di bawah ini:

Cara Memasang Popular Post Warna Warni Ala Kang Mousir

1.Masuk Menu Edit HTML

2.Cari kode ]]><b.skin>

3.Letakkan kode berikut di atas kode ]]><b.skin>

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

4.Simpan Template

5.Selesai

Cara yang saya terapkan dalam pemasangan popular post warna warni karya Kang Mousir di Blog saya yang lain adalah dengan menghapus seluruh popular post bawaan template dan menggantinya dengan popular post karya Kang Mousir, entah ada efeknya atau tidak, alasan saya hanya agar tidak terlalu banyak CSS dalam template blog saya.

Oh iya, rekomendasi Kang Mousir dalam menerapkan popular post karyanya ini adalah dengan tidak menampilkan thumbnailnya, alias mematikan fitur “tampilkan gambar” pada mode edit widget popular post. Sebab, jika fitur tampilan gambar diaktifkan, maka hasilnya akan terlihat kurang rapi.

DEMO

Akan tetapi, karena saya lebih suka dengan tampilan thumbnail, maka saya tetap menampilkannya dengan sedikit utak-atik biar lebih rapi.

Sekian dulu artikel tentang Cara Mudah Memasang Popular Post Warna Warni Ala Kang Mousir ini, semoga bermanfaat.