Cara Memodifikasi Tampilan ScrollBar Di Blog Dengan Css

Sekarang saya akan mengshare tutorial tentang cara memodifikasi scroll bar blog dengan sentuhan css. Tampilan scroll bar kalian bisa diubah sesuai keinginan kita dengan css. 

Namun, untuk saat ini css ini belum didukung oleh browser Mozila Firefox, dan hanya didukung oleh Google Chrome milik Google. Padahal pengguna browser seperti Mozila Firefox masih banyak di dunia.

Seperti scroll bar di blog saya ini, jika kalian membuka dengan browser selain Google Chrome, maka akan terlihat biasa biasa saja. Tapi tidak ada salahnya jika kalian menggunakan css scrollbar ini untuk mempercantik tampilannya scroll bar blog kalian, walupun hanya bisa terlihat berbeda pada browser chrome saja. Langsung saja,berikut ini adalah caranya :

• Pertama, masuk dulu ke dasboard blog kalian
• Masuk ke Template, pilih Edit HTML
• Masukkan kode di bawah ini tepat di bawah kode <b:skin><![CDATA[

::-webkit-scrollbar { width: 10px; background: #cc3000;}
::-webkit-scrollbar-thumb { background: #000000; border: 1px #00ff00; }

•  Terakhir tinggal disimpan

Keterangan :

Ganti kode yang berwarna MERAH dengan kode lebar scroll bar yang kalian inginkan

Ganti kode yang berwarna ORANGE dengan kode warna scroll bar yang kalian inginkan

Ganti kode yang berwarna KUNING dengan kode warna batang scroll bar yang kalian inginkan

Ganti kode yang berwarna AQUA dengan kode ketebalan border scroll bar yang kalian inginkan

Ganti kode yang berwarna BIRU dengan kode warna border  scroll bar yang kalian inginkan

Nah itu dia caranya. Kalian bisa memodifikasinya sesuka kalian. Sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan kalian tanyakan di komentar.

Share :

Facebook Google+ Twitter