Membuat Popular Post berlatar belakang warna

Blogger Blog 21. Artikel ini akan membahas cara membuat Popular Post berlatar belakang warna yang pada dasarnya berguna untuk mempercantik tampilan widget Popular Post itu sendiri. Penampilan widget Popular Post yang menarik, tentunya akan mempengaruhi minat pengunjung untuk mengaksesnya, dengan demikian pada salah satu kesempatan akan menambah pageview blog kita yang pada akhirnya akan mempengaruhi score Alexarank.

Seperti apakah tampilan widget Popular Post yang akan kita buat tersebut ? Silahkan perhatikan gambar di bawah ini, dan bilamana anda tertarik untuk membuatnya, silahkan lanjutkan terus pada cara membuatnya di bagian bawah artikel ini.

Tampilan Widget Popular Post berlatar belakang warna

Bagaimana caranya ? Tambahkan script berikut ini di atas ]]></b:skin>

.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}
/* Design Warna */
.PopularPosts ul li:nth-child(1){background-color:#f4a460}
.PopularPosts ul li:nth-child(2){background-color:#e74c3c}
.PopularPosts ul li:nth-child(3){background-color:#d35400}
.PopularPosts ul li:nth-child(4){background-color:#e67e22}
.PopularPosts ul li:nth-child(5){background-color:#f39c12}
.PopularPosts ul li:nth-child(6){background-color:#f1c40f}
.PopularPosts ul li:nth-child(7){background-color:#2980b9}
.PopularPosts ul li:nth-child(8){background-color:#3498db}
.PopularPosts ul li:nth-child(9){background-color:#16a085}
.PopularPosts ul li:nth-child(10){background-color:#1abc9c}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

Demikianlah caranya, semoga bermanfaat.