Objek berpusing di keliling mouse

Assalamualaikum ... Jom belajar toturial baru hee :) *actually lama dah dok dalam draft ni haa

1. Dari dashboard > design > add a gadget > HTML/javascript.

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript yang anda buka.

 style="height: 100px; width: 200px; overflow: scroll; background: <br>#ffffff;" onclick="this.focus();this.select()"><font color="#ff0000"><span class="fullpost"><br> <script language="JavaScript" type="text/javascript"><br> <br> var xCol = "#FF0000";<br> var yCol = "#FFFF00";<br> var zCol = "#0000FF";<br> <br> var n = 6; //number of dots per trail.<br> var t = 40; //setTimeout speed.<br> var s = 0.2; //effect speed.<br> <br> var r,h,w;<br> var d = document;<br> var my = 10;<br> var mx = 10;<br> var stp = 0;<br> var evn = 360/3;<br> var vx = new Array();<br> var vy = new Array();<br> var vz = new Array();<br> var dy = new Array();<br> var dx = new Array();<br> <br> var pix = "px";<br> <br> var strictmod = ((document.compatMode) &&<br> document.compatMode.indexOf("CSS") != -1);<br> <br> var domWw = (typeof window.innerWidth == "number");<br> var domSy = (typeof window.pageYOffset == "number");<br> var idx = d.getElementsByTagName('div').length;<br> <br> for (i = 0; i < n; i++)<br> {<br> var dims = (i+1)/2;<br> d.write('<div id="x'+(idx+i)+'" style="position:absolute;'<br> +'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'<br> +'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'<br> +'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'<br> +'left:0px;width:'+dims+'px;height:'+dims+'px;'<br> +'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'<br> +'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'<br> +'left:0px;width:'+dims+'px;height:'+dims+'px;'<br> +'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');<br> }<br> <br> if (domWw) r = window;<br> else<br> {<br> if (d.documentElement &&<br> typeof d.documentElement.clientWidth == "number" &&<br> d.documentElement.clientWidth != 0)<br> r = d.documentElement;<br> else<br> {<br> if (d.body && typeof d.body.clientWidth == "number")<br> r = d.body;<br> }<br> }<br> <br> function winsize()<br> {<br> var oh,sy,ow,sx,rh,rw;<br> if (domWw)<br> {<br> if (d.documentElement && d.defaultView &&<br> typeof d.defaultView.scrollMaxY == "number")<br> {<br> oh = d.documentElement.offsetHeight;<br> sy = d.defaultView.scrollMaxY;<br> ow = d.documentElement.offsetWidth;<br> sx = d.defaultView.scrollMaxX;<br> rh = oh-sy;<br> rw = ow-sx;<br> }<br> else<br> {<br> rh = r.innerHeight;<br> rw = r.innerWidth;<br> }<br> h = rh;<br> w = rw;<br> }<br> else<br> {<br> h = r.clientHeight;<br> w = r.clientWidth;<br> }<br> }<br> <br> function scrl(yx)<br> {<br> var y,x;<br> if (domSy)<br> {<br> y = r.pageYOffset;<br> x = r.pageXOffset;<br> }<br> else<br> {<br> y = r.scrollTop;<br> x = r.scrollLeft;<br> }<br> return (yx == 0)?y:x;<br> }<br> <br> function mouse(e)<br> {<br> var msy = (domSy)?window.pageYOffset:0;<br> if (!e) e = window.event; <br> if (typeof e.pageY == 'number')<br> {<br> my = e.pageY - msy + 16;<br> mx = e.pageX + 6;<br> }<br> else<br> {<br> my = e.clientY - msy + 16;<br> mx = e.clientX + 6;<br> }<br> if (my > h-65) my = h-65;<br> if (mx > w-50) mx = w-50;<br> }<br> <br> function assgn()<br> {<br> for (j = 0; j < 3; j++)<br> {<br> dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *<br> <br> Math.sin((stp+j*25)/2) + scrl(0) + pix;<br> dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *<br> <br> Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;<br> }<br> stp+=s;<br> <br> for (i = 0; i < n; i++)<br> {<br> if (i < n-1)<br> {<br> vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;<br> vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;<br> vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;<br> }<br> else<br> {<br> vx[i].top = dy[0]; vx[i].left = dx[0];<br> vy[i].top = dy[1]; vy[i].left = dx[1];<br> vz[i].top = dy[2]; vz[i].left = dx[2];<br> }<br> }<br> setTimeout(assgn,t);<br> }<br> <br> function init()<br> {<br> for (i = 0; i < n; i++)<br> {<br> vx[i] = document.getElementById("x"+(idx+i)).style;<br> vy[i] = document.getElementById("y"+(idx+i)).style;<br> vz[i] = document.getElementById("z"+(idx+i)).style;<br> }<br> winsize();<br> assgn();<br> }<br> <br> if (window.addEventListener)<br> {<br> window.addEventListener("resize",winsize,false);<br> window.addEventListener("load",init,false);<br> document.addEventListener("mousemove",mouse,false);<br> } <br> else<br> if (window.attachEvent)<br> {<br> window.attachEvent("onload",init);<br> document.attachEvent("onmousemove",mouse);<br> window.attachEvent("onresize",winsize);<br> }<br> </script><br> </span></font><br> </blockquote> <br> 3. Save dan lihat hasilnya.<br> <br> <b>TAMBAHAN.</b><br> <br> i) Bagi sesiapa yang tukar warna objek tersebut, boleh tukar pada kod ini.<br> (<i><a href="http://tutorialuntukblog.blogspot.com/2010/08/html-color-codes.html">mencari kod warna.?</a></i>)<br> <blockquote> var xCol = "#<b>FF0000</b>";<br> var yCol = "#<b>FFFF00</b>";<br> var zCol = "#<b>0000FF</b>";<br> <br> </blockquote> <br> ii) Kod ini memerlukan anda menggunakan layout template.</span>

(untuk copy ^^ tekan  kanan ya -- )