Popular Post Widget For Blogger Blog Style V.4

HaiSob apa kabar 😃 ? Ok sobat Bloggers, pada kesempatan ini saya akan membagikan widget popular post versi ke empat. Widget ini sudah disediakan oleh Blogger tinggal kamu saja yang menentukan ingin memasangnya, memodifikasi atau tidak memasang sama sekali.

Widget ini adalah widget yang menampilkan sekumpulan postingan yang sering dikunjungi,dilihat atau dibaca oleh pengunjung menurut perhitungan Google Analytic berdasarkan hari, minggu, bulan, tahun atau setiap saat . Jika saja kamu sudah bosan dengan tampilan widget popular post di blogmu saat ini, kamu dapat mencoba widget ini.

Widget Popular Post V.4


widget popular post versi empat
Widget Popular Post V.4

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



Memasang popular post widget V.4 di Blogger


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

Add Widget Popular Post v.4
Add Widget Popular Post v.4

3. Contoh settingannya seperti di bawah ini.

Setting widget popular post v.4
Setting widget popular post v.4

4. Letakan kode CSS ini di atas ]]></b:skin> atau diatas </style>.
.sidebar .PopularPosts ul { padding:0; }
.sidebar .PopularPosts ul li:first-child { width:100%; max-height:100%; opacity:0.9; }
.sidebar .PopularPosts ul li:nth-child(even) { margin-right:2%; }
.sidebar .PopularPosts ul li { box-sizing:border-box; position:relative; padding:0 !important; width:49%; max-height:120px; opacity:0.4; overflow:hidden; float:left; margin-bottom:2%; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -ms-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
.sidebar .PopularPosts ul li:hover { opacity:1; }
.sidebar .PopularPosts .item-thumbnail { margin:0; width:100%; }
.sidebar .PopularPosts ul li img { box-sizing:border-box; width:100%; height:100%; object-fit:cover; padding:0; }
.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a { visibility:visible; opacity:1; }
.sidebar .PopularPosts .item-title a { color:#fff; background:rgba(0,0,0,0) linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.93) 100%,rgba(0,0,0,0.85) 100%); text-decoration:none; position:absolute; text-align:center; font:13px &#39; Oswald&#39; ,sans-serif; left:0; right:0; bottom:0%; padding:100px 10px 10px; opacity:0; visibility:hidden; }
.sidebar .PopularPosts .item-snippet { display:none; }
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 ini.

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