Cara Merubah Scrollbar Blog Pada Browser Menggunakan CSS

Ada beberapa situs yang memberikan tampilan berbeda dari biasanya, salah satunya adalah bentuk dari scrollbar yang tidak normal. Ini akan menjadi hal unik bagi blog tersebut, sebagai contoh kita lihat situs CSS-Trick yang membuat tampilan scrollbarnya menjadi bulat berwarna oren radasi pink.

Bagus bukan? Oleh sebab itu saya mencoba membuat kode CSS dan menerapkannya pada blog saya, hasilnya memang lebih nyaman dan blog lebih bersih.  tidak hanya itu, saya juga memberikan tutorial cara merubah scrollbar pada blog menggunakan CSS khusus Webkit Browser.

Caranya cukup mudah, kita hanya perlu memasukan kode berikut pada tema atau template saja. Jika menggunakan WordPress maka letakan baris kode dibawah ini pada file style.css dan jika menggunakan blogspot bisa letakan sebelum </b:skin>.

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #f2f2f2;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

Sangat mudah ya. Tidak perlu memasang plugin dan alat tambahan, kita hanya perlu menaruh kode CSS saja dan tampilan scroll bar sudah berbeda menjadi lebih bagus.

Tinggalkan komentar