Sebelumnya saya sudah membagikan Template Gratis dengan fitur fantastis yaitu Edna Template Blogger, silahkan jika ingin mendownload.
langsung saja kamu ikuti tutorial yang saya berikat berikut ini :
- Pertama Buka Blogger > Template > Edit HTML jika sudah cari CSS Popular postnya dan ganti dengan CSS dibawah ini
/* Popular Post Widget */
.popular-posts ul {margin: 0!important;}
.PopularPosts .widget-content ul li, .PopularPosts img{padding:0!important;}
.popular-posts .item-thumbnail {width:100%;height:150px;overflow:hidden;}
.popular-posts .item-thumbnail img {min-width:100%;min-height:100%;transition:all 0.3s;}
.popular-posts .item-thumbnail img:hover {transform:scale(1.1);}
.popular-posts li:first-child {width:100%;height:150px;margin-bottom:-3px;}
.popular-posts li:last-child {margin-bottom:3px;}
.popular-posts li:not(first-child) {width:49%;float:left;margin-right:3px;height:100px;}
.popular-posts li {position:relative;overflow:hidden;margin-bottom:-6px;}
.popular-posts .item-title {color:#fff;position:absolute;bottom:0;left:0;padding:5px;height:30px;background:rgba(0, 0, 0, 0.45);font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;line-height:20px;transition:all 0.2s;}
.popular-posts .item-title a {color:#fff;}
.popular-posts li:hover .item-title {height:50px;line-height:30px;}
- Langkah Kedua yaitu Menambahkan Javascript untuk memperbesar Thumbnail popular postnya, silahkan kalian salin javascript dibawah ini dan kalian paste di atas </head>
<script type='text/javaScript'>
//<![CDATA[
$(document).ready(function() {$('.popular-posts img').attr('src', function(i, src)
{return src.replace( 'w72-h72-p-nu', 's300' );
}
);});
//]]>
</script>
