Tampilan Scrollbar Blog dengan Efek jQuery Keren

Tampilan Scrollbar Blog dengan Efek jQuery Keren - Pada Artikel Kali ini Saya Mau menjelaskan bagaimana cara membuat Tampilan Scrollbar Blog dengan Efek jQuery Keren. Pada Artikel Sebelumnya Diblog ini saya juga pernah menerangkan bagaimana cara merubah scroll bar blog agar lebih keren. namun itu bekerja pada browser tertentu.
Namun kali ini saya akan me-Share bagaimana Cara merubah Tampilan Scrollbar Blog dengan Efek jQuery Keren. Dan Cara ini saya Ambil Dari Blog Kang Ismet.

Untuk demonya Silahkan Klik Tombol Dibawah

Demo

Untuk Cara penggunaannya Silahkan Simak Aja Tutor Dibawah ini..

• Pertama Copy Kode jQuery ini. Dan Simpan diatas </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 kode di atas, maka otomatis scrollbar default akan berubah, namun hanya muncul ketika mouse diarahkan ke samping kanan blog. Untuk memunculkan scrollbar secara permanen, maka perhatikan kode pada baris ke 6, tambahkan kode cursoropacitymin:1 menjadi

$("html").niceScroll({cursoropacitymin:1}); Masih banyak pengaturan yang lainnya, silahkan sobat lihat di web pemilik NiceScroll ini. Disini saya hanya 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'> Isi Elemen Nya </div>

langkah selanjutnya tinggal menambahkan kode sesuai selektor pada jQuery baris ke 6 tadi. 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?

• Agar lebih mantap Paste Kode Dibawah Ini tepat Pada element css Body

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

Sekian Artikel  Tampilan Scrollbar Blog dengan Efek jQuery Keren Semoga Bermanfaat.

Sumber : 

http://areaaperta.com/nicescroll/

http://blog.kangismet.net/2013/12/merubah-tampilan-scrollbar-dengan-jquery.html