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
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
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
Previous
Posting Lebih BaruNext
Posting Lama
Posted by , Published at Oktober 06, 2019 and have
0
komentar
