Popular Post Widget For Blogspot Blogger Style V.3

HaiSob apa kabar 😎 ? Baiklah sobat, pada kesempatan ini saya akan membagikan popular post widget blogger versi tiga. Widget ini sudah disediakan oleh Blogger tinggal kamu saja yang menentukan ingin memasangnya, memodifikasi atau tidak memasang sama sekali.

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. Mungkin saja kamu sudah bosan dengan tampilan widget popular post di blogmu saat ini dan ingin mencoba gaya yang baru, kamu dapat mencoba widget ini.

Popular Post Widget V.3


widget popular post versi tiga
Widget Popular Post V.3

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



Cara memasang widget popular post V.3 di Blogger


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

Add Widget Popular Post v.3
Add Widget Popular Post v.3

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post v.3
Setting widget popular post v.3

4. Letakan kode CSS ini di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { padding:0; margin:0; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; }
.sidebar .PopularPosts .item-thumbnail { width:130px; height:130px; border-right:5px solid #fff; margin:0 10px 0 0 !important; position:relative; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts ul li { float:left; margin-bottom:5px; max-height:130px; min-width:250px; overflow:hidden; }
.sidebar .PopularPosts ul li:first-child { background:#D9EDF7; }
.sidebar .PopularPosts ul li:first-child + li { background:#F2DEDE; }
.sidebar .PopularPosts ul li:first-child + li + li { background:#DFF0D8; }
.sidebar .PopularPosts ul li:first-child + li + li + li { background:#FFEEBC; }
.sidebar .PopularPosts ul li:first-child + li + li + li + li { background:#E0E0E0; }
.sidebar .PopularPosts .item-title { font:13px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; padding:10px 5px 10px; }
.sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; }
.sidebar .PopularPosts .item-snippet { font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; padding-right:5px; }
.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
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 mengubahnya menjadi seperti popular post widget for Blogspot Blogger versi tiga ini.

Jika ini versi ketiga pastilah ada versi lain, cari saja di blog ini. Sekian, semoga bermanfaat.
Join This Site