Widget Mata Mengikuti Cursor

Kali ini Nurulcall akan kasih Widget Mata Mengikuti Cursor tapi sebelum itu mungkin ini juga anda cari Cara merubah Tampilan Linkwithin dan ini juga Cara menambah Gambar Naruto di Sidebar ok langsung saja silahkan lihat gambar dibawah tampilanya akan seperti ini

Ikuti langkah-langkah dibawah ini:

• Login blog anda klik tata letak tambah gadget HTML/javascript masukkan code dibawah ini dan paste didalamnya.

<script type='text/javascript'>

//<![CDATA[

// Ojos que siguen al cursor

// Script original de Oopstudios.com

// Adaptado por ciudadblogger.com

EYES = {};

EYES.stack = [];

//

EYES.follow = function (eye) {

var el1 = document.getElementById (eye);

var el2 = el1.getElementsByTagName ("IMG");

el2 = el2[0];

el2.centre = (el1.offsetWidth - el2.offsetWidth) / 2;

el2.style.margin = el2.centre + "px 0 0 " + el2.centre + "px";

el1.maxDist = 6 * el1.offsetWidth;

EYES.stack.push ([el1, el2]);

};

EYES.mousemove = function (e) {

if (!EYES.stack.length) {

return;

}

//

var mouseX = mouseY = 0;

if (!e) var e = window.event;

if (e.pageX || e.pageY) {

mouseX = e.pageX;

mouseY = e.pageY;

} else if (e.clientX || e.clientY) {

mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

}

//

for (var e=0, l=EYES.stack.length; e<l; e++) {

var el = EYES.stack[e];

var elX = elY = 0;

if (el[0].offsetParent) {

obj = el[0];

do {

elX += obj.offsetLeft;

elY += obj.offsetTop;

} while (obj = obj.offsetParent);

}

el[0].centreX = elX + Math.round (el[0].offsetWidth / 2);

el[0].centreY = elY + Math.round (el[0].offsetHeight / 2);

var difX = mouseX - el[0].centreX;

var difY = mouseY - el[0].centreY;

var dTan = Math.atan2 (difX, difY);

var dist = Math.sqrt ((difX * difX) + (difY * difY));

dist = Math.sin ((dist > el[0].maxDist ? 1 : dist / el[0].maxDist));

var newX = el[1].centre + Math.round (Math.sin (dTan) * el[1].centre * dist);

var newY = el[1].centre + Math.round (Math.cos (dTan) * el[1].centre * dist);

el[1].style.margin = newY + "px 0 0 " + newX + "px";

}

};

if (window.attachEvent) document.attachEvent ("onmousemove", EYES.mousemove);

else document.addEventListener ("mousemove", EYES.mousemove, false);

//]]>

</script>

<div style="position:relative; height:150px; margin-bottom:30px;">

<div id="Ojo1" style="width: 170px; height: 140px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCjevCYf8BzSDyYxgrF7y4FDSLMqBHUW1HF-ZD3iZGKGCbRD7jmzWhmT0rDQ1BGEIu_601_M_xUyxlPKH5J2B1Z6xAtJWnAzVDsGH-oSaciTILxIk0ogvVyn4b5j0NjhnzPWd9s9LF0cY/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuPQ63wIApir269oh-SanleVxj81dNDC0WYcfUO82XMg2Zm-Ef0iXSoBBZDbPurp9516N-_2Gz0__St8OidB-qbW4m5ucyBd5keQD2ql8VIFrygFqpSL8TTG1BojMfWgx5yjnmXfi_E24/s30/pupila.png" width="23" height="23" /></div>

<div id="Ojo2" style="width: 170px; height: 140px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihebjGDgTd3TP08SII9-wIN0ZQS-sfMjJ86TjTXlqI1NLYXbxjD0iL0rkD5A3axkpyn1gLnU5-U14bRK5Qu5mZsQvkUngPUA0fqQZl3jggHQehQPJSr8KzWAuQ5esH0RGEx5LTJ3mBPas/s170/ojo_2.png) center center no-repeat; position:absolute;

