Berikut ini adalah salah satu dari style-style widget popular post yang dibagikan. Memasang widget Popular Post yang menarik tentu akan menarik perhatian pengunjung untuk mengklik dan membaca artikel lain di blog kita, nah langsung saja berikut adalah style popular post yang kedua setelah sebelumnya telah membagikan popular post yang pertama.

Popular Post For Blogger (Style 2)
Popular Post For Blogger (Style 2)

1. Pasang widget popular post di blog kamu caranya masuk pada blog Blogger kamu, pilih "Tata Letak" selanjutnya pilih tempat dimana kamu akan menambahkan widget ini "Tambahkan Gadget" selanjutnya pilih "Entri Populer" dan setting seperti ini:

Konfigurasi popular post

2. 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>
3. Masukan css ini kedalam template, misalnya 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; }
4. Save template dan selesai.


Bagikan ke

1 Komentar

keren mas. apakah itu juga akan muncul beberapa artikel di bawahnya namun dengan desain lebih kecil mas?