Membuat Widget Popular Post Warna Warni

Widget Popular Post Full Collor agar blog tampil lebih elegan.
Silkan ke menu template edit dan copy kode ini tepat diatas kode </b:skin> atau </style>

/*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 img {display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left;}
.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}

/* PopularPost color */
.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}

Dan simpan juga scrypt ini dibawah kode </b:skin>
Scrypt ini untuk mengatasi tumbnail yang error.

<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(e,t){var n=200;var r=150;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'"/>';if(t!="")return image_tag;else return""}
//]]>
</script>

Untuk Merubah warna silahkan cari di  flatuicolors.com

Tweet