February 15, 2020

Cara Memperindah Scrollbar di WordPress Tanpa Plugin

by narwastunagoro

Cara Memperindah Scrollbar di WordPress Tanpa Plugin. Ada berbagai macam cara untuk memperindah scrollbar WordPress Anda. Salah satunya, menggunakan plugin. Tetapi, penggunaan plugin yang terlalu banyak juga tidak baik untuk website Anda.

Trik ini menggunakan CSS jadi bisa diaplikasikan ke dalam tema WordPress maupun yang tidak menggunakan CMS WordPress.

Copy Paste Kode CSS dibawah ini

Langkah pertama, Copy dan Paste Kode CSS dibawah ini kedalam website Anda. Untuk WordPress ada dua cara untuk memasukkan kode CSS. yaitu :

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #eaeaea; 
	border:1px solid #eaeaea;
}
::-webkit-scrollbar-thumb {
  background: #222; 
	border:1px solid #222;
	height:100px;
	border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #111; 
}
cara memperindah scrollbar pada website Anda
Copy Paste code di Appereance>Customize>Custom CSS

1. Melalui Theme Customizer

  1. Navigasikan ke WP Dashboard> Appereance> Customize> Custom CSS
  2. Click Custom CSS dan masukkan (Copy Paste) Kode CSS dibawah ini
  3. Ganti beberapa warna yang saya sediakan. Dan sesuaikan kenampakan sesuai dengan website Anda miliki

2. Melalui Stylesheet.css

  1. Navigasikan ke WP Dashboard> Appereance> Theme Editor> Stylesheet.css
  2. Kemudian Copy paste kode CSS dibawah ini

Cara Mengganti Warna dan Gaya

Cara mengganti warnanya cukup mudah Anda hanya perlu mengganti kode warna yang saya berikan. Cari elemen ini pada kode yang saya berikan diatas. Secara Default warna yang saya beri berwarna hitam menggunakan #222 Anda bisa mengganti warna dengan warna kesukaan Anda.

Secara Default Scrollbar terlihat pipih pada bagian ujung scrollbar. Jika Anda ingin menjadi kotak seperti Scrollbar yang saya gunakan. Pada bagian border-radius ubah nilai 5px menjadi 0px.

::-webkit-scrollbar-thumb {
  background: #222; 
	border:1px solid #222;
	height:100px;
	border-radius:5px;
}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *