Widget Popular Post Style V.2 for Blogger

HaiSob apa kabar 😀 ? Ok sob, berikut ini haisob.com akan membagikan widget popular post versi kedua. Widget ini sudah disediakan oleh Blogger tinggal kamu saja yang menentukan ingin memasangnya, memodifikasi atau tidak memasang sama sekali.

Kamu pasti sudah tahu apa itu Widget Popular postWidget Popular post adalah widget yang menampilkan sekumpulan postingan yang sering dikunjungi,dilihat atau dibaca oleh pengunjung berdasarkan hari, minggu, bulan, tahun atau setiap saat menurut perhitungan Google Analytic.

Widget Popular Post V.2


widget popular post versi dua
Widget Popular Post V.2

Widget popular post sangat berguna bagi blog karena dapat menambah jumlah page views dan mempermudah pengunjung dalam mengexplorasi blog kamu. Untuk fersi pertamanya kamu bisa membaca: widget popularpost v.1.



Cara memasang widget popular post V.2 di Blogger


1. Di Blogger 😀
2. Pilih menu Layout / Tata letak ➔  Add a Gadget/ Tambahkan Gadget ➔ Popular Post

Add Widget Popular Post v.2
Add Widget Popular Post v.2

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post v.2
Setting widget popular post v.2

4. Letakan kode CSS ini di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { counter-reset:popularcount; margin:0; padding:0; }
.sidebar .PopularPosts ul li { width:100%; list-style:none !important; padding:0 !important; margin-bottom:20px; position:relative; border:0; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; height:120px; }
.sidebar .PopularPosts .item-thumbnail { width:100%; position:relative; margin-bottom:15px; }
.sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0) none repeat scroll 0 0; border-bottom:29px solid #fff; border-left:29px solid transparent; border-right:29px solid transparent; bottom:0; content:&quot; &quot; ; height:0; width:0; left:0; right:0; margin-left:auto; margin-right:auto; position:absolute; z-index:3; }
.sidebar .PopularPosts .item-thumbnail:after { color:#000; content:counter(popularcount,decimal); counter-increment:popularcount; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; list-style-type:none; position:absolute; bottom:0; text-align:center; margin:0 auto; left:0; right:0; z-index:4; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; width:100%; height:120px; object-fit:cover; }
.sidebar .PopularPosts .item-title { font:15px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; text-align:center; margin:0 auto; padding-bottom:10px; border-bottom:1px solid #000; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { padding:10px 15px; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; text-align:center; }
5. Letakan script dibawah ini diatas </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>
6. Save template.

Jika tampilan widget popular post di blog kamu terasa kurang menarik, kamu dapat mengubahnya menjadi lebih menarik, misalnya dengan mencoba kumpulan widget popular post ini.

Jika ini versi dua, pastilah ada versi lain, cari saja di blog ini. Sekian, salam Bloggers.
Join This Site