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 kelima setelah sebelumnya telah membagikan popular post yang keempat.

Popular Post For Blogger (Style 5)
Popular Post For Blogger (Style 5)

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 { 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; }
4. Save template dan selesai.


Bagikan ke

0 Komentar