left: 485px; top: 20px;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuPQ63wIApir269oh-SanleVxj81dNDC0WYcfUO82XMg2Zm-Ef0iXSoBBZDbPurp9516N-_2Gz0__St8OidB-qbW4m5ucyBd5keQD2ql8VIFrygFqpSL8TTG1BojMfWgx5yjnmXfi_E24/s30/pupila.png" width="23" height="23" /></div>

</div>

<script type="text/javascript">

EYES.follow ('Ojo1');

EYES.follow ('Ojo2');

</script>

Jika anda ingin gambar yang lain

<div style="position:relative; height:145px; margin-bottom:30px;">
<div id="Ojo1" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj52Ysn7VtbXgGd8DeefKy9DnGd7abSOeGC6COEPRXsYUIvHsd44vRd-tRVcd5WTE4FJLEQFtKNNSzWjqzQKywUijPzfPGmI1fFgTnAeMTdvk9l4k_2K5XE9U8KMSZPKr5wLbZGHqC-Opg/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcrD25qpZOXOvy9tpM_kJkHUNfDbo89Xoal-mgXzvYyleqG3-48wPzxnqqvPAEzgihMX9dtbdbIHu7YindUzHvfVeqsxNiAHkAkKEEjCHZ4j8LsxBvZ2wLZfX2OvYQvjkKKsyZc1yE6Y/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxF5AQGObJm5r9tARwLo00R68VrotmvKUYe2wS-JdPUUFr6LJPaQlc7gqx9suxC8L5MYnK4ktFuS9T5VTzT7Aox5fzvXemfp5DkiHXNcWMrWKyINkAYdWvQ27UL82U5NOwGEz5wD8ABw/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLcrD25qpZOXOvy9tpM_kJkHUNfDbo89Xoal-mgXzvYyleqG3-48wPzxnqqvPAEzgihMX9dtbdbIHu7YindUzHvfVeqsxNiAHkAkKEEjCHZ4j8LsxBvZ2wLZfX2OvYQvjkKKsyZc1yE6Y/s34/pupila.png" width="30" height="30" /></div>
</div>

Dan Juga ini

<div style="position:relative; height:145px; margin-bottom:30px;">

<div id="Ojo1" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1SXQWFD-jfjOQrHQcNcFnXQMBUanymV86yMih2dhpu8ptwoKjU_8ieBdrfSq2ij6S-m5rCS8ZIsmzBU_hN2WZLlJ8G_PpzH67gcUoCa3WEYWYqSFLj8tNCgI-joJvxYXWzVDKiZxdA4/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3VfJtWli5UmHoAisfKqcmvTSaMT5KXW3gKtn6ZU0GW6wJTPgaSmJxXNbFe8_ZKueAABMHwz9VOHv1z1DJffd-dWpM4Y8R8PPnQ9P9rIlyqtXCodfFT0n1FIKxFwSPtCxrm5PHHAsZUOE/s34/pupila.png" width="30" height="30" /></div>

<div id="Ojo2" style="width: 127px; height: 135px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEief-X89mzlASTf65aWTs5gnPjnwGapsSHLYIlpy_Qvnhj_yyjmoQ-umbZ6rWy7lt1iK_Hk_H4tFp1Fsz7A0r06M3Z9O8a4plDIIvKyIKWweymvpopi9lmbuDFnqFBi1E7xuuwxqtpvnHM/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3VfJtWli5UmHoAisfKqcmvTSaMT5KXW3gKtn6ZU0GW6wJTPgaSmJxXNbFe8_ZKueAABMHwz9VOHv1z1DJffd-dWpM4Y8R8PPnQ9P9rIlyqtXCodfFT0n1FIKxFwSPtCxrm5PHHAsZUOE/s34/pupila.png" width="30" height="30" /></div>

</div>

Semoga bermanfaat........