Cara Cepat Membuat Scrollbar Kustom Di WordPress

Aman untuk mengatakan bahwa, untuk alasan apa pun, Anda ingin situs web Anda menonjol. Memiliki platform seperti itu akan memastikan hal yang Anda taruh lebih lama di benak pengunjung, dan itu hampir secara eksklusif merupakan hal yang baik. Terlepas dari konten di situs web Anda, cara lain untuk menarik perhatian ke produk Anda adalah aspek visual. Ini sama sekali bukan bagian dari pengetahuan baru. Ada alasan mengapa McDonald's berwarna merah dan kuning dan Facebook biru. Namun, di sini, kami akan berbicara tentang satu bagian kecil dari pengalaman yang ditawarkan situs web Anda. Ini adalah bagian yang mungkin tampak tidak terlalu penting, tetapi kami yakin masih memiliki nilai – bilah gulir. Dalam beberapa baris berikut, Anda akan mempelajari beberapa cara cepat untuk membuat scrollbar kustom di WordPress.

Cara sederhana untuk membuat bilah gulir khusus di WordPress

Membuat bilah gulir khusus adalah langkah penting dalam membuat tema khusus untuk situs web Anda. Jadi, jika Anda tertarik untuk membuat situs web Anda menonjol dalam segala hal , izinkan kami memperkenalkan Anda pada metode pertama untuk membuat bilah gulir itu unik.

Tambahkan bilah gulir khusus di WordPress dengan Plugin

Seperti kebanyakan hal yang ingin Anda lakukan di WordPress, menggunakan Plugin sebagai sarana untuk membuat scrollbar yang apik adalah cara yang baik untuk dilakukan. Alasan mengapa metode ini sangat direkomendasikan untuk sebagian besar pengguna adalah kesederhanaannya. Dengan beberapa klik sederhana, Anda akan menemukan bilah gulir yang cocok dengan gaya Anda. Namun, perlu disebutkan satu kelemahan kecil yang menyertai metode ini. Yaitu, plugin ini tidak mendukung browser seluler. Namun, jika ini tidak tampak seperti kerugian besar, lanjutkan membaca.

Pertama-tama, Anda perlu menginstal dan mengaktifkan plugin Advanced Scrollbar . Tindakan ini cukup sederhana:

1. Kunjungi Plugin, lalu buka halaman Add New di dalam area admin WordPress Anda. Ketik nama plugin tersebut di bilah pencarian, dan tekan Enter.
2. Setelah Anda menemukan plugin, klik tombol 'Instal Sekarang'. WordPress kemudian akan mengunduh dan menginstal plugin untuk Anda. Setelah ini, Anda akan dapat melihat bahwa tombol 'Instal Sekarang' telah berubah menjadi tombol 'Aktifkan'.
3. Klik tombol 'Aktifkan' itu dan Anda siap untuk pergi.

Sekarang setelah Anda menginstal dan mengaktifkan plugin yang diperlukan, Anda harus mengonfigurasinya. Meskipun kata itu mungkin terdengar menakutkan, prosesnya sangat mudah. Cukup buka Pengaturan> Pengaturan Bilah Gulir Warna Kustom. Sesampai di sana, Anda akan dapat mengubah warna bilah gulir Anda, serta warna latar belakang relnya. Anda kemudian dapat memilih langkah gulir mouse, yang akan menjadi kecepatan gulir roda mouse. Apa yang juga hebat tentang plugin ini adalah memungkinkan Anda untuk memilih apakah Anda ingin menyembunyikan scrollbar secara otomatis, atau selalu menampilkannya.

Anda juga memiliki opsi untuk memilih opsi 'Hanya kursor', yang akan menampilkan rel bilah gulir tanpa tombol. Di bawah itu, Anda akan dapat menemukan opsi untuk mengatur kecepatan gulir, mengubah perataan rel (kiri atau kanan), dan mengaktifkan perilaku sentuh.

Setelah Anda melalui semua opsi, bermain dengan warna, dan menemukan kombinasi yang paling sesuai dengan gaya dan preferensi Anda, jangan lupa untuk mengklik tombol 'simpan perubahan', untuk menyimpan semua pekerjaan itu. Setelah melakukannya, Anda dapat mengunjungi situs web Anda untuk melihat warna scrollbar khusus yang cantik itu beraksi.

Tambahkan warna bilah gulir khusus di WordPress menggunakan CSS

Seperti yang dapat Anda simpulkan dari subtitle, metode ini menggunakan CSS untuk menata scrollbar Anda. Metode ini telah membuktikan dirinya lebih cepat daripada metode di mana Anda menggunakan jQuery. Namun, penting untuk disebutkan bahwa ini hanya berfungsi di browser desktop yang menggunakan mesin rendering WebKit seperti Google Chrome, Safari, dan Opera. Sayangnya, ini tidak akan berpengaruh pada browser seluler atau Firefox dan Edge di komputer desktop. Dengan itu, jika ini adalah opsi yang ingin Anda pilih, inilah cara untuk melakukannya.

Mulailah dengan menuju ke Tema > halaman Kustom. Tindakan ini akan meluncurkan antarmuka penyesuai tema WordPress. Anda akan dapat melihat pratinjau langsung situs Anda dengan banyak opsi di bidang kiri layar Anda . Lanjutkan dengan mengklik tab CSS tambahan dari panel kiri. Tab tersebut akan menampilkan kotak sederhana tempat Anda dapat menambahkan CSS khusus Anda. Segera setelah Anda menambahkan aturan CSS yang valid, Anda akan melihatnya diterapkan ke panel pratinjau langsung situs web Anda. Adapun aturan CSS yang valid itu, inilah yang harus Anda tambahkan agar bilah gulir Anda rentan terhadap perubahan:

::-webkit-scrollbar {

-penampilan webkit: tidak ada ;

}

::-webkit-scrollbar {

lebar : 10 piksel ;

}

::-webkit-scrollbar-track {

latar belakang: #ffb400 ;

borger : 1px solid #ccc ;

}

::-webkit-scrollbar-thumb {

latar belakang: #cc00ff ;

borger : 1px solid #ee ;

tinggi : 100 piksel ;

batas-radius: 5px ;

}

::-webkit-scrollbar-thumb:hover {

latar belakang: biru;

Ingat bahwa setiap CSS khusus yang Anda tambahkan menggunakan penyesuai tema hanya tersedia dengan tema tertentu. Jika Anda mengubah tema tetapi ingin mempertahankan bilah gulir khusus itu, Anda harus menyalin dan menempelkan aturan CSS itu ke tema baru Anda menggunakan metode yang sama.

Meskipun ini adalah cara yang bagus untuk membuat situs web Anda menonjol, kami harus menyebutkan satu kelemahan dari membuat bilah gulir khusus di WordPress. Yaitu, secara default, CSS tidak dilengkapi dengan aturan yang memungkinkan Anda mengubah properti bilah gulir. Ada beberapa proposal untuk menambahkan opsi ini, tetapi tidak didukung oleh sebagian besar browser saat ini. Untuk mengatasi masalah ini, desainer dan pengembang menggunakan elemen semu khusus browser atau JavaScrip untuk mengganti tampilan bilah gulir default. Itulah teknik-teknik yang telah kami jelaskan kepada Anda. Namun, Anda harus ingat bahwa Anda harus menguji situs Anda dengan browser dan perangkat yang berbeda untuk memastikannya berfungsi seperti yang Anda bayangkan di semua browser. Setelah Anda membahasnya, aman untuk mengatakan bahwa Anda tahu cara membuat scrollbar khusus di WordPress.