::TUTORIAL Effect Warna Bar Bergerak Di Background::

Assalamualaikum

Hye

ce lihat at blog ni skrg..

cantik kan effect tu..

nak buat??

Sini Ikut Saya

1. Log in > Dashboard > Design > Add A Gadget > Html/JavaScript

2. Copy dan paste pada ruang Html/Java scrip tadi

<script type="text/javascript">
// <![CDATA[
var border=50; // berapa lebar border
var effects=3; // jumlah effect dalam page
var speed=50; // kelajuan animation (nombor bawah lebih cepat)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)
/****************************
*1970s Groovy WebPage Effect*
*(c)2008-11 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
*MORE TUTORIAL AT http://syahminaahmad.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
var swide, shigh, boddie;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
  var i, d, s;
  boddie=document.createElement("div");
  s=boddie.style;
  s.position="fixed";
  s.backgroundColor="transparent";
  s.top="0px";
  s.left="0px";
  s.width="100%";
  s.zIndex="-1";
  i=document.body.style.backgroundColor;
  if (document.body.parentNode) {
    if (i) document.body.parentNode.style.backgroundColor=i;
    document.body.style.backgroundColor="transparent";
  }
  document.body.insertBefore(boddie, document.body.firstChild);
  set_width();
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
    s.width="100%";
    h[i]=Math.floor(Math.random()*shigh/2.5);
    h[i+1]=Math.floor(Math.random()*shigh/2.5);
    h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    s.top=h[i]+"px";
    s.bottom=h[i+1]+"px";
    s.position="absolute";
    s.borderColor=jazz();
    s.borderStyle="solid";
    s.borderWidth=border+"px 0px";
    s.backgroundColor=jazz();
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    else s.opacity=op;
    h[i+5]=s;
    boddie.appendChild(d);
  }
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
    s.height="100%";
    v[i]=Math.floor(Math.random()*swide/2.5);
    v[i+1]=Math.floor(Math.random()*swide/2.5);
    v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    s.left=v[i]+"px";
    s.right=v[i+1]+"px";
    s.position="absolute";
    s.borderColor=jazz();
    s.borderStyle="solid";
    s.borderWidth="0px "+border+"px";
    s.backgroundColor=jazz();
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    else s.opacity=op;
    v[i+5]=s;
    boddie.appendChild(d);
  }
  setInterval('groovy()', speed);
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
  var i;
  for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
 h[i+4]=h[i+2];
 h[i+2]=-h[i+3];
 h[i+3]=-h[i+4];
 h[i+5].backgroundColor=jazz();
}
    if (h[i]<-border && Math.random()<1/border) {
 h[i+2]=scat(h[i+3]);
 if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
 h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
 h[i+3]=scat(h[i+2]);
 if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
 h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
  }
  for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
 v[i+4]=v[i+2];
 v[i+2]=-v[i+3];
 v[i+3]=-v[i+4];
 v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
 v[i+2]=scat(v[i+3]);
 if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
 v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
 v[i+3]=scat(v[i+2]);
 if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
 v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
  }
}
window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
  boddie.style.height=shigh+"px";
}
// ]]>
</script>

3. Korang boleh tukar

 merah = berapa lebar border

 oren = jumlah effect dalam page

 biru = kelajuan animation (nombor bawah lebih cepat)

 hijau = kod warna *boleh cari kat sini

4. Save

dah siap..

selamat mencuba

-out-