onMouseOver Scroll Efek

# Login Blogger --> Tata Letak --> Edit HTML -->
# Download Template Lengkap --> Simpan di Folder PC
# Lanjutkan dengan mencari KODE ]]></b:skin> dan KODE
</body>.
# Copy paste CSS dan javascript : Simpan CSS di atas KODE ]]></b:skin> dan Javascript di atas KODE </body>
# . KLIK Simpan Template untuk menyudahi proses penyimpanan KODE dan script

Kode CSS
#SBeffect{
width:500px; /* atau width:auto; */
background:#000 url(http://i48.tinypic.com/n5hilv.jpg);
padding:18px 8px;
border:10px ridge #660000;
font-size:12px;
font-family:verdana;
font-weight:700;
color:#FFCC66;
overflow-x:scroll;
overflow-y:scroll;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}
#SBeffect:hover{
opacity:1.0;
-moz-opacity:1.0;
filter:alpha(opacity=100);
}

Kode JavaScript
<script language="JavaScript1.2">
<!--
/* onMouseover Scrollbar Effect Plus */
function scrollBar(line,face,theme)
{
if (!line||!face)
{
line=null;
face=null;
switch(theme)
{
case "blue":
var line="#78AAFF";
var face="#EBF5FF";
break;
case "orange":
var line="#FBBB37";
var face="#FFF9DF";
break;
case "red":
var line="#FF7979";
var face="#FFE3DD";
break;
case "green":
var line="#00C600";
var face="#D1EED0";
break;
case "neo":
var line="#BC7E41";
var face="#272965";
break;}}
with(document.body.style){
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="red";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#a9a9a7";}}
/* [Pointer coordinates catcher] */
function colorBar(){
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w||y-3>h) scrollBar('#000080','#193d17');
else scrollBar(null,null,"neo");
}
if (document.all){
scrollBar(null,null,"neo");
document.onmousemove=colorBar;
}
function offscreen(){
scrollBar(null,null,"neo");
}
document.onmouseout=offscreen;
//-->
</script>

Gunakan KODE seperti di bawah ini pada saat akan menggunakan fungsi onMouseover Scrollbar Effect Plus

<div id="SBeffect" style="height:300px;">
Teks dan image yang akan diterbitkan (posting).
</div&gt;

NB
1. Lebar scrollbar dapat di atur/rubah dengan merubah nilai width:500px; (#SBeffect{). Bisa juga menggunakan width:auto; .
2. Supaya lebih mudah saat menyesuaikan dengan banyaknya hal yang akan di terbitkan dalam scrollbar, maka tinggi scrollbar diatur dalam KODE HTML di bagian body atau ruang posting (height:300px;).
3. Warna pada scrollbar dapat diatur dengan merubah KODE warna yang terdapat dalam javascript.
4. Scrollbar Effect ini hanya kompatibel di Internet Explorer

Sample

Enter your email address:

Delivered by FeedBurner

SAlam Bloger