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.