Cara Membuat Popular Post Dengan Nomor

Popular Post | Pada kesempatan kali ini saya akan membagikan cara untuk membuat popular post dengan nomor. Popular Post yang saya bagikan ini terlihat sangat keren dan sudah saya coba di blog ini.

Popular Post ini masih memerlukan popular post bawaan blogger dan kita modif/edit menjadi sedemikian rupa sehingga menjadi seperti di samping dan sobat dapat mengubah sendiri menurut kreasi sobat.

Berikut cara pemasangannya





Langkah 1 : Buat bidget baru > entri populer

Langkah 2 : Tambahkan CSS diatas ]]></b:skin>

/* Popular Post by Microsoft Cyber */

.PopularPosts .widget-content ul{margin-top:-5px;margin-bottom:-1px;padding-right:20px !important;list-style-type:none}
.PopularPosts .widget-content ul li{position:relative;padding:10px !important}
.PopularPosts .widget-content ul li:first-child{background:#555;width:100%}
.PopularPosts .widget-content ul li:first-child:after{content:"01";background:#f88c00}
.PopularPosts .widget-content ul li:first-child+li{background:#666;width:100%}
.PopularPosts .widget-content ul li:first-child+li:after{content:'02'}
.PopularPosts .widget-content ul li:first-child+li+li{background:#777;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li:after{content:'03'}
.PopularPosts .widget-content ul li:first-child+li+li+li{background:#888;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li:after{content:'04'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li{background:#999;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li:after{content:'05'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li{background:#aaa;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after{content:'06'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li{background:#bbb;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after{content:'07'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li{background:#c1c1c1;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after{content:'08'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li{background:#ccc;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after{content:'09'}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li{background:#ddd;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{content:'10'}
.PopularPosts .widget-content ul li:first-child:after,.PopularPosts .widget-content ul li:first-child+li:after,.PopularPosts .widget-content ul li:first-child+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{position:absolute;top:1px;right:1px;background:#444;padding:6px 5px;width:20px;line-height:1em;text-align:center;color:#eee;font-size:13px !important}.PopularPosts .widget-content{padding-right:10px;}
#sidebar2 .widget-content {margin-top:7px;color:#fff}
#sidebar2 ul{font-size:100% !important;list-style:none; margin:0; padding:0 10px 10px;}
#sidebar2 li{font-size:100% !important;margin:0; padding:0 0 .25em 0; line-height:18px;color:#aaa;font-weight:normal}
#sidebar2 ul li{padding-top:10px; padding-bottom:10px}
#sidebar2 ul li:last-child {  border-bottom:none;  }

Langkah 3 : Simpan dan Lihat Blog anda

Semoga Bermanfaat !!