Modifikasi Scroll Dengan CSS

Custom Scroll Yang Dapat Dimodifikasi Dengan CSS - Seringkali gadget kita terlalu panjag sehingga menghabiskan area pada blog. Kita bisa mengakalinya dengan menambahkan scroll untuk gadget yang terlalu panjang (baca: Konsultasi Blog Tentang Scroll). Tapi masalah lain muncul karena kita semua tahu, desain scroll default jelek banget. Iya gak sih? Padahal tidak semua browser support modifikasi CSS scroll

scroll default

scroll custom, bisa di modifikasi sesuai selera

Nah, jangan khawatir karena kemarin muter-muter forum Google dapat banyak referensi scroll dengan javascript ataupun jquery yang maknyus dan lancar di semua browser. Tapi dari sekian banyak pilihan, scroll dari Jools yang paling mudah instalasinya.

Tambahkan Script berikut di atas </head>

<script src="http://www.jools.net/javascripts/prototype.js" type="text/javascript"></script>
<script src="http://www.jools.net/javascripts/slider.js" type="text/javascript"></script>
<script src="http://www.jools.net/javascripts/scroller.js" type="text/javascript"></script>

- Lebih baik scriptnya di host sendiri, biar lebih cepet, juga untuk jaga-jaga kalau suatu saat link script di atas dihapus Jools, kalau sudah di host sendiri kan aman.
- Referensi:
- Host Javascript/CSS di Google Drive
- Membuat Javascript Milik Anda Pribadi

Tambahkan CSS berikut di atas ]]></b:skin>

.scroll-track{
 height:10px;
 width:10px;
 background:black;
}

.scroll-handle{
 border: 1px solid black;
 height:10px;
 width:10px;
 background:#5B207B;
 cursor:pointer;
}

scroll-track adalah jalur scrollnya sedangkan scroll-handle adalah tombol dragablenya. Edit sesuai selera.

Pemasangan Gadget
Kemudian untuk gadget yang ingin diberi scroll silahkan gunakan kode berikut ini:

<div style="height:165px; overflow:hidden" class="makeScroll">
Kode HTML Gadget/Tulisan
</div>

Silahkan mencoba ya, semoga bermanfaat blogger...

Referensi:
Jools - Custom Scroll Bar

Item Review: Scroll CSS, Scroll Bisa Dimodifikasi Dengan CSS