Cara Mengubah Tampilan Sscrollbar 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>
4. Copy dan pastekan kode di bawah ini tepat di atas kode  ]]></b:skin>  

::-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;}

Ket :

Ganti angka 13 adalah  ukuran scroll yang Anda inginkan.
Ganti tulisan #CCCCCC dengan warna background scrollbar kesukaan Anda.
Ganti tulisan #252525 dengan warna scroll yang Anda inginkan.

5. Selesai, lihat blog Anda !!

Share This

• 
• 
• 
• 
• 
• 
• 
•