Tutorial: Agrega ojos que siguen al cursor en tu blog con este script

  • Autor Autor jcduranm
  • Fecha de inicio Fecha de inicio
jcduranm

jcduranm

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Una forma graciosa de mantener entretenidos a los lectores pequeños (y no tan pequeños) en nuestro blog, es con unos ojos que siguen al cursor por donde éste se mueva. El objetivo es meramente de entretenimiento para quitarle un poco de seriedad al blog y hacer que los lectores se diviertan.
Puedes ver el ejemplo aquí -->> Ojos que siguen al cursor <<-- aquí, mueve el cursor por la página y los ojos te seguirán



Lo primero qu tienen que hacer es irse a Blogger – Su blog – Diseño – Editar HTML, y buscan la siguiente linea:

Insertar CODE, HTML o PHP: 
</head>

Justa arriba de ella, agregan el siguiente script:

Insertar CODE, HTML o PHP: 
<script type=’text/javascript’>
//<![CDATA[
// Ojos que siguen al cursor

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>

Ya tienen el script, ahora solo falta agregar los ojos, estos los pueden agregar en cualquier parte del blog, una entrada, un gadget etc, bueno para egregarlos, les dejare 4 diferentes diseños, ustedes seleccionan el que mas les guste:

ojos1-300x118.webp

