Cara Membuat Popular Posts Gradient

Pada kesempatan kali ini, saya ingin berbagi cara membuat popular posts gradient.
Contoh CSS yang saya gunakan gradient dari abu2.
Sobat blogger bisa menggantinya dengan warna yang lain.
Mudah saja caranya.

• Login Blogger
• Theme dan klik edit html
• Cari kode ]]></b:skin>
• Copy & paste css berikut ini.

.PopularPosts .widget-content ul{margin-top:-5px; margin-bottom:-1px; padding-right:15px; padding-left:3px !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}

Save template dan selesai.