Cara Memperindah Scrollbar di WordPress Tanpa Plugin

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;
}

Panduan Lengkap Swift Performance Pro 2020

Panduan Lengkap Swift Performance Pro dan juga settingan yang terbaik untuk Anda. Kecepatan Website merupakan indikator yang utama pada SEO (Search Engine Optimatization). Terlepas dari SEO pula, tentu Anda sebagai user sangatlah kecewa ketika Anda mengunjungi website yang lemot. User akhirnya keluar dari website yang lemot karena konten tidak segera muncul. Tentu sangat merugikan Anda, jika Anda memiliki website lemot.

Swift Performance Pro merupakan plugin caching berbayar terbaik menurut saya. Fitur yang ditawarkan lebih beragam dan bervariasi dibandingkan dengan kompetitornya yaitu WP Rocket. Canggihnya, plugin caching ini dapat menyesuaikan dengan webserver yang Anda pakai, builder yang Anda pakai, dan beragam opsi lainnya yang bisa Anda lakukan. Tidak hanya sebagai plugin caching yang memiliki kemampuan untuk minify javascript, css, dan html. Swift Performance Pro dapat melakukan Optimatisasi gambar meskipun tidak sebaik Shortpixel dan Optimole.

Jika Anda memiliki masalah :

Sayangnya, opsi yang beragam dari Swift Performance Pro ini terkadang membingungkan pengguna untuk menyesuaikan ke website pengguna. Oleh karena itu dalam tulisan saya kali ini, saya akan memberitahukan fitur-fitur dan opsi mana yang harus diaktifkan untuk Anda pada artikel Panduan Lengkap Swift Performance Pro 2019. Saya juga memberikan cara setting swift performance 2019 yang terbaik untuk Anda.

Saya akan membagi dua opsi settingan yang satu adalah Setup Simple dan yang Kedua Setup Detail. Saya menggunakan web server Litespeed dengan versi PHP 7.2, Memory Limit 256M, dan Versi WordPress 5.3.

Settingan ini berdasarkan dari beberapa artikel, kemudian saya modifikasi dan akhirnya menemukan settingan Swift Performance yang paling baik.

Panduan Lengkap Swift Performance Pro 2019

Setup Simple

Buat Anda yang tidak mau ribet ini opsi yang paling cepat untuk Anda. Tidak butuh waktu yang lama, tapi saya tidak menjamin optimatisasi ini tidak sebaik dibandingkan Setup Detail.

  1. Install Swift Performance Pro, kemudian masukkan lisensi Anda. Kemudian ada beberapa opsi pilihan. Saya sarankan untuk menggunakan Manual Configuration.
  2. Klik Advanced View pada opsi kanan atas plugin Swift Performance Pro
  3. tab General - General Aktifkan Compute API.
  4. tab Media - Images Aktifkan Lazy Load Images.
  5. tab Media - Embeds Aktifkan Youtube Smart Embeds dan Lazy Load Iframes.
  6. tab Optimization - General Non aktifkan Optimize Prebuild Only (di beberapa website saya mengaktifkan opsi ini) dan Fix HTML (fungsi ini bisa Anda aktifkan jika Anda menggunakan tema yang kurang baik. Jika Anda menggunakan tema oleh developer terpercaya seperti Hello Themes by Elementor, Astra, Ocean WP non-aktifkan fitur ini).
  7. tab Optimization - Scripts Aktifkan Merge Scripts (dalam beberapa kasus Anda bisa menggunakan fitur ini jika Anda menggunakan plugin yang menggunakan JS Anda perlu membaca di setup detil dibawah).
  8. tab Optimization - Styles Aktifkan Merge Style (Jika Anda menggunakan CDN seperti Cloudflare, Stackpath (Max CDN), BunnyCDN, dan Content Delivery Network lainnya non-aktifkan opsi ini).
  9. tab Caching - General Pilih Disk Cache Rewrites pada Caching Mode, kemudian untuk Cache Expiry Mode pilih Time Based Mode. Jika Anda memiliki banyak konten seperti Anda memiliki blog saya lebih menyarankan menggunakan Action Based Mode.
  10. tab Caching - Warmup Pilih Unlimited untuk Prebuild Speed.
  11. tab Woocommerce Aktifkan Cache Empty Cart, Non-aktifkan Disable Cart Fragment. dan Non-aktifkan Woocommerce Session Cache (BETA).
  12. Kemudian Save Changes dan Clear Cache.
  13. Kemudian lihat di Dashboard tunggu beberapa saat. Apakah Prebuild Cache benar-benar berjalan. Tunggu beberapa menit kemudian refresh halaman Swift Performance PRO.

