Langsung saja ikuti langkah saya:
Petama buka blogger, lalu Template (tema), lalu klik Edit HTML, cari kode dan ganti kode css popular post-nya.
/* 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;}
Kedua untuk memperbesar thumbnail popular postnya, silakan copas kode di bawah ini pada diatas
"</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>
ketiga setting popular postnya, seperti gambar di bawah ini
No comments:
Post a Comment