Cursor con corazones que se desvanecen

No vayan a creer que este blog cambiará de nombre a "Las tardes románticas con El Potro" o algo así parecido, es sólo que estas últimas semanas he recibido varios correos donde me piden que publique cosas alusivas al mes del amor, así que por eso estamos derramando miel y corazones por todas partes.

Bueno, si ya movieron el cursor ya se dieron cuenta de qué trata el truquillo. Es un cursor que al moverlo desprende corazones por el blog, luego éstos se multiplican y se desvanecen.

El script es nuevamente de Giffy, aquél que nos trajo al Santa Claus volando la Navidad pasada.

Para poner este cursor de corazones en tu blog, entra en la Edición HTML de tu plantilla, y antes de </body> pega este código:

<script type="text/javascript" src="http://blogparts.giffy.me/0010/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0010/parts.png" alt="はじけるハートの足跡ブログパーツ" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;"><a href="http://twi1.me/">[PR]面白ツイート集めました</a></p>

Guarda los cambios y listo. Pero ojo, el código agregará un banner en japonés al final de la página. Sino quieres que aparezca entonces el código que deberás usar es este:

<div style="display:none;"><script type="text/javascript" src="http://blogparts.giffy.me/0010/parts.js"></script><p style="text-align: center;margin:0;padding:0;"><a href="http://giffy.me/baby/"><img style="border:0;" src="http://blogparts.giffy.me/0010/parts.png" alt="はじけるハートの足跡ブログパーツ" /></a></p><p style="text-align:center;font-size:12px;margin:10px 0 0 0;padding:0;"><a href="http://twi1.me/">[PR]面白ツイート集めました</a></p></div>

Ya cada quién sabrá si deja el banner o no. Aun así es de esos scripts que sólo usaremos un tiempo muy corto para no empalagar a nuestros lectores :)
Mientras tanto, Vive l'amour!

[PR]面白ツイート集めました

Ojos que siguen al cursor

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í mismo, mueve el cursor por la página y los ojos te seguirán.

Colocar estos ojos que siguen al cursor no nos quitará mucho tiempo. Si usas la interfaz antigua entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript. Y si usas la nueva interfaz entra en Diseño | Añadir gadget | HTML/Javascript. Ahí pega esto:

<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/AVvXsEgV6IPWTiHjMDinLQFQwlHC3650tXCDzqIMgQg4rlrApbJIhN7jdOj2cB0yg2juO63n9hxgcdpgl_Af6RdqRUhhOqR8bwWakFeAGFEQXuAdHLHb0omdS1tKLadNqeLGWO2cKPo-r1c46VM/s170/ojo_1.png) center center no-repeat; position: absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA7YZfnbvM_L2UX_VdkdEn4bmH7aIom2soLpPbL_GVtPIU3aNuSCG0NzLTBGuRfNwuhhg_FptoZuHUn_a961GUBTTJYdYend7DIKeSeh29Igh_D-9MUQ0BvYkFGdnuqgulqDbVDYPFoTo/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/AVvXsEhMs9I1V13PcAGACRwPplOg3wHlEHm23rl_gVG2bxfwd6T8M5tcHD3lM2GVHr2VanvxhFP1dtlkstZX3GgqA5URyXW5fmVwyjcIsxWAcA-V1I_KnCoT-sMSmObO5hnGsqsp_5Rke_DJN5A/s170/ojo_2.png) center center no-repeat; position:absolute;
left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA7YZfnbvM_L2UX_VdkdEn4bmH7aIom2soLpPbL_GVtPIU3aNuSCG0NzLTBGuRfNwuhhg_FptoZuHUn_a961GUBTTJYdYend7DIKeSeh29Igh_D-9MUQ0BvYkFGdnuqgulqDbVDYPFoTo/s30/pupila.png" width="23" height="23" /></div>
</div>


<script type="text/javascript">
EYES.follow ('Ojo1');
EYES.follow ('Ojo2');
</script>

