Breaking News
Loading...

July 26, 2016

Cara Memasang Widget Popular Post Tampil Lebih Menarik

Cara Memasang Widget Popular Post Tampil Lebih Menarik

Cara Memasang Widget Popular Post Tampil Lebih Menarik - Kali ini Saya akan berbagi sedikit tips untuk mengganti tampilan widget popular post biasa menjadi lebih menarik. Sebetulnya ini adalah trik blogger yang pernah Saya bagikan di blog Saya yang dulu yaitu Aisuka Blog.

Langsung saja ke cara penerapannya :

1. Buka Blogger > Template > Edit HTML > Tambahkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

.PopularPosts .item-thumbnai{
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>

<script type='text/javascript'>
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![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.

Tidak ada demo, tampilan widget bisa dilihat seperti gambar di atas.

Artikel Terkait

Blog ini dibuat atas ketertarikan dan minat kami dengan website dan juga sebagai media sosial berbagi Info Menarik serta Hiburan lainnya.