Cara Membuat Tampilan Scrollbar Sendiri di Blogger Menggunakan CSS

Cara Membuat Tampilan Scrollbar Sendiri di Blogger Menggunakan CSS

Cara Membuat Tampilan Scrollbar Sendiri di Blogger Menggunakan CSS | Cara membuat tampilan scrollbar sendiri di blogger menggunakan css, merupakan hal yang akan kita bahas hari ini.

Menurut Saya sendiri, mengubah tampilan scrollbar tersebut menjadi apa yang kita inginkan, dapat memberikan kesan tersendiri bagi blog kalian dan juga, bisa menjadikan hal itu sebagai ciri khas blog tersebut.

Yups, untuk membuatnya sendiri, kalian tidak perlu pusing akan hal coding. Karena, disini Saya akan memberikan dan menjelaskan kode CSSnya. Lalu, kalian tinggal edit atau tambahkan kode lainnya sendiri.

Cara Membuat Tampilan Scrollbar Sendiri di Blogger Menggunakan CSS

  • Pertama, login ke akun blogger kalian dulu.
  • Kemudian, kalian buka opsi Tema => klik Edit HTML.
  • Pastekan kode dibawah ini sebelum kode ]]></b:skin> atau </b: skin>
/*Setting Scrollbar*/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #ecf400;
background: #BA8B02;
background: -webkit-linear-gradient(to right, #181818, #BA8B02);
background: linear-gradient(to right, #181818, #BA8B02);
}

Cara Membuat Tampilan Scrollbar Sendiri di Blogger Menggunakan CSS
Keterangan :
:: - webkit-scrollbar
= Merupakan badan dari scrollbar tersebut. Kalian dapat mengubah ukuran lebar scollbar tersebut disini.
:: - webkit-scrollbar-thumb = Bagian kotak/persegi panjang yang kalian gulirkan dari atas kebawah.
:: - webkit-scrollbar-track = ialah jalur/track dari scrollbar tersebut.

Penjelasan sedikit mengenai kode CSS scrollbar diatas

Kode CSS diatas, merupakan 3 kode dasar CSS selectors untuk mengubah tampilan scrollbar tersebut, pada browser berbasis Webkit apapun. Pada dasarnya, kalian dapat mengubah lebar scrollbar pada kode pertama.

Pada kode kedua, kalian dapat mengubah tampilan kotak scrollbarnya (background, border, dll). Dan pada kode ketiga, kalian dapat mengatur tampilan jalur/track scrollbarnya seperti mengubah backgroundnya.

Agar kalian lebih paham, Saya sudah menyiapkan satu contohnya diatas dan kalian dapat langsung mencobanya. 

Kesimpulan …..

Gimana Sob, penjelasan diatas sudah jelas belum ? Mengenai cara membuat tampilan scrollbar sendiri di blogger menggunakan css.

Oh ya, jika kalian tidak punya ide untuk membuat tampilan scrollbar blog tersebut menjadi apa, kalian bisa kunjungi situs ini. Dimana, melalui situs tersebut, kalian dapat menghasilkan gaya scrollbar menjadi semenarik mungkin. Oke, sekian saja pembahasan hari ini. Semoga bermanfaat dan terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel