Webkit Custom Scrollbar

Membosankan sekali rasanya apabila scrollbar blog kita jadul. Nah, biar gak jadul pake custom scrollbar ini!   Tutorial ini merupakan salahsatu Bitesecret Series. Apa itu bitesecret? Bitesecret series adalah tutorial yang mengungkapkan rahasia Blogger Bite. Ya, karena custom scrollbar yang akan anda pasang adalah custom scrollbar yang ada di Blogger Bite ini! Keren bukan?

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. 

1. Amazon Kindle (experimental)
2. Arora
3. BOLT browser
4. Chromium
5. Google Chrome
6. Comodo Dragon
7. SRWare Iron
8. RockMelt
9. Yandex browser
10. Dolphin Browser
11. Dooble
12. Flock (version 3.0 and above)
13. iCab (version 4 uses WebKit; earlier versions used its own rendering engine)
14. Iris Browser
15. Konqueror (version 4 can use WebKit as an alternative to its native KHTML[20])
16. Midori
17. Nintendo 3DS NetFront Browser NX
18. OmniWeb
19. OWB
20. QupZilla
21. Rekonq
22. Safari
23. Shiira
24. SlimBoat
25. Steel for Android
26. Steam ingame browser
27. Teashark
28. Ultralight[21] for Android
29. Uzbl
30. Web
31. Web Browser for S60, used in all Nokia Symbian smartphones.
32. webOS, used in the Palm Pre, Palm Pixi, Pre 2, HP Veer, Pre 3 and TouchPad mobile devices
33. WebPositive, browser in Haiku
34. xombrero
35. [edit]For Java platform
36. Bitstream ThunderHawk
37. BOLT Browser (discontinued)
38. HotJava (discontinued)
39. Opera Mini
40. uZard Web
41. UCWEB
42. HtmlUnit (GUI-less)

[EN Wikipedia Source]

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 .