Cara Mengubah Tampilan Widget Popular Post Menjadi Lebih Menarik di Blogger

Kamu pasti sudah tahu apa itu Widget Popular post. Widget 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 seperti ini sudah disediakan oleh Blogger, namun tentu saja mengikuti versi template yang digunakan. Apakah kamu ingin mengubah tampilannya? tentu saja bisa, kamu bisa memodifikasinya sesuai keinginanmu. Berikut ini admin akan membagikan widget popular post versi kedua. 

Widget Popular Post V.2

Widget popular post lumayan berguna bagi blog karena dapat menambah jumlah page views dan mempermudah pengunjung dalam mengexplorasi blog kamu. 

LIHAT DEMO

Cara memasang widget popular post ini di Blogger

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

Add Widget Popular Post v.2

3. Contoh settingannya seperti di bawah ini.

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 ini versi dua, pastilah ada versi lain, cari saja di blog ini. Sekian, salam Bloggers.