MANGGANTI BACKGROUND DAN WARNA SCROLLBAR

MANGGANTI BACKGROUND DAN WARNA SCROLLBAR
saya akan mencoba untuk sedikit berbagi tentang tutorial mangganti background dan warna scrollbar

karena kemaren itu ada salah satu sobat kita yg tanya gimana cara ganti warna scrollbar di blogger contoh nya di bawah ini scrollbar nya di ganti dengan warna hijo:
CONTOH DEMO :

SCROLLBAR
Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar
Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar
Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar

SCROLLBAR
Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar
Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar Contoh demo mangganti background dan warna scrollbar

• CARA PEMBIKINAN:

Sobat masukin css di bawah ini di atas  ]]></b:skin>

Copy Codeprint?

1. #scrollbar1 { width: 800px; clear: both; margin: 20px 0 10px; }  
2. #scrollbar1 .viewport {background:#000700;border:solid 2px  #000;-moz-box-shadow:0 0 2px #002300;width: 780px; height: 200px; overflow: hidden; position: relative; }  
3. #scrollbar1 .overview {list-style: none; position: absolute; left: 0; top: 0; }  
4. #scrollbar1 .thumb .end,#scrollbar1 .thumb {background: -moz-linear-gradient(top, #00ff00, #000, #00ff00); background: -webkit-gradient(linear, left top, left bottom, from(#00ff00), to(#1153c0));-moz-border-radius: 4px;-webkit-border-radius: 4px;-moz-box-shadow: 0px 0px 10px #00ff00;}  
5. #scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }  
6. #scrollbar1 .track {background:#000700;border:solid 2px  #000;-moz-box-shadow:0 0 2px #002300;-moz-border-radius: 5px;height: 100%; width:13px; position: relative; padding: 0 1px; }  
7. #scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }  
8. #scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }  
9. #scrollbar1 .disable{ display: none; }  
10.       

Dan masukin Jquery di bawah ini di atas </head>

Copy Codeprint?

1. <script type="text/javascript" src="http://pandet-pandet.googlecode.com/files/jquery-1.4.2.min.js"></script>  
2. <script type="text/javascript" src="http://pandet-pandet.googlecode.com/files/jquery.tinyscrollbar.min.js"></script>  
3. <script type="text/javascript">  
4.     $(document).ready(function(){  
5.         $('#scrollbar1').tinyscrollbar();  
6.     });  
7. </script>      

Dan ini kode html untuk pemanggilannya silahkan sobat masukin di edit html :

Copy Codeprint?

1. <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">    Masukin apa saja di sini  
2. </div></div></div>