Modifikasi scrollbar di blog

Pada postingan kali ni saya akan membahas cara untuk menambahkan scrollbar di widget pada blog, entah pada blogroll ataupun yang lainnya. Dan caranya tidak terlalu rumit. Berikut  saya jelaskan langkah-langkah untuk membuat scroll di widget blogroll:

- Log in di blog anda.
- Pilih menu Rancangan -> Edit HTML.

- Download template untuk berjaga-jaga.
- Beri centang pada Expand Template Widget.
- Cari kata </head>
- Pastekan script berikut tepat diatasnya.

<style type='text/css'>
#scrollbar{margin:0; width:100%; height:293px;}
#scrollbar .customScrollBox{position:relative; height:303px; overflow:hidden;}
#scrollbar .customScrollBox .container{position:relative; width:90%; top:0; float:left;}
#scrollbar .customScrollBox .content{clear:both;}
#scrollbar .dragger_container{position:relative; width:0px; height:294px; float:left; margin:2px 0 0 10px; border-left:1px solid #4EBAFF; cursor:pointer;}
#scrollbar .dragger{position:absolute; width:20px; height:30px; background:#4EBAFF; margin-left:-10px; text-align:center; overflow:hidden; cursor:pointer; background-position:center;}
#scrollbar .dragger_pressed{position:absolute; width:20px; height:30px; background:#4EBAFF; margin-left:-10px; overflow:hidden; cursor:s-resize;}
</style> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
<script src='http://manos.malihu.gr/tuts/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://manos.malihu.gr/tuts/jquery.mousewheel.min.js' type='text/javascript'/>
<script src='http://manos.malihu.gr/tuts/jquery.mCustomScrollbar.js' type='text/javascript'/> 

- Setelah itu cari kata Blogroll (nama dari widget yang akan diberi scroll).
- Pastekan script tepat diatas <div class='widget-content'>

<div id='scrollbar'>
<div class='customScrollBox'>
<div class='container'>
    <div class='content'>

 

- Scroll kebawah dan pastekan script berikut tepat diatas </b:includable>

</div>
</div>
<div class='dragger_container'>
    <div class='dragger'/>
</div>
</div>
</div>
<noscript>
<style type='text/css'>
#scrollbar .customScrollBox{overflow:auto;}
#scrollbar .dragger_container{display:none;}
</style>
</noscript>

- Klik pratinjau lebih dulu jika mungkin ada error, jika tidak ada simpan template.
- Pilih menu Elemen Laman, buat widget baru tipenya HTML/Javascript.
- Pastekan kode dibawah ini

<script>
$(window).load(function() {
mCustomScrollbars();
});
function mCustomScrollbars(){
$('#scrollbar').mCustomScrollbar('vertical',400,'easeOutCirc',1.05,'fixed','yes','no',0);
}
$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}
function LoadNewContent(id,file){
$('#'+id+' .customScrollBox .content').load(file,function(){
mCustomScrollbars();
});
}
</script>

- Simpan widgetnya lalu simpan templatenya dan lihat perbedaannya.

Penjelasan bagian CSS

#scrollbar{margin:0; width:100%; height:293px;}

Menentukan ukuran blogroll

#scrollbar .customScrollBox{position:relative; height:303px; overflow:hidden;}

Menentukan tinggi scrollbar, buat height lebih besar dari height blogrollnya agar ketika scrollnya ditarik kebawah tidak ada bagin scroll yang hilang

#scrollbar .customScrollBox .container{position:relative; width:90%; top:0; float:left;}

Menentukan lebar konten, buat widthnya lebih kecil dari blogrollnya agar scrollbar tampil utuh

#scrollbar .dragger_container{position:relative; width:0px; height:294px; float:left; margin:2px 0 0 10px; border-left:1px solid #4EBAFF; cursor:pointer;}

Mengatur baris di bagian scrollbar, untuk mengganti warnanya tinggal ganti #43BAFF dengan kode warna pilihan. Untuk megatur lebar garis ganti 1px menjadi bilangan yang diinginkan

#scrollbar .dragger{position:absolute; width:20px; height:30px; background:#4EBAFF; margin-left:-10px; text-align:center; overflow:hidden; cursor:pointer; background-position:center;}

Mengatur tubuh scroll, untuk mengganti warnanya tinggal ganti #43BAFF dengan kode warna pilihan. Untuk mengganti ukuran dari scroll ganti width:20px; height:30px; dengan lebar dan tinggi yang anda inginkan. Jika anda sudah mengganti lebar dari scrollnya ganti juga margin-left:-10px; menjadi setengah dari lebar yang anda tentukan, misalnya jika widthnya diganti menjadi 10px maka margin-leftnya diganti -5px. Ini berguna agar garis dari scrollbarnya menjadi tepat ditengahnya

#scrollbar .dragger_pressed{position:absolute; width:20px; height:30px; background:#4EBAFF; margin-left:-10px; overflow:hidden; cursor:s-resize

Mengatur tubuh scroll ketika diklik, untuk mengganti warnanya tinggal ganti #43BAFF dengan kode warna pilihan.Untuk mengganti ukuran dari scroll ganti width:20px; height:30px; dengan lebar dan tinggi yang anda inginkan. Jika anda sudah mengganti lebar dari scrollnya ganti juga margin-left:-10px; menjadi setengah dari lebar yang anda tentukan, misalnya jika widthnya diganti menjadi 10px maka margin-leftnya diganti -5px. Ini berguna agar garis dari scrollbarnya menjadi tepat ditengahnya

Selamat Mencoba! 

Related Posts :

Posted in: Blog