Customize Scrollbar di Blog ~ Bicara soal kustomisasi, tentu kita sudah banyak tahu tentang hal ini. Kustomisasi sendiri adalah suatu kegiatan yang kita lakukan untuk memodifikasi atau mempercantik tampilan atau fungsi suatu media, entah itu media yang bisa kita pegang maupun berupa media digital agar lebih menarik dan lebih indah jika dilihat. Dengan kata lain, sudah tidak default lagi. Hal ini juga bisa kita lakukan pada blog atau website, dengan mengedit atau menambahkan beberapa sentuhan yang kita inginkan.
Dan kali ini kembali lagi di Sena How To, untuk membahas bagaimana cara mengkustomisasi scrollbar pada blog. So, check this out guys!

Seperti biasa, pertama kalian harus memiliki blog. Untuk kalian yang belum memiliki blog, kalian bisa mengunjungi laman Blogger untuk membuat blog yang kalian inginkan (krn saya pengguna blogger, jadi tutor ini saya buat di blogger :'D).

Sudah punya blog? Yuk, lanjut!
Masuk ke blogger kalian, pilih blog yang ingin kalian pasang fitur ini, lalu pilih Theme dan pilih Edit HTML yang ada di sebelah kanan menu ini.


Perlu diingat! Sebelum mengubah atau mengedit coding dari template, ada baiknya kalian menbackup terlebih dahulu tema dari blog kalian.
Cari tag ]]></b:skin> lalu copy dan paste kode ini sebelum tag tersebut (diatas tag ]]></b:skin>):
body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
body::-webkit-scrollbar {
 width: 12px;
 background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #575596;

}


Seperti ini:

Lalu, jangan lupa disimpan.
Dan hasil akhirnya akan menjadi seperti ini:
[sebelum]

[sesudah]
Nah, bagaimana? Kereeeen kaaannn! xD Ok, cukup sekian tutorial kali ini. Semoga bermanfaat, dan sampai jumpa di tutorial Sena How to selanjutnya.


Terima kasih sudah mengunjungi blog ini, jika ada kritik, saran, dan masukan, kalian bisa tinggalkan pesan di komentar atau langsung DM di twitter saya. #chaoo

Oh ia! Hampir lupa...
Ada sedikit info tambahan untuk mengedit warna dan beberapa sentuhan lainnya agar tampilannya sesuai dengan keinginan kalian. Check this guys!

Custom Style:
Kalian bisa mengkustomisasinya lagi setelah memasang kode tadi kedalam template blogger kalian.

Color of scroll bar:
Untuk mengganti warna pada scrollbar, kalian bisa mengubah value #575596; pada background-color: #575596; (namun jika kalian suka warna ungu, biarkan saja. Krn ini kode warna ungu).

Edges of Scroll bar:
Untuk menggantinya, kalian hanya harus mencari border-radius: 0px; dan menggantinya dengan value yang kalian inginkan.

Background color of scrollbar:
Untuk mengganti warna dari latar belakang pada scrollbar, kalian hanya harus mencari background-color: #F5F5F5; dan menggantinya dengan value yang kalian inginkan.

Ok, cukup sekian. Semoga bermanfaat. #chaoo