Css ScrollBar Untuk Merubah Warna, Bentuk dan Ukuran Scroll

Situseo Blog : Merubah warna bentuk dan ukuran scroll dengan css scrollbar, warna bentuk dan ukuran scrollbar standar adalah seperti yang terlihat pada sebelah kiri layar kalian, jika halaman bog kalian yang dibuka, untuk memberi tampilan berbeda seperti warna bentuk dan ukuran pada scroll, kalian bisa menambahkan kode CSS Scrollbar.

Sayangnya css scrollbar ini belum didukung oleh browser Mozila hanya baru support untuk browser Chrome miliknya google. Sudah saya coba menggunakan -moz- tapi memang mozila belum mendukung css scrollbar ini, padahal pengguna mozila terutama diindonesia masih banyak. Jika kalian membuka Situseo Blog pada browser selain chrome tentu saja tampilan scrollbar-nya akan seperti biasa. Tidak ada salahnya jika kalian menggunakan css scrollbar ini digunakan pada blog kalian untuk mempercantik tampilannya, walupun hanya bisa terlihat berbeda pada browser chrome saja.

Cara ini hampir sama seperti kita memberi perintah kepada browser untuk teks seleksi (css selection), cuma bedanya css selection sudah didukung oleh mozila. Untuk cara menampilkan scrollbar yang berbeda, baik itu warna, ukuran dan bentuk, kalian cukup copy paste kode css scrollbar dibawah ini dan letakan diatas kode ]]></b:skin>, dalam beberapa template penempatan css scrollbar ini tidak berjalan dengan baik jika diletakan diatas kode ]]></b:skin> seperti pada template Situseo Blog, untuk mengatasi hal itu kode css scrollbar bisa diletakan dibawah kode <b:skin><![CDATA[

::-webkit-scrollbar {
width: 10px;
background: #cc3000;
-webkit-border-radius:10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #000000;
-webkit-border-radius:10px;
border-radius: 10px;
}

Dengan menggunakan kode tersebut akan menghasilkan scrollbar seperti terlihat pada kanan layar atau pada  kotak scroll kode pada post diatas.

Untuk menyesuaikan warna scroll dengan warna dasar blog, kalian bisa merubah pada bagian background dengan merubah kode warnanya, ukuran pada kode width dan bentuk pada kode border-radius.

Semoga bermanfaat,