Cara membuat widget mata penjaga blog

Belajar SEO dan Blog Bagi pemula
Masih di Variasi Blogger share Cara membuat widget mata penjaga blog cekidot

Silahkan Copy Paste script  di bawah ini simpan di blog sobat

<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(http://lh5.googleusercontent.com/-ZvPrMLTmDss/Tq9hi3hOiuI/AAAAAAAAB3k/ns0hdu4oLHY/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">
<img src="http://lh3.googleusercontent.com/-xGTUu-uw3eE/Tq9FzB8X7AI/AAAAAAAAB1Y/r45hH1IpQ5I/s30/pupila.png" width="23" height="23" /></div>
<div id="Ojo2" style="width: 170px; height: 140px; background: url(http://lh4.googleusercontent.com/-fdWmeVfdzG4/Tq9hizn5WWI/AAAAAAAAB3o/PSUQixCGsHk/s170/ojo_2.png) center center no-repeat; position:absolute;
left: 485px; top: 20px;">
<img src="http://lh3.googleusercontent.com/-xGTUu-uw3eE/Tq9FzB8X7AI/AAAAAAAAB1Y/r45hH1IpQ5I/s30/pupila.png" width="23" height="23" /></div>
</div>


<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script><small><center><a href="http://variasiblogger.blogspot.com/2012/03/cara-membuat-widget-mata-penjaga-blog.html" target="_blank">Get-Widget-Blog</a></center></small>

Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat

klik DEMO


Share to

34 Responses to "Cara membuat widget mata penjaga blog"

  1. wahhhh ide yang keren nih bang...

    BalasHapus
    Balasan
    1. ya sob , buat satpam biar aman dengan mata yang seram hehehe... :d

      Hapus
  2. waaaaw, blognya keren banget :D

    BalasHapus
    Balasan
    1. ah biasa aja sob , gak begitu bagus hehehe... soalnya masih tahap belajar desain :D

      Hapus
  3. mantaf bro i like your blog

    BalasHapus
  4. weh,, ane pesen yang mata keranjang sob,, ada gak? :D

    BalasHapus
    Balasan
    1. wah kayanya kalo mata keranjang lagi dipake sama saya wkwkwk.. :D

      Hapus
  5. aku mau mata hati

    hehe

    bagus matanya

    BalasHapus
    Balasan
    1. terus kalo sobat mata hati , terus aku mata apa dong hehehe... :>)

      Hapus
  6. kereenn... boleh nih pasang juga di blogku, hehe... thanks infonya :)
    salam kenal :)

    BalasHapus
    Balasan
    1. yups , silahkan sob.. semoga bermanfaat dan salam kenal balik :D

      Hapus
  7. mata genit mata genit :p
    keren kang :)

    Ikhlas - The Secret

    BalasHapus
    Balasan
    1. awas matanya jangan genit banget hehehe... :D

      Hapus
  8. kereeen juga masbroo , terimakasih share nyaa

    BalasHapus
    Balasan
    1. iya sob , semoga bermanfaat... :D

      Hapus
  9. wah udah pada pesen ya...ane juga pesen 1 mata kaki hehe... \o/
    itu bikin berat loading blog gk bang?

    BalasHapus
    Balasan
    1. wah kalo mata kaki bau dong hehehe... , lumayan sob ga terlalu berat ringan , tapi kalo sekiranya udah berat jangan :>)

      Hapus
  10. serem, serasa dipelototin sama mpunya blog 7:(

    BalasHapus
    Balasan
    1. wah saya gak pernah melotot sob , tapi suka nyengir smile hehehehe.. :>)

      Hapus
  11. Waw....kreatif n keren sob :)

    BalasHapus
    Balasan
    1. yups.. semoga bermanfaat sob.. :D

      Hapus
  12. udah ku coba tapi ko ga tampil ya mata nya hahaha

    BalasHapus
    Balasan
    1. masa sih ? tapi tadi di cek bisa kok , sampe muter - muter tuh matanya hehehe... :>)

      Hapus
  13. hehehe... lucu ya kalo di pake jadi kaya satpamnya

    BalasHapus
    Balasan
    1. ya sob , buat jaga - jaga dari anti para copas mania wwkkwkwk.. jadi takut liat ada satpam blognya... :>)

      Hapus
  14. keren oyy...penuh warna-warni

    BalasHapus
  15. haha lucu sob ... :D

    BalasHapus
  16. ahaha.. keren \o/ :D .

    BalasHapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

Panduan, Bimbingan Cara Belajar Blogs dan Seo