Membuat Popular Post Dengan Nomer

Membuat Popular Post Dengan Nomer Urut - Pada waktu yang lalu saya sudah posting Membuat Widget Popular Post Ala Evo Magz. Dan pada kesempatan kali ini Saya akan coba posting Membuat Popular Post Dengan Nomer Urut.

Mungkin sobat sering melihat popular post yang keren dengan di lengkapi nomer urut di sampingnya. Selain itu juga menggunakan background gradasi yang menarik untuk background nomernya. Untuk demonya seperti popular post di blog ini. Coba lihat popular post di blog ini di sidebar sebelah kiri, keren kan sob?

Widget popular post ini seperti widget popular post pada template VioMagz buatan mas sugeng. Jika sobat tertarik dengan popular post tersebut, sobat bisa membuatnya dengan mengikuti langkah - angkahnya di bawah ini.

Untuk caranya pun cukup mudah, dengan sedikit kode css, sobat sudah bisa membuat popular post yang keren dan menarik tentunya. Silahkan simak caranya berikut ini.

Silahkan simpam kode CSS berikut ini di atas kode ]]></b:skin> atau </style>

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

Perhatian:

Jika tampilan nya masih berantakan, mungkin ada css yang bentrok dengan css sebelumnya. Coba hapus css popular post yang lama.

Bagaimana menurut sobat, cukup mudah bukan? Selamat mencoba.