onMouseover Scrollbar Effect Plus: Panduan BloGGeR Cara Membuat Scroller

OnMouseover Scrollbar Effect Plus membuat komponen warna scrollbar berubah ketika mouse berada di atasnya. Pada saat bersamaan effect transparansi yang disertakan membuat semua yang berada di dalam scrollbar terlihat dengan sempurna karena hover yang disertakan melibatkan effect opacity. Menjadi sangat menarik karena semuanya seperti tersembul hanya pada saat orang tertarik untuk mengetahui apa saja yang tersimpan.

D E M O

Langkah pembuatan onMouseover Scrollbar Effect Plus

Amankan template sebelum memulai pengerjaan dengan cara :

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

KODE CSS onMouseover Scrollbar Effect Plus

#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);
  }

Javascript onMouseover Scrollbar Effect Plus

p

<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>

1. 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>

2. Catatan :
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 (IE)!!!