Blog Kalian Akan Terlihat Keren Bila Memasang Widget Popular Post Yang Satu Ini
Banyak berbagai macam bentuk style pada widget popular post untuk masing - masing template yang mungkin pernah kalian kunjungi. Setiap template pasti mempunyai ciri khas tersendiri pada widget popular post tersebut.
Tapi tidak semua widget popular post yang kalian temukan atau yang ada pada template kalian mempunyai nuansa style yang keren. Seperti hal nya widget popular post yang saya miliki ini terbilang pasaran. Karena sudah banyak yang menggunakan model style seperti blog saya ini.
Dan pada artikel kali ini saya ingin berbagi tutorial cara memasang widget popular post yang menurut saya terbilang keren. Meskipun saya sendiri belum mencoba nya tapi di beberapa blog yang ssya kelola pasti akan saya pasang di blog tersebut.
Untuk memastikan seperti apa model nya, kalian bisa lihat contoh demo nya di bawah ini. Atau pada contoh gambar di atas.
Bila sobat ingin mencoba nya, sobat bisa ikuti langkah - langkah yang akan saya berikan di bawah ini.
Cara Membuat Widget Popular Post Keren di Blog
- Pertama yang harus kalian lakukan yaitu menghapus widget popular post yang sebelum nya ada pada template kalian. Biar nanti nya tidak terjadi bentrok.
- Setelah itu, silahkan copy kode di bawah ini lalu letakan kode tersebut di atas kode </style> pada template sobat.
- Selanjut nya silahkan sobat copy lagi kode di bawah ini. Lalu letakan kode tersebut di atas kode </body> pada template sobat.
- Simpan template. Lalu setting widget popular post seperti contoh gambar di bawah ini.
/* CSS Popularposts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0;counter-reset:popcount;background: linear-gradient(to right, #2B0C93 0px, #A54098 56%, #F84272 100%) repeat scroll 0% 0% transparent;z-index:999;transition:all .4s ease-in-out;}
#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;line-height:1.2em;}
#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:0;width:100%;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(45,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(45,62,80,.6);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;text-align:justify;}
#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}
<script type='text/javascript'>
//<![CDATA[
// Popular Post
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>
Untuk warna tampilan bila tidak sesuai dengan contoh gambar di atas, kalian bisa menggedit nya pada kode CSS di atas.
Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. Semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara memasang widget Popular Post yang keren di blog. Selamat mencoba!