Cara membuat widget popular post lebih Menarik

membuat widget popular post Blogger lebih menarik – Yosh , Selamat Pagi, siang, sore, malam 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

  1. login ke Blogger.com
  2. 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}

3. 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>

4. Setelah itu Simpan Template dan Lihat Hasilnya.

Sekian tutorial kali ini, Semoga Bermanfaat untuk sobat semua, dan tunggu tutorial lainnya dari Emalution.

Leave a Comment