Widget Popular Post Berwarna

Author: Teknisi Alarm

Jika kita berkunjung ke sebuah Blog, terkadang kita sering melihat Popular Post dengan tampilan berwarna-warni yang menambah indah tampilan sebuah blog. Kali ini saya akan share cara membuat Popular Post tersebut dari yang monoton menjadi lebih ceria berwarna-warni.

Berikut cara konfigurasinya :

1. Buka Layout, kemudian pilih dan edit Widget Popular Post. Hilangkan centang pada image thumbnail dan snippet kemudian simpan.

   
   
   
    
2. Buka Template > edit HTML (sebelumnya lakukan backup untuk antisipasi jika terjadi kesalahan), tambahkan kode dibawah tepat diatas ]]></b:skin>

 
/* Widget Popularposts*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{
margin:0;
padding:0;
list-style:none;
border:none;
background:none;
outline:none
}
.PopularPosts ul{
margin: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
}
.item-thumbnail img{float:left;margin:0 10px 0 0}
.PopularPosts a{
color:#fff!important
}
.PopularPosts a:hover{
background:#7f8c8d;
color:#ddd!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
}
.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;}

Simpan dan lihat hasilnya.

Labels: Desain Blog, Internet