You must enable Javascript in your browser to run or open this site.

Edit Scrollbar in -webkit- Browser

Halo kembali lagi bersama saya si Blog Farixsantips ini. Tema kita pada saat ini adalah Scrollbar pada browser tertentu yang dapat di Edit/Ubah Style. Hehehe jauh banget ya dari Koleksi Script vbs dan bat ke Css :-D

Scrollbar kayak apa sih? seperti gambar yang ada disamping kiri itu. Ya benar sekali sobat. Scrollbar dalam Browser menurut istilah bahasa orang orang (keliling dari blog ke blog) adalah suatu fasilitas dalam browser yang dapat diartikan sebagai alat untuk menggerakan laman/halaman web baik naik dan turun maupun kekanan dan kekiri. Menurut istilah dari beberapa orang yang memposting tentang tema Scrollbar saya saring jadi begitu hehe. Dari arti tersebut logikanya adalah semua browser memfasilitaskan dong hihi, ada tidak browser yang tidak ada Scrollbarnya? Mau jadi apa itu Web Browser haha!

Kembali ke... Laptop [kalo yang gak pake laptop gak apa apa kan? haha]
Scrollbar yang telah di sediakan Web Browser itu bisa juga dikatakan Standar. Kenapa Standar? Karna memang default Scrollbarnya seperti itu, abu abu tak bermotif dan tak terhiaskan oleh indahnya.... zzz (tidak jago sastra), wkwk. Oleh karna itu disini ane posting tentang cara mengedit Scrollbar yang dari tampilan Standar atau biasa itu menjadi Indah dengan menggunakan Css.

Setiap Web Browser memiliki code CSS khusus sendiri-sendiri contohnya :

Mozilla Firefox
Safari Webkit/Google Chrome
Opera 10.5
Internet Explorer
-moz-
-webkit--0-Tidak ada Kode!

Dari tabel diatas dapat di bedakan kode kode dari Setiap Browser di Css. Lho kenapa Internet Explorer tidak dapat mengolah Css tertentu? Karna memang takdirnya begitu hahaha. Begini di Tutorial mengedit Scrollbar ini, sobat HANYA BISA MENGGUNAKAN DENGAN -WEBKIT- saja yaitu Google Chrome atau Safari saja. Bukan Firefox ataupun Opera atau parah lagi Internet Explorer! Jaman sekarang kan orang banyak yang menggunakan Google Chrome tuh, bisa di manfaatkan nih :D

Contohnya Gmana?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Ingat ya? Gunakan Browser GOOGLE CHROME atau SAFARI






Bagaimana Cara membuatnya?

Membuat/Mengedit Scrollbar pada Browser Google Chrome yaitu dengan menggunakan kode -webkit- tadi. Setelah di letakan Css ajaib itu, Css akan berjalan ke Semua Widget, Gadget, Halaman, Object yang memiliki Scrollbar. Lengkapnya ada di bawah ini :
  1. Pertama tama buka blogger.com sahabat dengan Pass dan ID sahabat.
  2. Pada di Laman Dashboard klik Layout → Edit HTML → cari kode ]]></b:skin&gt
  3. Selanjutnya letakan kode CSS berikut tepat diatasnya kode ]]></b:skin> tadi :
    ::-webkit-scrollbar {
    height:12px;
    width: 12px;
    background: #fff;
    }
    ::-webkit-scrollbar-track {
    box-shadow: 0 0 3px #777;
    border-radius: 7px;
    }
    ::-webkit-scrollbar-thumb {
    background-color: #de0101;
    box-shadow: inset 0px 0px 4px #777;
    border-radius: 7px;
    }
  4. Kemudian Save Template!
Keterangan Kode Css mengenai Scrollbar

::-webkit-scrollbar { /* Nomor 1 */ }
::-webkit-scrollbar-button { /* Nomor 2 */ }
::-webkit-scrollbar-track { /* Nomor 3 */ }
::-webkit-scrollbar-track-piece { /* Nomor 4 */ }
::-webkit-scrollbar-thumb { /* Nomor 5 */ }
::-webkit-scrollbar-corner { /* Nomor 6 */ }
::-webkit-resizer { /* Nomor 7 */ }

sumber gambar : http://cdn.css-tricks.com/wp-content/uploads/2011/05/scrollbarparts.png KLIK UNTUK MEMPERBESAR

