Cara mudah Membuat Widget Popular Post Tampil Lebih Menarik

Ini merupakan postingan kedua Saya di hari ini, kali ini saya akan berbagi sedikit tips untuk membuat tampilan widget popular post pada blog berbeda dari biasanya.

Langsung saja cara penerapannya seperti ini :


CSS

Terapkan sebelum kode ]]></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;
}

Berhubung CSS ini saya ambil dari blog ini, jadi untuk Font, lebar img, warna serta kode CSS lainnya Sobat bisa atur kembali sesuai selera.


JAVASCRIPT

Terapkan sebelum kode </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; );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization
    // Trim Code
    $('.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>

Simpan template, dan lihat hasilnya.