Insertar CODE, HTML o PHP: 
<div style=”position:relative; height:150px; margin-bottom:30px;”>
<div id=”Ojo1″ style=”width: 170px; height: 140px;
background: url([url]http://lh5.googleusercontent.com/-ZvPrMLTmDss/Tq9hi3hOiuI/AAAAAAAAB3k/ns0hdu4oLHY/s170/ojo_1.png[/url]) center center no-repeat; position: absolute; [COLOR="#FF0000"]left: 307px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh3.googleusercontent.com/-xGTUu-uw3eE/Tq9FzB8X7AI/AAAAAAAAB1Y/r45hH1IpQ5I/s30/pupila.png”[/url] width=”23″ height=”23″ /></div>
<div id=”Ojo2″ style=”width: 170px; height: 140px; background: url([url]http://lh4.googleusercontent.com/-fdWmeVfdzG4/Tq9hizn5WWI/AAAAAAAAB3o/PSUQixCGsHk/s170/ojo_2.png[/url]) center center no-repeat; position:absolute;
[COLOR="#FF0000"]left: 485px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh3.googleusercontent.com/-xGTUu-uw3eE/Tq9FzB8X7AI/AAAAAAAAB1Y/r45hH1IpQ5I/s30/pupila.png”[/url] width=”23″ height=”23″ /></div>
</div>
<script type=”text/javascript”>
EYES.follow (‘Ojo1′);
EYES.follow (‘Ojo2′);
</script>

ojos2-300x126.webp

Insertar CODE, HTML o PHP: 
<div style=”position:relative; height:145px; margin-bottom:30px;”>
<div id=”Ojo3″ style=”width: 132px; height: 143px; background: url([url]http://lh6.googleusercontent.com/-G1SdIK4EQAM/Tq9KUlmQhWI/AAAAAAAAB1k/TYW2FbzqSU8/s143/ojo1.png[/url]) center center no-repeat; position:absolute; [COLOR="#FF0000"]left: 377px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh4.googleusercontent.com/-naCDuX03WpQ/Tq9KeZErQJI/AAAAAAAAB1w/meYDW9Y51M8/s34/pupila.png”[/url] width=”30″ height=”30″ /></div>
<div id=”Ojo4″ style=”width: 132px; height: 143px; background: url([url]http://lh4.googleusercontent.com/-DMZBDYo4Rn0/Tq9KUhX2nPI/AAAAAAAAB1g/aVv1zZO9HQU/s143/ojo2.png[/url]) center center no-repeat; position:absolute; [COLOR="#FF0000"]left: 485px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh4.googleusercontent.com/-naCDuX03WpQ/Tq9KeZErQJI/AAAAAAAAB1w/meYDW9Y51M8/s34/pupila.png”[/url] width=”30″ height=”30″ /></div>
</div>
 <script type=”text/javascript”>
EYES.follow (‘Ojo3′);
EYES.follow (‘Ojo4′);
</script>

ojos3-300x130.webp

Insertar CODE, HTML o PHP: 
<div style=”position:relative; height:145px; margin-bottom:30px;”>
<div id=”Ojo5″ style=”width: 127px; height: 135px; background: url([url]http://lh6.googleusercontent.com/-nIFSFb0FUBc/Tq9OQfidbcI/AAAAAAAAB2U/3UyDsSjWgYE/s135/ojo1.png[/url]) center center no-repeat; position:absolute; [COLOR="#FF0000"]left: 377px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh5.googleusercontent.com/-BHj2y7unB1U/Tq9Q4hgLbeI/AAAAAAAAB2g/cuTjMwabrzI/s34/pupila.png”[/url] width=”30″ height=”30″ /></div>
<div id=”Ojo6″ style=”width: 127px; height: 135px; background: url([url]http://lh5.googleusercontent.com/-as6ykEORMr0/Tq9OQSfgksI/AAAAAAAAB2Q/FgZsKFiFfR0/s135/ojo2.png[/url]) center center no-repeat; position:absolute; [COLOR="#FF0000"]left: 515px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh5.googleusercontent.com/-BHj2y7unB1U/Tq9Q4hgLbeI/AAAAAAAAB2g/cuTjMwabrzI/s34/pupila.png”[/url] width=”30″ height=”30″ /></div>
</div>
 <script type=”text/javascript”>
EYES.follow (‘Ojo5′);
EYES.follow (‘Ojo6′);
</script>

ojos4-300x132.webp

Insertar CODE, HTML o PHP: 
<div style=”position:relative; height:161px; margin-bottom:30px;”>
<div id=”Ojo7″ style=”width: 180px; height: 161px; background: url([url]http://lh6.googleusercontent.com/-Co_Tz9uS1og/Tq9Z_kcMmUI/AAAAAAAAB3I/XT_s4Dy0GAs/s180/ojo1.png[/url]) center center no-repeat; position:absolute; [COLOR="#FF0000"]left: 307px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh6.googleusercontent.com/-nfvJpUE1CgM/Tq9W6TP9hNI/AAAAAAAAB24/KNwO7NSGqnM/s71/pupila.png”[/url] width=”65″ height=”65″ /></div>
<div id=”Ojo8″ style=”width: 180px; height: 161px; background: url([url]http://lh5.googleusercontent.com/-U0ZSRONSNGM/Tq9Z_l-nKjI/AAAAAAAAB3M/PruPm2mkezY/s180/ojo2.png[/url]) center center no-repeat; position:absolute; [COLOR="#FF0000"]left: 545px[/COLOR]; top: 20px;”>
<img src=”[url]http://lh6.googleusercontent.com/-nfvJpUE1CgM/Tq9W6TP9hNI/AAAAAAAAB24/KNwO7NSGqnM/s71/pupila.png”[/url] width=”65″ height=”65″ /></div>
</div>
<script type=”text/javascript”>
EYES.follow (‘Ojo7′);
EYES.follow (‘Ojo8′);
</script>

Y eso es todo, en color rojo esta marcada la posición en que estarán los ojos, si lo quieren cambiar, para que les quede bien, hagan clic derecho sobre el ojo y seleccionen Inspeccionar Elemento y ahí del lado derecho podrán cambiar las posiciones, cuando ya lo tengan bien, solo editan el código ya ya esta.​
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

M
Tutorial: Cómo agregar últimas entradas como una marquesina estilo caja de noticias en Blogger
Respuestas
15
Visitas
4K
Zoeba
Z
Nelo
Tutorial: Agrega opciones de comentarios y contador en tu blog de Blogger
Respuestas
13
Visitas
4K
thetipo89
T
parrax
Tutorial: Agrega un contador personalizable a tus reproductores de video
Respuestas
17
Visitas
3K
Souhiro
Souhiro
M
Tutorial: Agregar una Caja Pop Up "Me Gusta" de Facebook en tu blog de Blogger
2
Respuestas
21
Visitas
6K
Eternovicio
E
U
Tutorial: Agrega botones de redes sociales a tu blog de Blogger
Respuestas
10
Visitas
3K
kibrot
kibrot
Atrás
Arriba