Membuat Popular Post Dengan Nomer

Baca Juga

Membuat Popular Post Dengan Nomer Urut - Pada waktu yang kemudian aku 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 teman sering melihat popular post yang keren dengan di lengkapi nomer urut di sampingnya. Selain itu juga memakai background gradasi yang menarik untuk background nomernya. Untuk demonya ibarat popular post di blog ini. Coba lihat popular post di blog ini di sidebar sebelah kiri, keren kan sob?

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

Untuk caranya pun cukup mudah, dengan sedikit isyarat css, teman sudah dapat menciptakan popular post yang keren dan menarik tentunya. Silahkan simak caranya berikut ini.

Silahkan simpam isyarat CSS berikut ini di atas isyarat ]]></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 berdasarkan sobat, cukup gampang bukan? Selamat mencoba.