Cara Merubah Warna Scrollbar Pada Blog atau Website

Hi Web Developer! kembali lagi bersama dengan guru design, seperti biasanya di mohon untuk para suha dan mastah untuk memantau dan mengoreksi kalau-kalau ada yang salah tapi saya rasa tidak.

Baiklah pada kesempatan kali ini saya akan membawakan materi atau tutorial yang harus kamu ikutin pastinya, materi atau tutorial yang akan saya bahas kali ini adalah bagaiman cara merubah warna scrollbar pada blog atau website?, mungkin kalian pernah mendengar atau bahkan pernah mencobanya, tapi saya yakin cara yang kamu coba itu mungkin hanya berjalan pada google chrome saja tidak pada mozilla firefox. Ikuti terus tutorialnya dan saya akan membuat tutorial ini bekerja di google chrome dan mozilla firefox, baiklah lanjut ketutorial.

Pertama

Pertama tambahkan kode berikut ini tepat diatas kode </style> atau ]]></b:skin> :

/* for mozilla firefox*/  
html{
  scrollbar-width:thin;
  scrollbar-color:#039be5 #393939;
}

/* for google chrome */
::-webkit-scrollbar{
  width:14px;
  }
  ::-webkit-scrollbar-track{
    background:#393939;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  }
::-webkit-scrollbar-thumb{
  background:#039be5;
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}

For mozilla firefox

• scrollbar-width: auto;
• scrollbar-width: thin; 
• scrollbar-width: none;

Terakhir

Save template kamu dan liha hasilnya

Result

Keterangan

Properti	Value	Keterangan
scrollbar-width	auto, thin, none	Auto: Lebar bilah gulir default untuk platform,  Thin: Lebar scrollbar tipis pada platform yang menyediakan opsi itu, atau scrollbar lebih tipis dari lebar scrollbar platform default, None: Tidak ada scrollbar yang ditampilkan, namun elemen tersebut masih dapat digulir.
scrollbar-color	warna1 warna2	Warna1: Merubah warna scrollbar thumb (ibu jari/yang di klik saat akan di scroll), Warna2: Merubah warna scrollbar track (background). Contoh scrollbar-color:#039be5 #393939;

Sekian tutorialnya semoga bermanfaat trimakasih.