Tutorial Blog : 3 Garis Putus2 Ikut Cursor

anyeong semua blogger ! dan selamat malam ! dah dinner ? dah ? bagos .
dah lama nua tak buat tutorial kan ? okey, kali ni nua buat tutor yg special punye. baru terjumpa tadi. mungkin masih tiada org yg belom tahu tutor ni. ha ! sebelom tu, nampak tak 3 garis titik2 yg ikut cursor blog ni tu? cute tak? tak? hmmm. nk bagitau yg tu la tutor utk kali ni. nampak unik kan?
tapi code untuk tutor amat panjang ! jadi awas ! copy betol2 tau !
mula2, pergi ke Design > Page Elements > add Gadget > HTML

copy semua code dibawah ! kemudian paste kan di kotak HTML tu okey? yg telah dihitamkan tu warna titik2 tu. ada 3 semua skali. klau nk tukar boleh. ni code warna : klik
lepas copy paste, save la. klau tak jadi bagitau nua okey ? ingat ! copy BETOL2

<script language="JavaScript" type="text/javascript">

var xCol = "#660066";
var yCol = "#663399";
var zCol = "#3366CC";
var n = 6;   //number of dots per trail.
var t = 40;  //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
   var dims = (i+1)/2;
   d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
      +'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
      +'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
      +'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
      +'left:0px;width:'+dims+'px;height:'+dims+'px;'
      +'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
      +'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
      +'left:0px;width:'+dims+'px;height:'+dims+'px;'
      +'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
   if (d.documentElement &&
     typeof d.documentElement.clientWidth == "number" &&
     d.documentElement.clientWidth != 0)
     r = d.documentElement;
   else
   {
      if (d.body && typeof d.body.clientWidth == "number")
         r = d.body;
   }
}

function winsize()
{
   var oh,sy,ow,sx,rh,rw;
   if (domWw)
   {
      if (d.documentElement && d.defaultView &&
         typeof d.defaultView.scrollMaxY == "number")
      {
         oh = d.documentElement.offsetHeight;
         sy = d.defaultView.scrollMaxY;
         ow = d.documentElement.offsetWidth;
         sx = d.defaultView.scrollMaxX;
         rh = oh-sy;
         rw = ow-sx;
      }
      else
      {
         rh = r.innerHeight;
         rw = r.innerWidth;
      }
      h = rh;
      w = rw;
   }
   else
   {
      h = r.clientHeight;
      w = r.clientWidth;
   }
}

function scrl(yx)
{
   var y,x;
   if (domSy)
   {
      y = r.pageYOffset;
      x = r.pageXOffset;
   }
   else
   {
      y = r.scrollTop;
      x = r.scrollLeft;
   }
   return (yx == 0)?y:x;
}

function mouse(e)
{
   var msy = (domSy)?window.pageYOffset:0;
   if (!e) e = window.event;  
   if (typeof e.pageY == 'number')
   {
     my = e.pageY - msy + 16;
     mx = e.pageX + 6;
   }
   else
   {
     my = e.clientY - msy + 16;
     mx = e.clientX + 6;
   }
   if (my > h-65) my = h-65;
   if (mx > w-50) mx = w-50;
}

function assgn()
{
   for (j = 0; j < 3; j++)
   {
      dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
      dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
   }
   stp+=s;

   for (i = 0; i < n; i++)
   {
      if (i < n-1)
      {
         vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
         vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
         vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
      }
      else
      {
         vx[i].top = dy[0]; vx[i].left = dx[0];
         vy[i].top = dy[1]; vy[i].left = dx[1];
         vz[i].top = dy[2]; vz[i].left = dx[2];
      }
   }
   setTimeout(assgn,t);
}

function init()
{
   for (i = 0; i < n; i++)
   {
      vx[i] = document.getElementById("x"+(idx+i)).style;
      vy[i] = document.getElementById("y"+(idx+i)).style;
      vz[i] = document.getElementById("z"+(idx+i)).style;
   }
   winsize();
   assgn();
}

if (window.addEventListener)
{
   window.addEventListener("resize",winsize,false);
   window.addEventListener("load",init,false);
   document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
   window.attachEvent("onload",init);
   document.attachEvent("onmousemove",mouse);
   window.attachEvent("onresize",winsize);
}

</script>

<script language="JavaScript" type="text/javascript">
<!--
function NoRightClick(e)
{
   if(navigator.appName=="Netscape")
   {
      if(e.which==3||e.which==2)
      {
         return false;
      }
   }
   else
   {
      event.cancelBubble=true;
      event.returnValue=false;
   }
}

if(navigator.appName=="Netscape")
   window.captureEvents(Event.MOUSEDOWN)
document.oncontextmenu=NoRightClick;
window.onmousedown=NoRightClick;
// -->

m+15 + "px";



 // Decrease length by one



 lines[theline].length--;

 }

 }

 </script>