Lihat perubahan kecepatan website Anda pada GTMetrix bagaimana perbedaannya sangat jauh sebelum Anda menggunakan Swift Performance PRO. Maka dari itu Panduan Lengkap Swift Performance Pro 2019 dibuat untuk memudahkan Anda dalam mengenal plugin cache terbaik ini dan juga setting swift performance pro.

Panduan Setup Detil

Tahap #1 - Install Swift Performance PRO

Panduan Lengkap Swift Performance Pro 2019

Panduan Lengkap Swift Performance Pro 2019 harap dibaca baik-baik coba trial dan error jika ada kendala tulis di kolom komentar saya senantiasa membantu Anda.

Swift Performance PRO membutuhkan beberapa requirements. Tapi meskipun beberapa kebutuhan yang harus terpenuhi ini belum bisa Anda penuhi. Anda masih bisa menggunakan Swift Performance PRO. Beberapa kebutuhan itu adalah :

  1. Apache Module - mod_deflate, mod_filter, mod_setenvif (ketiga modul ini biasanya sudah teraktifkan pada webserver Anda)
  2. Loopback - Fungsi ini dibutuhkan oleh Swift Performance PRO dan biasanya sudah otomatis terinstall di website Anda, jika Anda ingin mengaktifkannya Anda harus meminta kepada penyedia hosting Anda untuk mengaktifkan ini.
  3. Rest API - Fungsi ini digunakan untuk membaca API pada beberapa kasus mod_security memblokir REST API dan Loopback sehingga Anda tidak dapat menggunakan Use Compute API dan menggunakan fitur Optimatisasi gambar.

Module yang paling berpengaruh itu pada REST API dan Loopback. Biasanya kebanyakan Shared Hosting sudah memilikinya dan automatis aktif. Pada beberapa VPS tidak teraktifkan maka Anda harus menghubungi sys-admin atau penyedia hosting tersebut. Pada kasus webserver Litespeed terkadang tidak terbaca meskipun Anda menerima error seperti ini plugin masih tetap bisa digunakan.

Tahap #2 - Swift Performance Setting

Menuju ke setting pada Swift Performance pro dan klik tombol Advanced View pada kanan atas di samping simple view

Ini adalah setting, yang biasa saya gunakan pada setiap klien saya baik dalam negeri maupun luar negeri. Saya menjamin akan meningkatkan kecepatan Anda pada settingan ini sekitar 80%-90%

Jika Anda masih mengalami kendala website yang lemot pastikan Anda menggunakan Web Hosting yang terbaik. Jika Anda masih memiliki kendala lain Anda bisa menanyakan di kolom komentar post ini, Anda juga dapat menggunakan jasa saya untuk mempercepat website Anda. Hubungi saya jika Anda ingin menggunakan jasa mempercepat website.

1. General

General
Tweaks
Heartbeat
Google Analytic
Whitelabel

2. Media

Images
Embeds

3. Optimization

General
Scripts
Styles

4. Caching

General
Tweaks
Exceptions
Warmup
Varnish
Appcache

karena saya belum pernah menggunakan fitur ini. Saya akan update di minggu kedepan tentang fitur Appcache

5. Plugin

Contact Form 7
Woocommerce

CDN

General
Cloudlfare
MaxCDN (StackPath)
Impor/Export

Jika Anda menggunakan Swift di berbagai project Anda. ANda dapat menggunakan fitur ini untuk Export Import settingan terbaik untuk Swift Anda.

Tahap #3 - Save Changes dan Tunggu Hasil

Tunggu beberapa saat 5 menit hingga 30 menit tergantung banyak jumlah halaman website Anda. Jika Anda ingin mengecek apakah plugin bekerja atau tidak. Buka website Anda di halaman incognito pada chrome. Jika Anda menggunakan Mozilla Anda bisa menggunakan private browser.

Lakukan test pada GT Metrix atau Tools Pingdom. Lihat perubahan yang terjadi.

Terimakasih untuk mengunjungi artikel : Panduan Lengkap Swift Performance Pro 2019, jika ada pertanyaan. Silahkan tanyakan di kolom komentar.

Referensi