Guarda los cambios y listo. Los ojos se verán mucho mejor si los pones debajo de la cabecera, así que sólo basta arrastrrar el gadget debajo de la cabecera para que quede ahí.

Pero para que haya un poco de variedad he puesto a su disposición cuatro tipo de ojos diferentes, sólo tienes que eliminar la parte gris tenue y en su lugar poner uno de estos códigos.

<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/AVvXsEjOpjtB8kB2B9h_rLQj6wHzn9Pch3siBs0hyrsLG7h-ksHCbrfPjy6Qwr_1utrqKcPKECTb7VUYYCRO0VqD62JUBo7ax2108zqrTigDGKvr9-wjeC3i92bam0QyzcGT9K38UK21hJA5dNs/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGmHnwunGQPJWPNasIlAMGczOdTmYFBxt2okUpAjmcQtVmtoiOayrdemngZWUE4gT31DuFcWD9BG_BoRCbBo9OxXA1_AxHvoWuZha5xAX5oeuQmeb4tK072XFlDlii-bLBMw1pfk-A6I/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/AVvXsEjHAkd2Dhe5DL-VaYVeKIgLzeKAX5BffhmfvfT_zGBd2C9QCX0UyKcxHYUHQT31WynW5Iw0qZj3AMoKCe086JG93x0n-QgURS_CwzLBKHCcpwm7NL6qnhOI_Cy-u2Te-Ex3fG9Kam8FPV4/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGmHnwunGQPJWPNasIlAMGczOdTmYFBxt2okUpAjmcQtVmtoiOayrdemngZWUE4gT31DuFcWD9BG_BoRCbBo9OxXA1_AxHvoWuZha5xAX5oeuQmeb4tK072XFlDlii-bLBMw1pfk-A6I/s34/pupila.png" width="30" height="30" /></div>
</div>

<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/AVvXsEi9nm2gZpsNBlPC5kb2rcBEYxAZI4Pb55jf6b_g00fSUaLfcVnB_LmPVnF5B-TDRO3yzy1amAOotEcM2X9OLUELyU85W_Edc9SSSvFo17LLp6viEeH8JElVyyjbxVQ4Ad8dUs2Oi1Nt8vY/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdl25K28QChtaNpd8z5yYQAyS-tO0jfPLuEHkL8PZZT2XX2Sbs0YbvM4Vvt6Cid60WPS8ibO3M2-3io0B3mnQAOhZb82AMcOsJO1nOPz2zkiGZp_pi_VfkRuBheFZVFADb-9inTriseVM/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/AVvXsEjsHo7u14a6oSSxkvn4IeGuDvfpRPiomNsTz-fUcjkN_btXK7Nw1NRyGj5_1lcBLiVXVanHhauGszAaDUgnFr7_alBCppB-3vWnsbcpsjmE3YPwRjnQ48fynctbfX8E4gVpzB4Si6EW6v4/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdl25K28QChtaNpd8z5yYQAyS-tO0jfPLuEHkL8PZZT2XX2Sbs0YbvM4Vvt6Cid60WPS8ibO3M2-3io0B3mnQAOhZb82AMcOsJO1nOPz2zkiGZp_pi_VfkRuBheFZVFADb-9inTriseVM/s34/pupila.png" width="30" height="30" /></div>
</div>

