Cara Membuat Popular Post Warna-Warni Bertingkat

By HP Yitno

Popular Post adalah menu wajib yang harus ada dalam sebuah website atau blog. Dengan memasang widget tersebut, jumlah pageview yang akan kita dapatkan juga meningkat tajam. Terlebih jika tampilan popular post memiliki warna cerah yang memikat perhatian. Teknik ini telah banyak digunakan oleh para pembuat template responsive.

Untuk membuat tampilan Popular Post Keren seperti itu, kita hanya perlu menambahkan kode css yang mengatur widget tersebut. Jangan khawatir, kode css ini tidak akan memberatkan loading blog sobat. Yang ada justru tampilan situs sahabat akan tampak lebih profesional dari sebelumnya. Cara memasangnya juga sangat mudah. Kita hanya perlu menyalin seluruh kode yang ada ke dalam sebuah template yang kita pakai.

Berikut tutorial lengkap membuat popular post keren berwarna:
1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Salin seluruh kode dibawah ini tepat diatas kode tersebut

/*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:.4em 0; list-style:none; font:normal normal 13px/1.4 &quot;Arial Narrow&quot;,Arial,Sans-Serif; color:black; counter-reset:num;}
.PopularPosts ul li img {display:block; margin:0 .4em 0 0; width:50px; height:50px; float:left; padding-left: 6px;}
.PopularPosts ul li {background-color:#eee; margin:0 10% .3em 0; padding:.4em 1.4em .4em .4em; counter-increment:num; position:relative;}
.PopularPosts ul li:before, .PopularPosts ul li .item-title a {font-weight:bold; font-size:120%; color:inherit; text-decoration:none;}
.PopularPosts ul li:before {content:counter(num); display:block; position:absolute; background-color:black; color:white; width:25px; height:25px; line-height:25px; text-align:center; top:60%; right:-10px; margin-top:-15px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;}

/* Design Warna */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

5. Simpan template dan lihatlah hasilnya.

Demikianlah tutorial sederhana membuat popular post bertingkat yang keren banget. Gunakan trik ini jika template yang anda unduh secara gratis kurang memuaskan. Dengan memodifikasi sedikit, template yang kita gunakan akan jauh lebih bagus daripada versi original.

SHARE :