Widget Popular Post untuk Blogger (Part 1)

Halo gan gua akan bagikan tutorialnlagi bagi lo semua, baiklah gua akan kasih tau tutorialnya. Simak baik baik!

✔ Langkah Langkah 

1. Masuk ke akun dashboard blogger kamu DISINI

2. Pilih Tata Letak >> Tambah Gadget >> Entri Populer

3. Lalu, Masuk Ke Template >> Edit HTML

✔ Pilih salah satu Widget Popular Post

Demo

Salin kode dibawah ini tepat diatas kode </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,&#39;...&#39;));
});
</script>

Lalu salin lagi css dibawah ini tepat diatas kode ]]></b:skin>

.sidebar .PopularPosts ul { margin:0; padding:0; }
.sidebar .PopularPosts ul li { list-style:none !important; padding:0 !important; margin-bottom:10px; }
.sidebar .PopularPosts .item-thumbnail { height:190px; margin:0; overflow:hidden; width:100%; }
.sidebar .PopularPosts .item-title { position:relative; }
.sidebar .PopularPosts img { height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts .item-title a { color:#FFFFFF; font:15px ' Oswald' ,sans-serif; text-transform:uppercase; font-size:20px; padding:10px; position:absolute; right:0; left:0; margin:0 auto; text-align:center; text-decoration:none; top:40px; width:60%; height:26px; overflow:hidden; z-index:2; }
.sidebar .PopularPosts .item-snippet { background:rgba(0,0,0,0.35); border-top:6px solid rgba(0,0,0,0.1); border-bottom:6px solid rgba(0,0,0,0.1); color:#FFFFFF; left:0; right:0; margin:0 auto; padding:65px 10px 10px; position:absolute; font:13px " Times New Roman" ,Times,FreeSerif,serif; text-align:center; top:35px; width:60%; z-index:1; }
.sidebar .PopularPosts .item-content { position:relative; }

 4. Simpan.

Jangan lupa untuk berlangganan lewat email untuk mengetahui jika postingan ini update

 Achlesy Man adalah seseorang yang hobby nge post & Gonta Ganti Platform Blogger Karena Senangnya, Dia sampai Lupa Waktu