Cara Membuat Popular Post Di Blog Dengan Thumbnail

Hello Sobat Blogger , Kali Ini Saya Hekthatman.com Akan Memberikan Tutorial Untuk Anda Yaitu Cara Membuat Sebuah Popular Post Dengan Design Thumbnail Dan Pastinya Keren Untuk Di Pakek Di Blog Anda, Design Popular Post Ini Simple, Keren Dan Mantap Jiwalah Untuk Blog Anda, Mungkin Udah Tahu Sih Tampilannya Karna Ada Gambarnya Di Atas 😄😃😂,Berikut Cara Memasangnya Di Blogger Anda.

Cara Memasang Popular Post Dengan Thumbnail

Blogger ==> Template ==> Edit Templates
Lalu Kamu Cari Kode CSS Nya Yaitu Kode  ]]></b:skin> Atau </style>
Kemudian Kamu Copy Kode Yang Di Bawah Ini
Dan Kamu Pasang Tepat Di Atas ]]></b:skin> Atau </style>

/* CSS Popular Post Thumbnail */
#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)}

Simpan Templates

Contoh

Cara Membuat Popular Post Di Blog Dengan Thumbnail

Kemudian Kamu Pasang Popular Post Kamu Di Tata-letak

Cara Membuat Popular Post Di Blog Dengan Thumbnail

Dan Kamu Simpan

Oke Itu Saja Dari Saya Semoga Bermanfaat Sekian Dan Terima Kasih.

1 komentar:

Komentar ini telah dihapus oleh pengarang.


EmoticonEmoticon