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

Popular Post For Blogger (Style 4)
Popular Post For Blogger (Style 4)


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


Bagikan ke

2 Komentar

Bang widget blog ini keren x cara membuat box style titel kata nya giman
mohon pencerahan saya masih baru belajar membut blog

maksud saya gaya title box nya yg ada tulisanya