cara membuat popular post warna warni keren diblog

Oleh Unknown

Rabu, 10 Desember 2014

Bagikan :

Tweet

Kalian ingin membuat popular post menjadi warna warni.Ha kebetulan saya ini
membagikan cara membuat popular post menjadi warna warni di blog.



    

1.Login Ke Blogger.com

2.Klik Template>Edit HTML
3.Copy Kode Dibawah ini diatas ]]></b:skin>

/*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}
/*
 Design Warna */
.PopularPosts ul li:nth-child(1){background-color:#c0392b}
.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}  

Terima Kasih

Share artikel ke :

Facebook Twitter Google+