Cara Memasang Widget Popular Post Tampil Lebih Menarik

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Kali ini Saya akan berbagi sedikit tips untuk mengganti tampilan widget popular post biasa menjadi lebih menarik. Sebetulnya ini adalah trik blogger yang pernah Saya bagikan di blog Saya yang dulu yaitu Aisuka Blog.

Langsung saja ke cara penerapannya :

1. Buka Blogger > Template > Edit HTML > Tambahkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

.PopularPosts .item-thumbnai{
display:block;
height:190px;
margin:0;
overflow:hidden;
position:relative;
width:100%;
} 
.PopularPosts .item-title {position:relative;} 
.PopularPosts img {display:block;
height:auto;
position:absolute;
width:100%;
}
.item-title a {
background:none;
color:transparent;
font-family:Oswald;
font-size:17px;
font-weight:400;
padding:10px 0;
padding-right:300px;
position:absolute;
right:0;
text-align:center;
top:0;
width:100%;
transition:all 0.2s ease-out;
}
.item-title a:hover {
background:#f97e76;
color:#fff;
padding-right:0;
}
.item-snippet {
background:none;
color:rgba(0,0,0,0.3);
font-weight:normal;
left:12%;
padding:10px;
position:absolute;
text-align:center;
top:95px;
width:70%;
transition:all 0.2s ease-out;
}
.item-snippet:hover {
background:#4f5a66;
color:#FFFFFF;
}
.item-content {
position:relative;
}

2. Selanjutnya tambahkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
    //<![CDATA[
    // Popular Posts
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
//]]>
</script>

3. Simpan template.

Tidak ada demo, tampilan widget bisa dilihat seperti gambar di atas.

Posted in: Blogger