Cara Mengganti Tampilan Scroll Bar di Blog

Selamat siang pembaca. Pada kesempatan kali ini saya ingin berbagi sedikit tutorial blog yang mudah-mudahan dapat bermanfaat. Yang saya akan bahas kali ini yaitu mengenai cara mengganti tampilan scroll bar di blog. Tentu dengan cara ini, tampilan antarmuka blog kamu akan semakin cantik.

Kamu bisa melihat demonya pada gambar diatas atau kamu juga dapat langsung melihatnya pada blog ini. Oke, langsung saja berikut tutorialnya.

IKUTI LANGKAH-LANGKAH BERIKUT

• Login ke akun blogger kamu.
• Pilih menu dropdown, kemudian pilih menu Template.
• Pilih Edit HTML.
• Klik pada bagian dalam kotak Edit HTML, kemudian tekan Ctrl + F pada keyboard. Setelah itu cari kode ]]><b:skin>.
• Selanjutnya copy/pastekan kode dibawah ini diatas kode ]]><b:skin>.

::-webkit-scrollbar {height: 10px;width: 10px;background: #ccc;}::-webkit-scrollbar-thumb {background-color: #21222d;border-top: 20px solid #444444;border-bottom: 20px solid #444444;-moz-border-radius: 10px;border-radius: 0px;}

• Kemudian klik Simpan. Selesai.

CATATAN :

Kamu dapat melakukan beberapa perubahan pada kode tersebut sesuai kehendak kamu. Seperti :

• height: 10px : Merupakan kode untuk tinggi scroll bar.
• width: 10px : Merupakan kode untuk lebar scroll bar.
• backgorund-color: #0066b3 : Merupakan kode untuk warna background scrollbar.
• border-top: 20px solid #000000 : Merupakan kode untuk ketebalan serta jenis warna border atas scroll bar.
• border-bottom: 20px solid #000000 : Merupakan kode untuk ketebalan serta jenis warna border bawah scoll bar.
• border-radius: 0px : Merupakan kode untuk merubah bentuk lengkungan scroll bar. Jika tertulis "0px" berarti tidak terdapat lengkungan dari scroll bar tersebut alias scroll bar berbentuk kotak. Akan tetapi jika kamu mengubahnya menjadi "5px" (misalkan), scroll bar tersebut dapat berbentuk rounded.

Sekian postingan kali ini. Semoga dapat bermanfaat dan dapat diterapkan dengan mudah.