Cara Mengubah Tampilan Scrollbar Jadi Keren

 Cara Mengubah Tampilan Scrollbar Jadi Keren

Pada postingan kali ini, Tugasku4u akan berbagi tutorial bagaimana cara mengubah tampilan scrollbar pada blog. Seperti kita tahu, scrollbar adalah alat penggeser yang digunakan untuk melihat bagian bawah suatu blog atau website. Scrollbar ini akan muncul bila blog/website Anda melebihi kapasitas layar monitor sobat.

Secara standart tampilan scrollbar seperti gambar diatas, namun dengan menambahkan CSS pada template, kita bisa mendapatkan tampilan yang berbeda, namun CSS ini setahu saya hanya bekerja pada browser Google Chrome. Apabila sobat semua menggunakan browser Mozilla Firefox, maka tidak bisa melihat perubahan ketika sobat menambah CSS scrollbar pada template sobat.

Nah, berikut ini adalah panduan singkat bagaimana cara mengubah tampilan scrollbar untuk blog sobat:

1. Login ke akun blog Anda

2. Pilih menu Template => Edit HTML
3. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)

4. Copy dan pastekan kode di bawah ini tepat di atas kode tadi !!

::-webkit-scrollbar {width: 13px; background: #CCCCCC; -moz-border-radius: 10px; border-radius: 10px;}

::-webkit-scrollbar-thumb {background-color: #252525; -moz-border-radius: 10px; border-radius: 10px;}

Keterangan:

Ganti tulisan berwarna biru dengan ukuran scroll yang Anda inginkan.

Ganti tulisan berwarna merah dengan warna background scrollbar kesukaan Anda.

Ganti tulisan berwarna orange dengan warna scroll yang Anda inginkan.
Untuk memilih warna lain, silahkan lihat disini : Daftar kode warna HTML

5. Selesai, lihat blog Anda !!

Nah, bagaimana Sobat mudah kan??? Demikianlah tutorial blog yang bisa Saya bagikan. Jika ada pertanyaan atau apapun itu, Silahkan anda berkomentar di kotak komentar di bawah. semoga bermanfaat...