InfoBlogNews - Kali
ini Saya akan berbagi sedikit tips untuk mengganti tampilan widget popular post
biasa menjadi lebih menarik, tentunya juga ringan di loading blognya. Lihat gambar
dibawah ini tampilan widgetnya
Langsung saja ke Cara Membuat Widget Popular Post
Sederhana di Blog:
1. Buka Blogger >>
Template >> Edit HTML >> Tambahkan kode di bawah ini tepat sebelum
]]></b:skin>
atau </style>
CSS - Info Blog News
display:block;
height:190px;
margin:0;
overflow:hidden;
position:relative;
width:100%;
}
.PopularPosts .item-title {position:relative;}
.PopularPosts img {display:block;
height:auto;
position:absolute;
width:100%;
}
.item-title a {
background:none;
color:transparent;
font-family:Oswald;
font-size:17px;
font-weight:400;
padding:10px 0;
padding-right:300px;
position:absolute;
right:0;
text-align:center;
top:0;
width:100%;
transition:all 0.2s ease-out;
}
.item-title a:hover {
background:#f97e76;
color:#fff;
padding-right:0;
}
.item-snippet {
background:none;
color:rgba(0,0,0,0.3);
font-weight:normal;
left:12%;
padding:10px;
position:absolute;
text-align:center;
top:95px;
width:70%;
transition:all 0.2s ease-out;
}
.item-snippet:hover {
background:#4f5a66;
color:#FFFFFF;
}
.item-content {
position:relative;
}
2. Selanjutnya tambahkan kode di bawah ini sebelum </body>
jQuery - Info Blog News
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts
img').attr('src', function(i, src) {return src.replace(
's72-c', 's400' );});});
//<![CDATA[
// Popular
Posts
$('.popular-posts ul li .item-snippet').each(function(){
var
txt=$(this).text().substr(0,120);
var
j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>
3.
Simpan template…dan lihat hasilnya ! Widget sederhana namun cantik dan ringan
loading Blognya.
Semoga bermanfaat…