Membuat Popular Post Dengan Nomer dan Warna Gradasi - Selamat malam teman blogger. Pada malam ini Saya akan coba menciptakan artikel dengan judul Membuat Popular Post Dengan Nomer Dan Warna Gradasi.
Mungkin teman sering melihat popular post yang keren dengan di lengkapi nomer urut di sampingnya. Selain itu juga dengan backround nomernya memakai bacground gradasi yang menarik.
Widget popular post ini menyerupai popular post pada template VioMagz biatan mas sugeng. Jika teman tertarik dengan popular post tersebut, teman dapat membuatnya dengan mengikuti caranya di bawah ini.
Untuk caranya pun cukup mudah, dengan sedikit isyarat css, teman sudah dapat menciptakan popular post yang keren dan menarik. Silahkan simak caranya berikut ini.
Silahkan simpan CSS berikut di template sobat.
Mungkin teman sering melihat popular post yang keren dengan di lengkapi nomer urut di sampingnya. Selain itu juga dengan backround nomernya memakai bacground gradasi yang menarik.
Widget popular post ini menyerupai popular post pada template VioMagz biatan mas sugeng. Jika teman tertarik dengan popular post tersebut, teman dapat membuatnya dengan mengikuti caranya di bawah ini.
Untuk caranya pun cukup mudah, dengan sedikit isyarat css, teman sudah dapat menciptakan popular post yang keren dan menarik. Silahkan simak caranya berikut ini.
Silahkan simpan CSS berikut di template sobat.
.PopularPosts .widget-content ul{width:100%;padding:0;counter-reset: popcount;
}
.PopularPosts .widget-content ul li{margin:0 0 5px;padding:0px;position:relative;overflow:hidden;border:1px solid #e3e3e3;border-radius: 3px}.PopularPosts .widget-content ul li .item-title{line-height:1.4em;padding:0px 10px 0 0;
}
.PopularPosts .widget-content ul li .item-title a{text-decoration:none;font-size:95%;color:#555;
}See Other Article
.PopularPosts .widget-content ul li a:hover,.PopularPosts .widget-content ul li:hover a{background:#00626B;background:-moz-linear-gradient(left,#00626b 0,#00acc1 50%,#00f7ca 100%);background:-webkit-linear-gradient(left,#00626b 0,#00acc1 50%,#00f7ca 100%);background:linear-gradient(to right,#00626b 0,#00acc1 50%,#00f7ca 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 )
}
.PopularPosts .widget-content ul li img{width:80px;height:70px;padding-right:0}.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:80px;height:70px;overflow:hidden;border-radius: 0 3px 3px 0;
}
.PopularPosts .item-snippet{display:none
}
.PopularPosts ul li .item-thumbnail-only:before,.PopularPosts ul li .item-content:before{counter-increment:popcount;content:counter(popcount);font-size:30px;font-weight:500;display:block;position:absolute;top:0;left:0;bottom:0;background:linear-gradient(#00626b 0,#00acc1 50%,#00f7ca);color:#fff;width:30px;padding-top:20px;text-align:center;border-radius:3px 0 0 3px;
}
.PopularPosts .item-title,.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {margin-left: 30px;}.footer-wrapper{margin:40px -10px 0 327px;padding:3px 0 0;font-size:18px;font-weight:400;line-height:1.6em;text-align:left
}
Setelah itu klik simpan template dan lihat hasilnya.
Bagaimana berdasarkan sobat, cukup gampang bukan? Selamat mencoba.
}
.PopularPosts .widget-content ul li img{width:80px;height:70px;padding-right:0}.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:80px;height:70px;overflow:hidden;border-radius: 0 3px 3px 0;
}
.PopularPosts .item-snippet{display:none
}
.PopularPosts ul li .item-thumbnail-only:before,.PopularPosts ul li .item-content:before{counter-increment:popcount;content:counter(popcount);font-size:30px;font-weight:500;display:block;position:absolute;top:0;left:0;bottom:0;background:linear-gradient(#00626b 0,#00acc1 50%,#00f7ca);color:#fff;width:30px;padding-top:20px;text-align:center;border-radius:3px 0 0 3px;
}
.PopularPosts .item-title,.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {margin-left: 30px;}.footer-wrapper{margin:40px -10px 0 327px;padding:3px 0 0;font-size:18px;font-weight:400;line-height:1.6em;text-align:left
}
Setelah itu klik simpan template dan lihat hasilnya.
Note:
Jika tampilan nya berantakan, mungkin ada css yang bentrok dengan css sebelumya. coba hapus css popular post yang lama.Bagaimana berdasarkan sobat, cukup gampang bukan? Selamat mencoba.
Share this Article
