Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog

Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog - Siang hari ini, saya akan post tutorial blogger lagi. Ini post ditaman tengah-tengah sekolah. Saya masih nyempetin post untuk sobat semua. Kali ini saya akan bahas tutorial mengenai Cara Membuat Popular Post Efek Gradient Di Blog.

Banyak sekali para blogger menghias widget mereka demi kenyamanan mata untuk dilihat oleh visitor alias pengunjung. Salah satu nya dengan cara yang satu ini. Sedikit memang para blogger yang melakukan tutorial yang satu ini, yaitu cara membuat popular post dengan efek gradien di blog. Tapi, sobat tak perlu khawatir. Jika blog sobat tidak yang menyamai alias beda, bisa dinilai bahwa sobat sangat kreatif dalam membangun dan memperindah sebuah blog. (Baca juga: Cara Membuat Widget Popular Post Dengan Gambar Round Corner - Cara Membuat Post Popular Warna Warni)

Widget popular post ini dibentuk dengan efek gradien. Buat sobat yang tidak mengerti efek gradient, saya akan jelaskan. Gradient menurut kamus besar bahasa Indonesia berarti tinggi, curam, tanjakan, atau lereng. Tapi, bukan berarti efek gradient disini menunjukkan bahwa widget nya mempunyai efek curam atau tanjakan. Yang dimaksudkan efek gradient disini yaitu warna background dari widget popular post itu sendiri berwarna gradient.

Warna gradient adalah warna yang awalnya gelap hingga menjadi terang begitu juga sebaliknya. Dan warna efek gradient di widget popular post disini menggunakan warna hitam menjadi putih. Sobat bisa mengganti sendiri warna nya sesuai dengan keinginan.

Untuk contoh widget popular post dengan efek gradient di blog, bisa lihat gambar dibawah ini:

1. Login Blogger
2. Tata letak/layout
3. Add gadget/tambahkan gadget
4. Entri popular

5. Disarankan untuk tidak menyentang Tumbhnail gambar dan cuplikan. Kalau dicentang sih, ya terserah. :v

Masih ada langkah berikutnya.
6. Template
7. Edit HTML
8. Cari kode

 ]]></b:skin> 

(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)
9. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat 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}

10. Simpan Template


*Keterangan:
Sobat bisa mengganti angka 01 sampai 10.
Sobat bisa mengganti warna gradient. Untuk mengetahui kode warna nya, klik Kode Warna HTML.

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Widget Popular Post Dengan Efek Gradient Di Blog
Deskripsi	Cara membuat widget popular post dengan efek gradient di blog yang membuat widget popular post Anda berbeda dengan widget popular post yang lain.
Author	Google
Author Rating	83%/ 100% Suara Dari 182 votes