Cara Mengubah Tampilan Scrollbar Dengan CSS3

Cara Modifikasi Tampilan Scrollbar Agar Lebih Menarik - Setiap orang tentu memiliki keinginan jika blog yang mereka kelola memiliki tampilan yang menarik dimata para pengunjung -begitu juga saya-.

Nah, untuk itu pada artikel kali ini saya akan berbagi sedikit tips tentang bagaimana cara mengubah tampilan scrollbar agar terlihat lebih menarik, dan tentunya berbeda dari blog yang lainnya.

Pada dasarnya, scrollbar memang tidak terlalu diperhatikan oleh para pengunjung blog. Karena biasanya pengunjung akan lebih fokus pada bagian konten, sidebar, header maupun footer tapi tidak ada salahnya jika kita ingin membuat tampilan blog kita agar terlihat lebih menarik.

Apalagi jika kamu salah satu blogger yang senang dalam memodifikasi tampilan blog, maka cara mengubah tampilan scrollbar berikut ini wajib untuk kamu terapkan diblog kamu.

Terlebih lagi, tips kali ini hanya menggunakan css3 tanpa menggunakan javascript. Jadi tidak akan membuat loading blog kamu menjadi lambat.

Cara Mengubah Tampilan Scrollbar

Berikut tutorial cara mengubah tampilan scrollbar dengan css3

• Masuk ke menu edit tema > dan tambahkan css berikut.

/* Webkit Scrollbar */
::-webkit-scrollbar {
width: 15px;
}

::-webkit-scrollbar-track {
background: #FFFFFF;
-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
border: 1px solid #D8D8D8;
}

::-webkit-scrollbar-thumb {
background: #646464;
-webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
}

::-webkit-scrollbar-thumb:hover {
background: #AAA;
}

::-webkit-scrollbar-thumb:active {
background: #888;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

• Kemudian simpan tema, selesai.

Bagaimana, mudahkan? kamu juga bisa mengganti warna background, hover dan lebar scrollbar sesuai dengan keinginan kamu.

Untuk demo langsung, kamu bisa melihat scrollbar diblog ini.

Mungkin itu saja yang bisa saya bagikan tentang "Cara Mengubah Tampilan Scrollbar" pada kesempatan kali ini. Jika kamu memiliki pertanyaan tentang artikel diatas, kamu bisa menggunakan form komentar dibawah ini. Sampai jumpa.