Tempat belajar blogspot

Cara Mengganti Tampilan Scrollbar dengan Scrollbar CSS Generator


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
webkit-scroll-gen.sourceforge.net

darrylhuffman.com/sites/Scrollbar-gen/
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 webkit-scroll-gen.sourceforge.net

Output hasil kode CSS generator darrylhuffman.com/sites/Scrollbar-gen/
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 ?

Bagian Part Scrollbar
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

12 comments:

  1. sip gan kemarin saat belajar web design sudah pernah nyoba

    ReplyDelete
    Replies
    1. Ok sip gan.. Asyik emank kalo bisa otak - atik template sendiri..

      Delete
  2. Belajar CSS tidak bisa secepat kilat. Harus belajar lebih dari biasanya

    ReplyDelete
    Replies
    1. Betul gan pelan - pelan tapi pasti, asal ada kemauan mencoba menulis secara manual lama - lama pasti akan lebih mudah menguasai kode - kode CSS gan..

      Delete
  3. Kalau berubah template, apakah berpengaruh dengan SE?

    ReplyDelete
    Replies
    1. Kalau untuk perubahan tampilan scrollbar ini tidak sampai mempengaruhi rank pada search engine koq mbak..

      Delete
  4. singkat tapi sangat jelas bagi pemula seperti ane, ijin bookmark gan mau belajar css di blog agan

    ReplyDelete
    Replies
    1. Siap gan makasih dah berkunjung dan membaca artikel saya gan..

      Delete
  5. terima kasih atas pembelajarannya bg

    ReplyDelete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...

Popular Posts