Membuat Widget Popular Post di Blogger Style V.5

HaiSob apa kabar 😊 ? Semoga semua dalam keadaan baik, setelah pada waktu yang lalu saya sudah membagikan widget-widget popular post yang berbeda-beda maka pada kesempatan ini saya akan membagikan lagi widget popular post versi ke Lima.

Pastinya sobat Sudah tahu apa itu Widget Popular postWidget Popular post adalah widget yang menampilkan sekumpulan postingan yang sering dikunjungi atau dibaca oleh pengunjung. Widget ini sudah disediakan oleh Blogger tapi kita bisa memodifikasinya sesuai dengan keinginan kita.

Widget Popular Post V.5


widget popular post versi lima
Widget Popular Post V.5

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



Cara memasang widget popular post V.5 di Blogger


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

Add Widget Popular Post v.5
Add Widget Popular Post v.5

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post v.5
Setting widget popular post v.5

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 { float:left; max-height:130px; min-width:250px; position:relative; }
.sidebar .PopularPosts .item-thumbnail::after { color:rgba(255,255,255,0.63); content:counter(popularcount,decimal); counter-increment:popularcount; font:70px &#39; Oswald&#39; ,sans-serif; list-style-type:none; position:absolute; left:5px; top:-5px; z-index:4; }
.sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0.3); bottom:0; content:&quot; &quot; ; height:100px; width:100px; left:0; right:0; margin:0 auto; position:absolute; z-index:3; }
.sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; }
.sidebar .PopularPosts .item-thumbnail { width:100px; height:100px; margin:0 10px 0 0 !important; position:relative; }
.sidebar .PopularPosts .item-thumbnail:hover:before { display:none; }
.sidebar .PopularPosts .item-thumbnail img { position:relative; padding-right:0 !important; height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts .item-title { font:13px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; padding:0 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; }
.sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
.sidebar .PopularPosts .item-content { padding:5px 0; border-bottom:1px dotted #dedede; overflow:hidden; height:100px; position:relative; }
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 widget popular post for Blogspot Blogger versi lima ini.

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