Blog Kalian Akan Terlihat Keren Kalau Memasang Widget Popular Post Yang Satu Ini

Banyak banyak sekali macam bentuk style pada widget popular post untuk masing - masing template yang mungkin pernah kalian kunjungi. Setiap template niscaya 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 memakai model style ibarat blog saya ini.

Dan pada artikel kali ini saya ingin membuatkan tutorial cara memasang widget popular post yang berdasarkan saya terbilang keren. Meskipun saya sendiri belum mencoba nya tapi di beberapa blog yang ssya kelola niscaya akan saya pasang di blog tersebut.

Untuk memastikan ibarat apa model nya, kalian dapat lihat pola demo nya di bawah ini. Atau pada pola gambar di atas.

• Demo

Bila teman ingin mencoba nya, teman dapat ikuti langkah - langkah yang akan saya berikan di bawah ini.

Cara Membuat Widget Popular Post Keren di Blog

1. Pertama yang harus kalian lakukan yakni menghapus widget popular post yang sebelum nya ada pada template kalian. Biar nanti nya tidak terjadi bentrok.
2. Setelah itu, silahkan copy isyarat di bawah ini kemudian letakan isyarat tersebut di atas isyarat </style> pada template sobat.

 /* 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} 

3. Selanjut nya silahkan teman copy lagi isyarat di bawah ini. Lalu letakan isyarat tersebut di atas isyarat </body> pada template sobat.

 <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> 

4. Simpan template. Lalu setting widget popular post ibarat pola gambar di bawah ini.

Untuk warna tampilan jikalau tidak sesuai dengan pola gambar di atas, kalian dapat menggedit nya pada isyarat CSS di atas.

Mungkin itu saja yang dapat saya bagikan pada kesempatan kali ini. Semoga artikel ini dapat bermanfaat buat teman yang sedang mencari Cara memasang widget Popular Post yang keren di blog. Selamat mencoba!