Beranda
Blogger
CSS

Cara Mengganti Dan Mengubah Warna Scroll Bar Pada Blog Agar Terlihat Lebih Keren Dan Profesional

Cara Mengganti Dan Mengubah Warna Scroll Bar Pada Blog Agar Terlihat Lebih Keren Dan Profesional. Scroll bar ini akan terlihat lebih cantik dan keren.
Cara Mengganti Warna Scroll Bar Di Blog Blogspot Dengan Mudah Agar Lebih Keren - Kamu pasti udah taukan seperti apa bentuk dari scroll bar pada blog yang saya maksud ini? Scroll bar adalah seperti kotak scroll yang berada di samping blog yang berguna untuk menggulirkan halaman blog ke atas dan ke bawah. Scroll bar ini hanya akan tampil di perangkat desktop saja. Dan gak bakal kelihatan di perangkat mobile walaupun tampilannya di ubah ke versi desktop.

Secara default scroll bar pada blog ini bentuknya seperti kotak memanjang yang berwarna abu-abu gitu. Kamu bisa mengganti scroll bar bawaan blogger dengan scroll bar yang kamu suka. Kamu bisa ganti mulai dari warna, bentuknya dan juga latar belakangnya. Kalau masih belum paham sama penampakan scroll bar ini, cek gambar dibawah ini aja.

Memangnya apa sih keuntungan mengganti scroll bar pada blog itu? 

Sebentar tidak ada yang sangat istimewa dari tampilan scroll bar ini. Tapi scroll bar ini dapat meningkatkan nilai positif pada desain sebuah blog. Anggap saja agar blog terlihat lebih profesional di mata para pengunjung blog kamu. Hanya itu saja sih menurut saya kelebihan dari scroll bar ini. 


Kalau kamu lebih mengutamakan desain blog untuk menarik perhatian para pengunjung blog kamu, kamu bisa coba pasang scroll bar ini diblog kamu. Karena menurut saya ini sangat bagus kalau dipasang diblog untuk menyesuaikan warna tema blog kamu. Karena kalau scroll bar bawaan blogger itu kurang menarik dan warnanya cuman abu-abu tok.

Emangnya CSS Ini Gak Memberatkan Loading Blog?

Sama sekali tidak. Karena kode yang dipasang berupa CSS. Dan CSS ini juga sudah saya perkecil lagi ukurannya menggunakan alat CSS Minifier yang ada diblog Tekno Thalib ini. Jadi kamu gak usah khawatir kalau CSS scroll bar ini bisa memberatkan loading blog. Karena diblog Tekno Thalib sendiri menggunakan CSS ini.

Di artikel kali ini saya akan memberikan tutorial cara mengganti dan mengubah warna pada scroll bar yang ada diblog agar terlihat lebih cantik dan profesional. Ikutin aja langkah-langkah yang ada dibawah ini.


Cara Mengganti Dan Mengubah Warna Scroll Bar Pada Blog Agar Terlihat Lebih Keren Dan Profesional

  • Seperti biasa, masuk ke akun blogger kamu >> Theme >> Edit HTML.
  • Lalu salin CSS dibawah ini dan taruh CSS-nya sebelum ]]></b:skin>, atau </style>
html{scrollbar-width:thin;scrollbar-color:#039be5 #393939}::
-webkit-scrollbar{width:14px}::
-webkit-scrollbar-track{background:#757575;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)}::
-webkit-scrollbar-thumb{background:#00BFA5;border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}

Scrollbar-thumb adalah kotak bagian dalam atau kotak yang ukurannya lebih kecil yang digunakan untuk menggulirkan halaman
Scrollbar-track adalah kotak bagian luarnya dan lebih luas dari pada kotak scroll bar thumb.
Kamu juga bisa ganti warna dari scroll bar thumb sesuai dengan warna tema blog kamu dengan mengganti teks yang berwarna merah. Dan untuk warna scroll bar track-nya juga bisa kamu ubah sesuai dengan warna yang kamu suka dengan mengganti bagian teks berwarna hijau. Kamu bisa pakai tool color picker yang ada diblog ini untuk memilih warna.
  • Setalah semuanya diatur sesuai dengan warna template kamu, langsung saja klik simpan dan lihat hasilnya.

Mungkin hanya itu saja cara mengubah warna dari scroll bar pada blog yang bisa di jelaskan di artikel kali ini. Kalau masih bingung juga tanyakan saja langsung di kolom komentar dibawah. 
There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!