Cara Membuat Objek Berputar Mengelilingi Kursor di Blog

Dun-soft.blogspot.com - Bagaimana dengan tampilan blogger sobat?? Apakah sudah menarik?? Saya punya solusi agar blog anda menjadi menarik, ...

Dun-soft.blogspot.com - Bagaimana dengan tampilan blogger sobat?? Apakah sudah menarik?? Saya punya solusi agar blog anda menjadi menarik, yaitu dengan memberi Objek Berputar Mengelilingi Mouse di Blog. Gambar contoh seperti dibawah ini :

Demonya juga dapat dilihat disini

Jika anda tertarik ikuti langkah dibawah ini :

• Login ke blogger.com
• Masuk Tata Letak --> Tambah Gadget --> Pilih HTML/Javascript
• Copy kode dibawah ini :

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

var xCol = "#FF0000";

var yCol = "#FFFF00";

var zCol = "#0000FF";

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>

• Simpan dan Selesai

NB : 

• Sobat bisa mengganti kode warna sobat blogger dengan mengganti kode dibawah ini. Kode Warna

var xCol = "#FF0000";

var yCol = "#FFFF00";

var zCol = "#0000FF";

• Kode ini memerlukan anda menggunakan layout template

Cara Membuat Objek Berputar Mengelilingi Kursor di Blog