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.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 :
- ::-webkit-scrollbar
- ::-webkit-scrollbar-button
- ::-webkit-scrollbar-track
- ::-webkit-scrollbar-track-piece
- ::-webkit-scrollbar-thumb
- ::-webkit-scrollbar-corner
- ::-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
sip gan kemarin saat belajar web design sudah pernah nyoba
ReplyDeleteOk sip gan.. Asyik emank kalo bisa otak - atik template sendiri..
DeleteBelajar CSS tidak bisa secepat kilat. Harus belajar lebih dari biasanya
ReplyDeleteBetul gan pelan - pelan tapi pasti, asal ada kemauan mencoba menulis secara manual lama - lama pasti akan lebih mudah menguasai kode - kode CSS gan..
DeleteKalau berubah template, apakah berpengaruh dengan SE?
ReplyDeleteKalau untuk perubahan tampilan scrollbar ini tidak sampai mempengaruhi rank pada search engine koq mbak..
Deletesingkat tapi sangat jelas bagi pemula seperti ane, ijin bookmark gan mau belajar css di blog agan
ReplyDeleteSiap gan makasih dah berkunjung dan membaca artikel saya gan..
Deletengaruh gak sama blog kalo pake ini??
ReplyDeletePengaruh di tampilan scrollbar gan..
DeleteWah mantep infonya gan
ReplyDeleteterima kasih atas pembelajarannya bg
ReplyDelete