Custom Scrollbar untuk Blogger dengan Tiny ScrollBar
- Kali ini saya akan berbagi custom scrollbar dengan jQuery. Tentunya
sesuai dengan judul, custom scrollbar ini berjalan di berbagai browser.
Banyak plugin jQuery untuk custom scrollbar ini, diantaranya : Tiny
Scrollbar, FleXcroll, VertiScroll, jScrollPane, Perfect Scrollbar, dll.
Saya sendiri menggunakan FleXcroll untuk notifikasi komentar. Namun
saat ini saya akan membuat tutorial cara membuat custom scrollbar untuk blogger dengan Tiny Scrollbar, karena untuk penggunaan FleXcroll untuk banyak website harus menggunakan plugin berbayar.
Kelebihan Tiny Scrollbar diantaranya tidak merubah scrollbar standar dengan jQuery, melainkan membuat scrollbar sendiri. Berbeda dengan FleXcroll yang saya gunakan, sebelum jQuery tereksekusi, maka akan ditampiklan scrollbar standar. Tetapi, tentu saja ada kekurangan dan kelebihan apabila dibandingkan dengan yang lainnya.
Ada 3 step pemasangan yang harus sobat lakukan untuk memasang Tiny Scrollbar ini :
Kode HTML untuk Pemasangan Tiny Scrollbar
Nantinya sobat bisa membuat style baru dengan menambahkan CSS, jQuery pemicu dan kode HTML dengan
Kelebihan Tiny Scrollbar diantaranya tidak merubah scrollbar standar dengan jQuery, melainkan membuat scrollbar sendiri. Berbeda dengan FleXcroll yang saya gunakan, sebelum jQuery tereksekusi, maka akan ditampiklan scrollbar standar. Tetapi, tentu saja ada kekurangan dan kelebihan apabila dibandingkan dengan yang lainnya.
Ada 3 step pemasangan yang harus sobat lakukan untuk memasang Tiny Scrollbar ini :
Tiny Scrollbar Plugin
Simpan kode ini di atas</head>
<script src='https://kang-is.googlecode.com/svn/trunk/javascript/tinyscrollbar.js' type='text/javascript'/>
CSS
Simpan CSS ini di atas]]></b:skin>
atau </style>
#scrollbar1 { width: 100%; clear: both; margin: 20px 0 10px; } #scrollbar1 .viewport { width: 97%; height: 200px; overflow: hidden; position: relative; } #scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; } #scrollbar1 .thumb .end, #scrollbar1 .thumb { background-color: #666; } #scrollbar1 .scrollbar { background-color: #d3d3d3; position: relative; float: right; width: 6px; border-radius:3px } #scrollbar1 .track { background-color: #d3d3d3; height: 100%; width:6px; position: relative; padding: 0; border-radius:3px} #scrollbar1 .thumb { height: 20px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; border-radius:3px} #scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 6px; } #scrollbar1 .disable{ display: none; } .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } #scrollbar2 { width: 251px; margin: 20px 0 10px; } #scrollbar2 .viewport { width: 236px; height: 125px; overflow: hidden; position: relative; } #scrollbar2 .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0; } #scrollbar2 .overview img{ float: left; } #scrollbar2 .scrollbar{ background-color: #d3d3d3; position: relative; margin: 0 0 5px; clear: both; height: 6px;border-radius:3px } #scrollbar2 .track { background-color: #d3d3d3; width: 100%; height:6px; position: relative;border-radius:3px } #scrollbar2 .thumb { background-color: #666; height: 6px; cursor: pointer; overflow: hidden; position: absolute; left: 0; border-radius:3px} #scrollbar2 .thumb .end{overflow: hidden; height: 6px; width: 5px;border-radius:3px} #scrollbar2 .disable { display: none; } .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
jQuery Pemicu
JQuery ini untuk mengaktifkanid
tertentu, alam hal ini scrollbar1
dan scrollbar2
. Simpan kode di atas </body>
<script type='text/javascript'> //<![CDATA[ $('#scrollbar1').tinyscrollbar(); $('#scrollbar2').tinyscrollbar({ axis: 'x'}); //]]> </script>
Cara Pemasangan
Untuk pemasangan saya gunakan 2 custom scrollbar yaitu Vertical dan Horizontal seperti pada demo. Untuk vertical dengan#scrollbar1
dan Horizontal dengan #scrollbar2
Kode HTML untuk Pemasangan Tiny Scrollbar
<div id="scrollbar1"> <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> <div class="viewport"> <div class="overview"> Isi yang akan discrol di sini </div> </div> </div>
Nantinya sobat bisa membuat style baru dengan menambahkan CSS, jQuery pemicu dan kode HTML dengan
id
yang berbeda.
ConversionConversion EmoticonEmoticon