Custom scrollbar ini juga dipakai oleh Google, termasuk Blogger. Tetapi ada satu masalah di custom scrollbar ini, masalahnya adalah saat pertama membuka Bloggerbite, jika anda meng-scroll halaman kebawah, custom scrollbarnya agak sedikit error. Tetapi error itu hanya sementara saja kok! Setelah itu lama-lama error tersebut akan hilang.
Baiklah kita ungkap rahasia custom scrollbar Google ini! Namun untuk memperluas pengetahuan anda, saya akan menjelaskan sekilas tentang Webkit Custom Scrollbar. Simak berikut ini!
Webkit Custom Scrollbar
Ini dia merupakan rumus dalam membuat webkit custom scrollbar.::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
Webkit Support
Karena scrollbar ini membutuhkan webkit maka hanya browser yang men-support webkitlah yang dapat menampilkan custom scrollbar ini. Untuk membuat custom scrollbar ini cross browser atau dapat ditampilkan disemua browser, butuh kode Javascript. Namun saya belum tahu kode javascript tersebut seperti apa isinya.
- Amazon Kindle (experimental)
- Arora
- BOLT browser
- Chromium
- Google Chrome
- Comodo Dragon
- SRWare Iron
- RockMelt
- Yandex browser
- Dolphin Browser
- Dooble
- Flock (version 3.0 and above)
- iCab (version 4 uses WebKit; earlier versions used its own rendering engine)
- Iris Browser
- Konqueror (version 4 can use WebKit as an alternative to its native KHTML[20])
- Midori
- Nintendo 3DS NetFront Browser NX
- OmniWeb
- OWB
- QupZilla
- Rekonq
- Safari
- Shiira
- SlimBoat
- Steel for Android
- Steam ingame browser
- Teashark
- Ultralight[21] for Android
- Uzbl
- Web
- Web Browser for S60, used in all Nokia Symbian smartphones.
- webOS, used in the Palm Pre, Palm Pixi, Pre 2, HP Veer, Pre 3 and TouchPad mobile devices
- WebPositive, browser in Haiku
- xombrero
- [edit]For Java platform
- Bitstream ThunderHawk
- BOLT Browser (discontinued)
- HotJava (discontinued)
- Opera Mini
- uZard Web
- UCWEB
- HtmlUnit (GUI-less)
Tambahkan ke Blog Anda!
1. Masuk ke Dashboard > Template > Proceed
2. Tambahkan kode dibawah ini tempatnya seperti pada gambar dibawah ini :
/* Custom Scrollbar - Bloggerbite
----------------------------------------*/
::-webkit-scrollbar{
height:16px;
overflow:visible;
visibility:visible!important;
width:16px
}
::-webkit-scrollbar-button{
height:0;
width:0;
}
::-webkit-scrollbar-track{
background-clip:padding-box;
background-color:rgba(0,0,0,.05);
border:solid transparent;
border-width:0 0 0 4px
}
::-webkit-scrollbar-track:horizontal{
border-width:4px 0 0
}
::-webkit-scrollbar-track:hover{
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.1)
}
::-webkit-scrollbar-track:horizontal:hover{
box-shadow:inset 0 1px 0 rgba(0,0,0,.1)
}
::-webkit-scrollbar-track:active{
background-color:rgba(0,0,0,.05);
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-track:horizontal:active{
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-thumb{
background-color:darkgrey;
background-clip:padding-box;
border:solid transparent;
border-width:1px 1px 1px 6px;
min-height:70px;
padding:100px 0 0;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-thumb:horizontal{
border-width:6px 1px 1px;
padding:0 0 0 100px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.07)
}
::-webkit-scrollbar-thumb:hover{
background-color:#858585;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.25)
}
::-webkit-scrollbar-thumb:active{
background-color:#4a4a4a;
box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35)
}
::-webkit-scrollbar-corner{
background:transparent
}
body::-webkit-scrollbar-track-piece{
background-clip:padding-box;
background-color:#f6f6f6;
border:solid #EFEEEA;
border-width:0 0 0 3px;
box-shadow:inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)
}
body::-webkit-scrollbar-track-piece:horizontal{
border-width:3px 0 0;
box-shadow:inset 0 1px 0 rgba(0,0,0,.14),inset 0 -1px 0 rgba(0,0,0,.07)
}
body::-webkit-scrollbar-thumb{
border-width:1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal{
border-width:5px 1px 1px
}
body::-webkit-scrollbar-corner{
background-clip:padding-box;
background-color:#f5f5f5;
border:solid #EFEEEA;
border-width:3px 0 0 3px;
box-shadow:inset 1px 1px 0 rgba(0,0,0,.14)
}
* Kode tersebut akan menampilkan scrollbar pada Halaman penuh juga pada textarea atau area lain yang memiliki scrollbar. Kalau hanya ingin menampilkannya pada halaman penuh saja, maka cukup mengcopy sampai garis ke 60.
Other Style
Selain seperti scrollbar yang dipakai bloggerbite ini, anda juga dapat memasang scrollbar dengan style lain seperti pada gambar dibawah ini.
Code for Style 1
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
Code for Style 2
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Nah, sekian posting saya mengenai "Webkit Custom Scrollbar" ini. Mohon maaf apabila ada kesalahan. Apabila anda bingung atau tidak mengerti silahkan saja tinggalkan komentar ataupun mengirim email ke rahimahanifa@gmail.com .
Info : 
