Cara Membuat Popular Post Dengan Satu Thumbnail di bagian Atas

adscblog

Cara membuat Popular Post hanya dengan satu Thumbnail saja bagian pertama di blog - Popular Post yaitu suatu sidebar atu widget yang dimana widget tersebut menampilkan Postingan yang sering di lihat oleh para pengujung Pasti di setiap blog widget Popular Post ini selalu ada terpasang dengan tujuan untuk memberitahukan kepada pengujung lain nya bahwa Postingan mana saja kah yang sering di lihat atau di baca oleh pengujung lain nya

Banyak sekali macam atau model popular post tersebut mulai dari Default dari blogger bahkan tidak sedikit merubah atau menampilkan Popular Post dengan tampilan yang sangat menarik sekali,hal itu bertujuan selain untuk mempercantik Blog juga untuk membuat Blog tersebut semakin terlihat

Professional Nah kali ini saya akan memberikan trik bagaimana cara membuat Popular Post menjadi cantik yaitu bagian Pertama akan terlihat Gambar nya atau Thumbnail nya namun dari yang kedua sampai akhir hanya terlihat link atau Judul postingan nya saja

Cara Membuat Popular Post hanya satu Thumbnail di blog

Untuk pemasangan nya anda hanya perlu mengikuti langkah-langkah di bawah ini

• Silahkan Masuk ke akun blogger sobat
• Lalu kemudian pilih blog sobat dan klik Tema > edit Html
• Setelah itu silahkan anda letakan kode Css berikut

#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)}

• Setelah itu silahkan anda cari kode  </body> dan letakan kode di bawah ini sebelum kode tersebut

<script type='text/javascript'>
//<![CDATA[
// Popular Post sidobey.com
var 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>

• Setelah itu lihat Save dan lihat hasil nya

Nah itulah cara membuat Popular Post di blogger dengan satu thumbnail yang tampil,selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 04 Mei and have 0 komentar