Cara Mengganti Tampilan Scrollbar dengan Scrollbar CSS Generator

Scrollbar pada tampilan browser sebetulnya dapat diganti tampilannya menggunakan CSS, pada artikel ini saya membagikan tips untuk merubah tampilan scrollbar menggunakan Scrollbar CSS Generator dan merubah tampilan scrollbar dengan mengetik kode CSS secara manual. Masing - masing cara sebetulnya mempunya hasil yang sama juga, hanya saja untuk cara penulisan manual kita wajib memahami dasar - dasar penulisan CSS terlebih dahulu dan jenis property beserta value yang akan digunakan. Langsung saja dimulai dari cara merubah tampilan scrollbar menggunakan Scrollbar CSS Generator.

Mengganti dengan Scrollbar CSS Generator

Mengganti tampilan scrollbar bisa dengan mudah menggunakan Scrollbar CSS Generator melalui situs online. Ada beberapa situs yang menurut saya pribadi memiliki tampilan user interface yang ramah, berikut link situsnya.

1. http://webkit-scroll-gen.sourceforge.net/
2. https://darrylhuffman.com/sites/Scrollbar-gen/

Situs - situs ini berfungsi sebagai alat bantu membuat kode CSS yang bisa digunakan untuk mengganti tampilan scrollbar dengan sangat mudah tanpa mengetik kode CSS satu - satu.

Berikut screnshot tampilan halaman dari situs online Scrollbar CSS Generator.

webkit-scroll-gen.sourceforge.net

darrylhuffman.com/sites/Scrollbar-gen/

Bisa dilihat dari gambar di atas terlihat beberapa parameter yang digunakan untuk mengganti tampilan scrollbar, mulai dari perubahan warna background scrollbar, perubahan warna hover (saat terkena pointer mouse), perubahan warna actived (saat di klik menggunakan mouse), dan ukuran lebar serta lengkungan bentuk scrollbar. Setelah kita mencoba mengubah beberapa parameter di atas maka secara otomatis kode CSS pun juga menyesuaikan, hasil output kode CSS akan langsung muncul dan siap di copy. Perhatikan gambar di bawah ini.

Output hasil kode CSS generator webkit-scroll-gen.sourceforge.net

Output hasil kode CSS generator darrylhuffman.com/sites/Scrollbar-gen/

Copy kode hasil CSS generator tersebut kemudian paste di atas kode  ]]></b:skin> pada halaman Edit HTML apabila menggunakan Blogger, kemdian pilih save template dan lihat hasil bentuk scrollbar melalui browser desktop.

Bagian - bagian Pseudo Elements pada scrollbar

Pada bagian ini kita bisa mengetahui lebih lengkap bagian - bagian pseudo elements pada bagain scrollbar, gunanya untuk apa kita mengetahuinya? Berguna bagi kita yang ingin menambahkan CSS tersendiri yang mungkin beberapa Scrollbar CSS Generator tidak bisa memberikan CSS tersebut secara otomatis. Perhatikan gambar dibawah ini untuk lebih jelasnya.
Baca juga : Apa itu CSS dan Sejarah Versi CSS ?

sumber gambar : https://css-tricks.com/custom-scrollbars-in-webkit/

Daftar Pseudo Elements sesuai angka pada gambar di atas :

1. ::-webkit-scrollbar
2. ::-webkit-scrollbar-button
3. ::-webkit-scrollbar-track
4. ::-webkit-scrollbar-track-piece
5. ::-webkit-scrollbar-thumb
6. ::-webkit-scrollbar-corner
7. ::-webkit-resizer

Baca juga : Prinsip Dasar Cara Memahami Penulisan CSS Syntax dan Selector

Sampai disini dulu artikel tentang Cara Mengubah Tampilan Scrollbar Menggunakan Scrollbar CSS Generator", semoga artikel ini dapat menambah inspirasi bagi kita ingin mengubah tampilan template halaman blogspot atau website kita.
Terima kasih

Artikel ini ditulis oleh :
Perbloggeran