Cara Merubah Scrollbar pada Blog

Cara Merubah Scrollbar pada Blog - Cara Merubah scrollbar pada blog biasa diperlukan saat ingin menyesuaikan dengan desain dan warna blog. 
sumber : http://blog.kangismet.net/

Tutorial tentang cara merubah atau mengganti scrollbar blog sebenarnya sudah banyak dijumpai, namun kebanyakan menggunakan CSS seperti ini

::-webkit-scrollbar{width:6px;background:#444}
::-webkit-scrollbar-thumb{background-color:#222;border-radius:3px}

Dengan menggunakan CSS di atas, hanya akan support pada browser dengan komponen dasar WebKit seperti Safari, Chrome, browser iOS, Android dan Blackberry. Tetapi tidak support dengan browser lainnya seperti Mozilla, Opera dll.

Karena penggunaan CSS tersebut tidak support dengan semua browser, maka saya tawarkan penggunaan jQuery sebagai alternatifnya yaitu NiceScroll

Penggunaan NiceScroll
Untuk menggunakan NiceScroll, simpan kode ini di atas </head>

<script src='https://kang-is.googlecode.com/svn/trunk/javascript/nicescroll.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(
  function() { 
    $("html").niceScroll({});
  }
);
//]]>
</script>

Dengan menggunakan kode di atas, maka otomatis scrollbar default akan berubah, namun hanya muncul ketika mouse diarahkan ke samping kanan blog. nah jika ingin memunculkan scrollbar secara permanen, maka perhatikan kode pada baris ke 6, tambahkan kode cursoropacitymin:1 sehingga menjadi seperti bawah ini  

$("html").niceScroll({cursoropacitymin:1});

Masih banyak pengaturan lainnya, silahkan teman-teman lihat di web pemilik NiceScroll ini. Disini hanya di share beberapa pengaturan yang penting saja : 

background:"#ddd" untuk merubah background (edit ddd)
cursorcolor:"#808080" untuk merubah warna kursor (edit 808080)
cursorborder:"1px solid #565656" merubah warna garis pinggir kursor (edit 565656)

sehingga kode lengkap untuk baris no 6 adalah :

$("html").niceScroll({cursoropacitymin:1,cursorcolor:"#808080",cursorborder:"1px solid #565656",background:"#ddd"});

Untuk menerapkan terhadap elemen tertentu, misal sobat membuat elemen dengan class myscroll, pada HTMLnya sobat harus menentukan tinggi atau height, menambah kode overflow:hidden dan tambahkan jarak pinggir kanan padding-right:17px pada CSS terpisah atau inline (langsung pada HTML) seperti ini :

<div class='myscroll' style='height:200px;overflow:hidden;padding-right:17px'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti.
</div>

langkah selanjutnya tinggal menambahkan kode sesuai selektor pada jQuery baris ke 6 tadi. sehingga menjadi seperti ini :

$("html, .myscroll").niceScroll({cursoropacitymin:1,cursorcolor:"#808080",cursorborder:"1px solid #565656",background:"#ddd"});

Untuk menambahkan selektor, tinggal tambah pada jQuery di atas. Lebih mudah bukan?

Optional

Untuk browser, setelah penggunaan NiceScroll ini akan menampilkan default scrollbar terlebih dahulu, baru kemudian diganti dengan NiceScroll setelah JavaScript tereksekusi. Untuk blog yang lambat akan terlihat perubahannya. Sebagai pilihan, agar scrollbar tidak ditampilkan, maka tambahkan overflow:hidden pada body.

body {
....
....
....
overflow:hidden
}