Widget Popular Post dengan Satu Tumbnail. Ok sobat pada kesempatan ini saya akan membagikan widget popular post dengan 1 tumbnail yang besarnya sesuai dengan lebar sidebar blog. Membuat widget popularpost dengan tampilan yang menarik adalah untuk menarik perhatian pengunjung agar membaca artikel lain yang ada di Blog kamu.

Widget popular post

Widget popular post 1 thumbnail
Widget popular post

Sebelumnya juga widget seperti ini sudah pernah di bagikan, baca: widget popular post keren.
Sebelumnya kamu harus sudah memasang widget ini di blog kamu, kemudian setting seperti dibawah ini:

Konfigurasi Enti Populer

Buka edit HTML template Blogger kamu dan letakan kode dibawah ini diatas kode </head> atau kode </body>
<style>
.PopularPosts .widget-content ul{padding:0;margin-top:-10px;width:98%}
.PopularPosts .item-thumbnail{margin:0;border:4px double #ddd;}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;font-weight:400;font-size:14px;}
.PopularPosts .item-title a:hover{color:#FCA13A}
.PopularPosts .item-snippet{font-size:14px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px solid #ddd}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:170px;margin-bottom:10px;font:13px Arial;width:100%}
.PopularPosts img{padding:0;}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}
</style>
<script type='text/javascript'>
//<![CDATA[
var newidth=295;var neweight=170;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>
Simpan template dan lihat hasilnya.
2 Komentar untuk "Widget Popular Post dengan Satu Tumbnail"

Sudah saya coba cuman gambar nya yang keluar kecil gan . .

Coba pindahkan di atas </body dan tambahkan juga Jquery Plugin.