Skip to main content
Website Mini

follow us

Membuat Popular Post Dengan Nomer Dan Background Gradasi

Membuat widget Popular Post keren dan menarik Dengan Nomer Dan Background Gradasi pada blog.

Membuat Popular Post Dengan Nomer dan Warna Gradasi - Selamat malam sobat blogger. Pada malam ini Saya akan coba membuat artikel dengan judul Membuat Popular Post Dengan Nomer Dan Warna Gradasi.

Mungkin sobat sering melihat popular post yang keren dengan di lengkapi nomer urut di sampingnya. Selain itu juga dengan backround nomernya menggunakan bacground gradasi yang menarik.

Widget popular post ini seperti popular post pada template VioMagz biatan mas sugeng. Jika sobat tertarik dengan popular post tersebut, sobat bisa membuatnya dengan mengikuti caranya di bawah ini.

Untuk caranya pun cukup mudah, dengan sedikit kode css, sobat sudah bisa membuat 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;
}
.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.

Note:

Jika tampilan nya berantakan, mungkin ada css yang bentrok dengan css sebelumya. coba hapus css popular post yang lama.

Bagaimana menurut sobat, cukup mudah bukan? Selamat mencoba.

You Might Also Like:

Buka Komentar