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.

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

Sekedar curhat, kalau cara yang saya terapkan dalam pemasangan popular post karya Kang Mousir di Blog ini 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 ini.

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.

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

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

Baca Juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: