Cara Membuat Widget Popular Post Dengan Efek Gradient

Cara Membuat Widget Popular Post Dengan Efek Gradient - Banyak sekali modifikasi widget popular post yang dibuat oleh para Blogger tentunya untuk mempercantik tampilan blog agar lebih keren lagi, hampir seluruh blog menggunakan sebuah widget popular post namun entah apa tujuan dari dipasangnya widget popular post didalam blog tersebut, tapi yang pasti fungsinya untuk memberitahukan kepada visitor bahwa artikel tersebut yang sedang populer dalam blog itu.

Pada kesempatan kali ini blog Ficri Pebriyana akan membagikan sebuah tutorial cara membuat widget popular post dengan efek gradient. Sebenarnya widget popular post ini bukanlah suatu efek gradient, namun bisa saja kita menggunakan berbagai macam warna-warni untuk menghiasi widget popular post tersebut, disebut dengan efek gradient ya karena warnanya menyerupai gradient dari hitam ke putih atau bisa juga dari biru tua sampai ke biru muda dengan kombinasi warna yang menyerupai efek gradient.

Membuat widget popular post dengan efek gradient ini menggunakan sebuah kode css yang dimana kode css ini sudah valid CSS3, jadi Anda semua tidak perlu khawatir akan terjadi error saat validasi css3 pada blog Anda. Langsung saja bagi Anda yang ingin memodifikasi tampilan widget popular post silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Tata Letak => Tambahkan Gadget => Entri Populer
Thumbnail Gambar dan Cuplikan saya sarankan untuk tidak di centang
3. Klik Simpan
4. Lalu klik Template => Edit HTML
5. Cari kode ]]></b:skin>
6. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>

/* Popular Post */
.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;bottom: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}

7. Klik Simpan Template

Catatan :
- Anda bisa mengganti angka 01 sampai 10.
- Anda bisa mengganti warna disini Kode Warna HTML.
- Usahakan sesuaikan tampilan popular post dengan blog Anda.

Sekian artikel mengenai Cara Membuat Widget Popular Post Dengan Efek Gradient. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini