Cara Memodifikasi Scrollbar

Cara Memodifikasi Scrollbar
Pada artikel ini Saya akan kasi tutorial untuk mengganti atau dengan kata lain memodifikasi tampilan scrollbar di blog temen-temen menjadi scrollbar yang mirip dengan yang ada di Blog Mister Tauruz ini. Kalo masih ada yang gak tau scrollbar oke Saya jelasin. Scrollbar itu adalah sebuah (tools apa fasilitas ya?) yang ada disamping kanan tampilan web yang bisa digeser keatas atau ke bawah itu lho.

Semoga aja temen-temen uda ngerti :D
Langsung aja ya Saya kasi tutorialnya

  • Silahkan temen-temen login dulu ke akun blogger temen-temen
  • Jangan lupa BackUp dulu templatenya (penting lhoo...)
  • Masuk ke Template dan Edit HTML
  • Pencet tombol CTRL + F dan cari kode ]]></b:skin>
  • Selanjutnya copas kode berikut ini diatas atau sebelum kode ]]></b:skin>

    • 
/* Webkit Scrollbar */ 
::-webkit-scrollbar {
     width: 15px; 
} 
::-webkit-scrollbar-track {
     background: #FFFFFF;     
     -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
     border: 1px solid #D8D8D8; 
} 
::-webkit-scrollbar-thumb {
     background: #646464;
     -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4); 
} 
::-webkit-scrollbar-thumb:hover {
     background: #6E6E6E; 
} 
::-webkit-scrollbar-thumb:active {
     background: #585858;
     -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3); 
}
  • Simpan
Hasil dari CSS diatas akan tampak seperti ini (klik gambar untuk memperjelas):

Cara Memodifikasi Scrollbar

Catetan :

Silahkan temen-temen mempercantik sendiri atau memodifikasi sendiri tampilan warnanya. Ini Saya kasi kode yang bisa temen-temen ganti sesuka hati temen-temen.
  • width: 15px : Ukuran lebar scrollbar temen-temen
  • background: # FFFFF : Warna background scrollbarnya (yang paling belakang).
  • background: # 646464 : Warna scrollbarnya yang bisa digeser keatas/bawah.
  • background: # 6E6E6E : Warna hover dari scrollbarnya.
  • background: # 585858 : Warna aktif dari scrollbarnya yang bisa digeser ke atas/bawah.
Semoga tutorial ini bermanfaat buat temen-temen Mister Tauruz. Jangan lupa Saya ingatkan untuk kesekian kalinya untuk bertanya kalau ada yang kurang dipahami lewat kolom komentar di bawah artikel Cara Memodifikasi Scrollbar ini.
Terima Kasih

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Disqus Comments