<div style="position:relative; height:161px; margin-bottom:30px;">
<div id="Ojo1" style="width: 180px; height: 161px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvTbEx3nemH-4gSSSeHefcoI9spExvsqm9C8F8XIVoXOhkIKEU_VHlbLqN4POxSU3KRVWwQgYeLCbq-7QreKdYHq5wXdxNXffTuOAvKJtAg-2F1zEoUT_52Eh_KcWPD8W0EQoCri_NZ2o/s180/ojo1.png) center center no-repeat; position:absolute; left: 307px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-t9Nlz6bNawpYPkqSBLqPixbIUs71hJB-iRsovLAXE3qmfLrWZtWYSRFfWHBRbKBfHQ76DitGNhcg45_7G6uL-qtHYYFRYNXQojK75B6lsP8JxNypXcL8tWmIxCOWFyxB-pej10CTnU/s71/pupila.png" width="65" height="65" /></div>
<div id="Ojo2" style="width: 180px; height: 161px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrryKJF_QJ7KGKAMw56R2ZPpMLwHMLzvav188LWjNsZQs1DCgTytrwaiXy-SfuHiV0dLyc-aTvXs4G72bvusqH_tHxzb_ja5VSdDawlu9jz7kXaxuZVYlpcHFBiSbipf6u5UII9db_V9o/s180/ojo2.png) center center no-repeat; position:absolute; left: 545px; top: 20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-t9Nlz6bNawpYPkqSBLqPixbIUs71hJB-iRsovLAXE3qmfLrWZtWYSRFfWHBRbKBfHQ76DitGNhcg45_7G6uL-qtHYYFRYNXQojK75B6lsP8JxNypXcL8tWmIxCOWFyxB-pej10CTnU/s71/pupila.png" width="65" height="65" /></div>
</div>

Si quisieras mover los ojos más a la izquierda o derecha entonces debes modificar las partes en color rojo, el primer valor es la distancia del primer ojo desde la izquierda, y el segundo valor es la distancia del segundo ojo también desde la izquierda. Por lo tanto, para separar o juntar más los ojos sólo debes modificar el segundo valor de left.

Ojalá que se diviertan tanto como seguro sus lectores lo harán :)

Cursores de Navidad

Siguiendo con las decoraciones del blog con motivos de la Navidad, aquí está una colección de 10 cursores alusivos a las fiestas decembrinas.
Para cambiar el cursor de tu blog sólo entra en Diseño | Edición de HTML y antes de </body> pega el código del cursor que más te guste.

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol355.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol351.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol340.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol302.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol294.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol280.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol255.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-2/hol169.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol356.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/nature/nat-4/nat394.cur), progress;}</style>

Cursores de Halloween II

Como película de terror, aquí está la segunda parte de los Cursores de Halloween, por si alguien aún no se decide cuál usar pueda tener más variedad de dónde escoger.

Para colocarlos es el mismo procedimiento, entrar a Plantilla | Edición de HTML y antes de </body> pegar el código del cursor que has elegido.

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol208.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol24.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol59.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol36.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol14.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol27.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol20.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol3.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol2.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol47.cur), progress;}</style>

Cursores de Halloween

Esta es una colección de cursores de Halloween para el blog con los cuales podemos empezar a decorar el blog para esta fecha siniestra y divertida.

Para poner cualquiera de estos cursores en tu blog entra en Diseño | Edición de HTML y antes de </body> pega el código del cursor que más te guste.

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-1/hol50.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol219.cur), progress;}</style>

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-11/gam1062.cur), progress;}</style>

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol335.cur), progress;}</style>

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-4/hol337.cur), progress;}</style>

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol222.cur), progress;}</style>

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol217.cur), progress;}</style>

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol221.cur), progress;}</style>

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol210.cur), progress;}</style>

Cursores de futbol

Ya se acerca la Copa Mundial de Fútbol y podemos darle al blog un estilo deportivo con estos cursores gratis alusivos al fútbol que puedes colocar muy fácil y quitarlos cuando lo desees.
Para poner cualquiera de estos cursores en tu blog entra en Diseño | Edición de HTML y antes de </body> pega el código del cursor que más te guste.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-5/spo406.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-5/spo409.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-4/spo378.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-1/spo61.cur), progress;}</style>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/sports/spo-1/spo39.cur), progress;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/adidasfootballboot.cur"), url("http://downloads.totallyfreecursors.com/thumbnails/adidas-football-boot.gif"), auto;}</style>

<style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/flamingsoccerball.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/flamingsoccerball.gif"), auto;}</style>