Cara Membuat Popular Post Dengan Thumbnail

sebenarnya sangat mudah,widget nya sudah tersedia di blogger,kita hanya tinggal memasang nya saja,namun masih dengan style default,untuk membuat popular post lebih menarik,ternyata banyak sebagian blogger yang udah share dengan style mereka sendiri kali ini saya akan share cara membuat popular post lebih menarik,popular post nya bisa memunculkan cuplikan,ketika di hover,untuk cara membuat nya ikuti tutorial dibawah ini

Cara Membuat Popular Post Dengan Thumbnail

1. login ke blogger > template > edit html, letakkan kode dibawah ini diatas kode ]]></b:skin> atau </style>

#PopularPosts1{padding:0;}#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}#PopularPosts1 ul li:last-child{border-bottom:none}#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}#PopularPosts1 ul li img {    width: 318px;    height: auto;}#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}#PopularPosts1 ul li:first-child .item-thumbnail {    margin: 0px;    width: 103%;    height: 180px;    overflow: hidden;    display: block;}#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}#PopularPosts1 ul li:first-child .item-title:before{top:25%}#PopularPosts1 ul li:first-child .item-title:before{color:#fff}#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

2. biar gambar thumnail nya gak kabur,letakkan kode dibawah ini diatas </body>

<script type='text/javascript'>//<![CDATA[// Popular Postvar newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina 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,130)});//]]></script>

3. simpan template.

jika tidak berhasil,coba css popular post lama dihapus,diganti dengan css di atas