Saya rasa keterangan keterangan itu lebih dari cukup. Selanjutnya tinggal sobat saja yang mengedit edit :) hihihi semoga dengan adanya Scrollbar yang bisa di edit sobat jadi lebih bisa berkreasi hihi.

118 comments

  1. pertamax kah disini .... ??? :D

    BalasHapus
  2. Iseng2 berhadiah ,, dapet PERTAMAX.. =)) =))

    BalasHapus
  3. wuasemmmmm,, gagal lagi,, :(( :(( wahh keren ya jadinya,, kyk di blog ente ini ya faris,, =)) =)) coba ahhh,, :P :P

    BalasHapus
  4. Artikelnya tambah Maju aja ,Sob Aku Beri award sobat

    BalasHapus
  5. Wow saya juga udah pake :) nih share diblog ane juga udah deluan tapi. kayaknya caranya beda deh hhe :D

    BalasHapus
  6. nice tips sobat,, jadi banyak tahu tentang scrollbar, ternyata e ternyata bisa di gandi2 yach

    BalasHapus
  7. wah,, ngulas CSS molo neh blog :D
    ajip bgt :D

    BalasHapus
  8. Buseet dah,jauh banget ama pertamax

    BalasHapus
  9. To Shinobi : ya om pertamax. :|
    To Rama : wkowkowkwoww selamat ana mendapatkan keduax :)) hahaha iya mirip mirip lah :P
    To G.Gregorio : heheheh wah award? mana award :P
    To Admin - Ari Software : iya kok bisa mirip dah :-o wahahaha tapi jauh bedanya :))
    To Asis Sugianto : hihihih thanks supportnya :) iya sob sesuai kemauan :)
    To Dayz : gak molo kok sob :D
    To Musa Khairul Umam : hahahaha ya sob sabar :|

    BalasHapus
  10. Wah ketinggalan :D
    Wah ane pakai Ff,ngak keliatan Dong :-/

    BalasHapus
  11. Wueh....Iya :D
    Pindah ke Chrome jadi merah meriah scrollbarnya :>

    BalasHapus
  12. To Wirang Geni : pakai Google Chrome aja sekali sekali. tapi kalau orangnya pakai google chrome kan mayan, menghipur pengunjung :) tuh kan ane bilang apa :D

    BalasHapus
  13. banyak tips trik disini,, nambah ilmu :) Thanks dah di share Farixsantips

    BalasHapus
  14. masak sih ..tk cobanya di crome ya

    BalasHapus
  15. wk wk iya sob wara wari[+n] sip dah

    BalasHapus
  16. wah google chrome aja ane g nginstall
    =))
    =))

    BalasHapus
  17. ow seperti itu ya sob, baru tau saya.
    makasih ne ilmunya.

    BalasHapus
  18. tutorial yang menarik kawan, sungguh beruntung saya bisa menambah ilmu di blog ini, meskipun bukan PERTAMAX :)

    BalasHapus
  19. cuman buat webkit yah, eheheee ...
    keren yah jadinya, sip sipp, makasih infonya ^^

    BalasHapus
  20. ta coba dlu tipsnya sob..
    moga aja berhasil .... :)

    BalasHapus
  21. belom sempet2 edit tempe nih ane,, lagi males oprek2,, =)) =))

    BalasHapus
  22. lama tak kunjung sini...tips lainnya saya tunggu y sob? :D

    BalasHapus
  23. selalu tambah pengetahuan jika rajin-rajin berkunjung di sini !

    BalasHapus
  24. To deeahzone : thanks banget deh sob supportnya :) thanks juga untuk sharing disana deeahzone :)
    To bopfive5 : hehehehe bener kan? :D mantap sob :D +n buat apaan wkwowk
    To earth-inside : ya buat jaga jaga aja kalau pengunjung datang kan menyenangkan pengunjung :)
    To Liandri eko : okkkee sob :)
    To BlogS of Hariyanto : hehehe tunggu apa lagi sob :D tanncceepp! =))
    To Ladida Cafe : jaga jaga lah kan lebih baik jika ada pengunjung yang datang menggunakan Google Chrome :))
    To blog alternativ : thanks gan :>
    To Shinobi : pakai Google Chrome yah :D
    To Rama88 : hahaha suatu saat boleh kok kata siapa gak booleh :D
    To deny : tips ini aja blm di baca udah minta yang lain :P
    To Prapatan Kertek : hehehehe namanya belajar ya gitu lah :))
    To Bayu : ahhhh bisa aja lu gan :))

    BalasHapus
  25. pertamaxx
    keren banget, jadi tambah ilmu baru saya sob

    BalasHapus
  26. pakkk manteeebbb....Sobb dalangnya :D ee..salah ,,Infonya..thanks banget

    BalasHapus
  27. Ane juga pake nieh,. hehhe,.

    BalasHapus
  28. To Dunia Otan : hehehhe silahkan di cerna ilmunya sob :)
    To binkbenk : pas mantap? :)) wkwokwow thanks sob supportnya
    To Art : hehhee kalau berkenan silahkan :)

    BalasHapus
  29. Keren bro ... salam kenal yach ..

    BalasHapus
  30. sangat keren ya bisa ga ya aku hehehe

    BalasHapus
  31. Terimakasih mas tutorialnya..
    Tambah pinter aja mas satu ini..
    Hehehe..

    BalasHapus
  32. ditunggu post terbarunya sobat...
    Scroolbarnya keren sobat...

    BalasHapus
  33. pastinya sob.. kan saya skrg udah beralih ke chrome ... :D

    BalasHapus
  34. wah keren mas, tapi pake firefox 7 udah bagus kok model scroller nya :)

    BalasHapus
  35. To Dhafian : salam kenal juga sob :)
    To anisayu : pasti bisa! (hem*fiton) wkowkow :))
    To Kopiah Putih : wahhhhh agan bisa aja sih :P
    thanks ya :)
    To Asis Sugianto : oke sbat sabar sabar :)
    To Shinobi Caemk : wahhhh bagus kalau begitu :D ane juga dikit dikit lagi ingin beralih :D
    To DAW-XP : hehehhe itu model standar :D

    BalasHapus
  36. coba dulu ah..
    sambil mau dunlud chrome :P

    BalasHapus
  37. wah ternyata bisa di rubah ya , baru tau nih nanti ane coba

    BalasHapus
  38. Tengok blog Faris dengan Chrome..... :>
    Jadi pengin Bikin ginian :D

    BalasHapus
  39. Dapat ilmu baru lagi nih di sini...Makasih
    Ijin pakai kode perintah ke atas dan ke bawah punya sobat seperti disamping kanan itu loh

    BalasHapus
  40. Aku dulu pasang scrollbar di kotak komentarku, tapi setelah templatenya aku ganti, aku tak lagi pasang scrollbar. Alasannya ada 2 :
    1. Aku lupa bagaimana cara memasang scrollbar itu dulu
    2. Aku tak bisa melihat kotak komentarku secara utuh via HP karena tertutup scrollbar.

    BalasHapus
  41. Wiiiih... keren sob... aku mau coba ah... langsung tak praktekin... jadi gak ngantuk nih setelah baca artikel ini...

    bener2 mantaaaaaaaaaaabbbbb...

    heheheh :))

    BalasHapus
  42. mampir disini lagi sob sambil baca2

    BalasHapus
  43. kagak pake safari sob, hehe.. :D

    BalasHapus
  44. hm,, nyaris hampir gak ngudeng saya sobat,,tapi akan mencoba nya,, gak ingin kalah dgn blog2 lain..

    BalasHapus
  45. Tambah hari semangkin mantap,siplah.
    Thanks infonya sob,happy blogging ajah.

    BalasHapus
  46. Wah gagal pertamax maning ehheehe.Sob ane siap izin terjun dulu ya untuk aplikasi info ispiratif dari ente ^_^

    BalasHapus
  47. mantabz share ilmunya mas bro...

    BalasHapus
  48. hhaha... beralih aja sob.. kayaknya chrome lbh ringan dhe' dibanding mozilla ...
    sampe'' mozilla saya, ga pernah saya pake lagi .... =))

    BalasHapus
  49. Wuiih,, Scrolbarnya Kereen BGT tuh Boss!!
    Kirain tadinya ada widget tersembunyi gitu,,, kok diklik gak fungsi!!!
    Hwehehee... ketipu!!
    Kalo Scrollnya kayak gitu jadi unik Boss!!!
    MANTAAFFF.....

    BalasHapus
  50. To A-NX : jiahh blm punya chrome ya?? :P
    To Mbah Qopet : bisa sob tapi hanya Google Crome sama Safari yang bisa lihat :P
    To aku mau gratisan : hehehehe silahkan di buat sendiri :D
    To cardiacku : wkowkwow iya sob langsung aja sebut "scrollbar" wkowk :))
    To catatan kecilku : dipasang lagi aja sob biar tambah machi :)) 1.ini udah ada sob scriptnya :)) 2.kenapa harus pakai handphone sob? yang ngeliat kan bukan diri sendiri aja sob, tetapi kan pengunjung juga menikmati.
    To AbduGreen : hehehehe sob itu yang background:none; di ganti jadi warna aja sob, coz kalau none itu LAG
    To Liandri eko : oke sob silahkan di baca :))
    To Catatan Ngeblog : sip om :D
    To dhenok habibie : yaudah chrome aja, :))
    To al kahfi : hehehhehe oke sob :D
    To Er'end : oke sob :D sama sama aja nih reaksinya :P
    To Bisnis Online Blog : wuuuhh jauh banget dari pertamax :P oke sob silahkan terjun (ane gak ngerti maksudnya :)) )
    To @ Warkop Aremania : oke mas bro thanks fot coming mas bro :)
    To Shinobi Caemk : wkwokwowk ane juga ngerasaain hal yang sama sob :))
    To indoindesign : thanks!!

    BalasHapus
  51. To Bagi bagi blog : kwkwkwkw seperti / mirip widget ya? :)) ketipu ente itu scrollbar :P

    BalasHapus
  52. nampang dulu ah di sini , scroll komennya keren tuh :p

    BalasHapus
  53. wew scrollbar nya 3D bro hehehe..keren dah..ini templatenya ciamik dah..^^, kok bisa ea gak ada kolom sampingnya ckkcck..wah baca2 dulu nih bisi neu caranya disini...

    BalasHapus
  54. Tips yang menarik dan Masih di coba untuk dicerna Sob....kalo dah detil begini dah agak lemot otak gue nerima...anyway, nice share and happy blogging!

    BalasHapus
  55. makanya sebelum terlambat, beralih aja ... =)) entar menyesal lo' ... hhaha :D

    BalasHapus
  56. To Mbah Qopet : hehehehe semua scroll sama sob di blog ini :P
    To Venomia Blog : hehehehe :) bisa di terapkan di blog kok sob scrollnya :) soal gak ada adi kolom itu bisa di ilangin kok (sidebar kan?) :)
    To Iskaruji dot com : jiiaahh kan udah ada contohnya bro :) hehehehe
    To Shinobi Caemk : hahahaha tapi tampilan blog ane kalau di GC beda banget sob :((

    BalasHapus
  57. wahh langsung saya prakktekkan komandan hehehehe

    BalasHapus
  58. To Edy Sant : wahh silahkan di praktekan :D hihihihi

    BalasHapus
  59. Ternyata scroll bisa di edit sesui keinginan juga, saya kira sudah baku seperti itu.

    BalasHapus
  60. yups. jadi tambahan satu pengetahuan lagi tentang Edit Scrollbar, inilah untungnya kalau sering berkunjung kesini. thk dah dishare

    BalasHapus
  61. wuih telat, gan. gpp kedua. triknya bolh dicoba tuh

    BalasHapus
  62. wah mana neh post barunya :D ?

    BalasHapus
  63. mantab,sob tips nya,sutelah berapa lama ngblog,baru disini ketemu tips yang mantab ni,

    BalasHapus
  64. mana nih yg barunya,, :P :P

    BalasHapus
  65. sama dunk kalo gitu sob,... blog saya juga beda tampilannya kalo pake mozilla.. tapi cuma dikit yg beda ... :D

    BalasHapus
  66. boleh juga nih ntar deh aku coba

    BalasHapus
  67. To Bengkel Bangun : dulunya baku, semakin berkembangnya ilmu pengetahuan semakin canggih :)
    To Wisata Murah : hehehehe sering sering datang kemari ya :)
    To rusydi hikmawan : silahkan di cobain :)
    To Dayz : sabar lah sob :) ane lagi sibuk banget nih
    To Kehidupan : hahaha masa sih sob ? :))
    To Rama : sabar dunk :((
    To Shinobi : iya dikit dapi cepetan Google Chrome gitu :-o
    To Zh!nTho : jgn ntar ntar ntar, ntar lupa lagi :P

    BalasHapus
  68. belum bisa ganti nih , kalo dah sempat baru ganti.

    BalasHapus
  69. To Mbah Qopet : wkwokw masa sih ? :P wkowk keep happy bloggin aja degh :)

    BalasHapus
  70. keren jg mas, tp buat berat yo lebih baik jgn deh

    BalasHapus
  71. To Cek Info : sensitif banget sama berat :P huahaha orang css masa bikin berat. semua kode aja sob di bilang berat :P

    BalasHapus
  72. hadir lagi ngafalin rumus. hehehehe thnks sob happy blogging

    BalasHapus
  73. hmm belum ada yg baru ne sob.
    liat artikel yang lain saja sapa tau ada yg saya butuhkan.

    BalasHapus
  74. wah rame ya di sini....... saya ikut gabung...

    BalasHapus
  75. ajibbb,, sayang ane pake mozilla ga da live demonya

    BalasHapus
  76. kayaknya lebih cepet motornya V. Rossi dhe sob ... =)) =))

    BalasHapus
  77. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  78. To Wisata Murah : hahahaha hadir juga om :)
    To Liandri : liat artikel lainnya saja dahulu :P
    To obinhut : silahkan ikut meramaikan disini :)
    To topjer : ya pakai google chrome lah :D
    To shinobi : wkwkwkwk kok jadi rossi :))

    BalasHapus
  79. Terima Kasih atas undangannya sob :), kalo untuk widget gmana scriptnya sob :D. Bila dah posting tentang scripnya. kasih linkknya ya :p hehehe makasih

    BalasHapus
  80. To Wisata Murah : itu udah ada bro updatenya :|
    To Deganshah Putra : ini scrollbar untuk semua yang menggunakan Scrollbr termasuk widget :))

    BalasHapus
  81. wow pantes gk kerja di mozilla

    BalasHapus
  82. To Nurmayanti Zain : khusus safari dan google chrome saja mba nurmayanti :)

    BalasHapus
  83. Oh gitu sob :D, terima kasih nanti saya coba :)

    BalasHapus
  84. To Deganshah Putra : iya sob begitu hehehehe silahkan di cobain aja :)

    BalasHapus
  85. gan follow ganti ea,,,saia sudah follow blog agan,trma ksih

    BalasHapus
  86. Ane masih love sama firefox ;) thanks dhh buat infonya soob.. lumayan dapat catatan baru :D

    BalasHapus
  87. To rockmanticks : oke gan segera meluncur ke blog sobat. tetapi di google chrome blog sobat mengandung VIRUS gan :( ane takut banget masuk kesitu :(
    To Se Avancee : oalah :d tetapi buat pengunjung masa tega? :D

    BalasHapus
  88. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  89. Sob... tapi scrolnya cuma support di google chroome aja sob... gimana caranya ya,, biar bisa support di browser yang lainyya???

    BalasHapus
  90. To Abdu Green : itu memang salah satu fitur dari google chrome. atau browser lain kurang menerima script scollbar itu

    BalasHapus
  91. OWWWWH,,, JADI GTCUUUUU......
    Tapi bener2 keyennnn sob.... beneran dech,,,

    BalasHapus
  92. To Rama : huahahaha udah ane tebak pasti ente yang dapet :D =))

    BalasHapus
  93. wawww..amazing..wonderfull..crazy..very good..mantaf...n top margotop...(lebays koment)hahaha

    coba coba dulu yah..

    BalasHapus
  94. To yudee : semuanya saja sob di sebutin :D o iya delicious blm! :))

    BalasHapus
  95. THANKS berat sob..dah jadi..tpi klo mau lengkungin kotak label atau blog di crome..bgaimana?

    BalasHapus
  96. To yudee : ada kok sob nih :) http://farixsantips.blogspot.com/2010/12/garis-lengkung-border-radius.html

    BalasHapus
  97. keren mas bro...
    saya pengen belajar bayak dari ente...buat ebook donk...heheh

    BalasHapus
  98. To anak ganteng : hehehehe... ane ingin membuat ebook tetapi sulit juga membuatnya

    BalasHapus
  99. Mantep gan infonya...sangat bermanfaat nii buatku gan....hehey

    BalasHapus
  100. Mantab nih sob. .
    thanks infonya :)

    BalasHapus
  101. ternyata tidak rumit juga
    terima kasih

    BalasHapus
  102. gmn cara untuk bisa jalan di firefox ya?

    BalasHapus