Cara membuat widget popular post lebih Menarik

Yosh , Selamat sore Sobat wahid emalution.
udah lama saya gak posting karena binggung apa yang mau di posting 😂. Tapi sekarang saya mulai Aktif lagi nih, dan kali ini saya mau membagian tutorial cara membuat widget popular post lebih menarik pada Blogger. Langsung saja kita ke Tutorialnya

login ke Blogger.com

lalu sobat masuk ke template lalu edit HTML, dan letakan kode dibawah ini di atas ]]></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}

Lalu Letakan Javascript Dibawah Diatas </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>

Lalu Simpan Template dan Lihat Hasilnya.

Sekian Dari saya , Semoga Bermanfaat untuk sobat semua, dan tunggu tutorial lainnya dari Emalution. Terima Kasih.