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

Popular Post Blogger Style 1
Popular Post Blogger (Style 1)

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 { margin:0; padding:0; }
.sidebar .PopularPosts ul li { list-style:none !important; padding:0 !important; margin-bottom:10px; }
.sidebar .PopularPosts .item-thumbnail { height:190px; margin:0; overflow:hidden; width:100%; }
.sidebar .PopularPosts .item-title { position:relative; }
.sidebar .PopularPosts img { height:100%; width:100%; object-fit:cover; }
.sidebar .PopularPosts .item-title a { color:#FFFFFF; font:15px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; font-size:20px; padding:10px; position:absolute; right:0; left:0; margin:0 auto; text-align:center; text-decoration:none; top:40px; width:60%; height:26px; overflow:hidden; z-index:2; }
.sidebar .PopularPosts .item-snippet { background:rgba(0,0,0,0.35); border-top:6px solid rgba(0,0,0,0.1); border-bottom:6px solid rgba(0,0,0,0.1); color:#FFFFFF; left:0; right:0; margin:0 auto; padding:65px 10px 10px; position:absolute; font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; text-align:center; top:35px; width:60%; z-index:1; }
.sidebar .PopularPosts .item-content { position:relative; }
4. Save template dan selesai.


Bagikan ke

1 Komentar