Mil trucos para blogger: Gadgets comunes

1.-Camara de seguridad

Copia este código y pegalo en un gadget de edición html

código:

El espacio que ocupa el gadget quedara en blanco, pero la cámara saldrá donde debe estar.

Fuente: Gadgetsblogger.com

2.-Gadget Homer deja un comentario:

Copia este código y pegalo en un gadget de edición html

código:

El espacio que ocupa el gadget quedara en blanco, pero Homer saldrá donde debe estar.

Fuente: Gadgetsblogger.com

3.-Gadget Bart comentar es agradecer:

Copia este código y pegalo en un gadget de edición html

código:

El espacio que ocupa el gadget quedara en blanco, pero Bart saldrá donde debe estar.

Fuente: Gadgetsblogger.com

Esto es todo por ahora, pero ya iré poniendo información sobre nuevos gadgets.

4.-Ojos Magicos

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.

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(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>

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(http://lh6.googleusercontent.com/-G1SdIK4EQAM/Tq9KUlmQhWI/AAAAAAAAB1k/TYW2FbzqSU8/s143/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="http://lh4.googleusercontent.com/-naCDuX03WpQ/Tq9KeZErQJI/AAAAAAAAB1w/meYDW9Y51M8/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 132px; height: 143px; background: url(http://lh4.googleusercontent.com/-DMZBDYo4Rn0/Tq9KUhX2nPI/AAAAAAAAB1g/aVv1zZO9HQU/s143/ojo2.png) center center no-repeat; position:absolute; left: 485px; top: 20px;">
<img src="http://lh4.googleusercontent.com/-naCDuX03WpQ/Tq9KeZErQJI/AAAAAAAAB1w/meYDW9Y51M8/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(http://lh6.googleusercontent.com/-nIFSFb0FUBc/Tq9OQfidbcI/AAAAAAAAB2U/3UyDsSjWgYE/s135/ojo1.png) center center no-repeat; position:absolute; left: 377px; top: 20px;">
<img src="http://lh5.googleusercontent.com/-BHj2y7unB1U/Tq9Q4hgLbeI/AAAAAAAAB2g/cuTjMwabrzI/s34/pupila.png" width="30" height="30" /></div>
<div id="Ojo2" style="width: 127px; height: 135px; background: url(http://lh5.googleusercontent.com/-as6ykEORMr0/Tq9OQSfgksI/AAAAAAAAB2Q/FgZsKFiFfR0/s135/ojo2.png) center center no-repeat; position:absolute; left: 515px; top: 20px;">
<img src="http://lh5.googleusercontent.com/-BHj2y7unB1U/Tq9Q4hgLbeI/AAAAAAAAB2g/cuTjMwabrzI/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(http://lh6.googleusercontent.com/-Co_Tz9uS1og/Tq9Z_kcMmUI/AAAAAAAAB3I/XT_s4Dy0GAs/s180/ojo1.png) center center no-repeat; position:absolute; left: 307px; top: 20px;">
<img src="http://lh6.googleusercontent.com/-nfvJpUE1CgM/Tq9W6TP9hNI/AAAAAAAAB24/KNwO7NSGqnM/s71/pupila.png" width="65" height="65" /></div>
<div id="Ojo2" style="width: 180px; height: 161px; background: url(http://lh5.googleusercontent.com/-U0ZSRONSNGM/Tq9Z_l-nKjI/AAAAAAAAB3M/PruPm2mkezY/s180/ojo2.png) center center no-repeat; position:absolute; left: 545px; top: 20px;">
<img src="http://lh6.googleusercontent.com/-nfvJpUE1CgM/Tq9W6TP9hNI/AAAAAAAAB24/KNwO7NSGqnM/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 :)

Fuente: CiudadBlogger

5.-Gadget agregar en círculos de Google+

El objectivo de esta entrada es, como instalar en el blog (Blogger) el botón de "Agrégame" de Google+.

La funcionalidad de este Widget permite a los lectores de tu blog que te agreguen a sus círculos, de esta forma podrán estar al tanto de las actualizaciones de tu perfil enGoogle+.

También puedes configurarlo para que muestre la actividad de tu perfil de Google+ en el Blog.

¿Que necesitas para instalar el Widget de Google+ en tu blog ?

Necesitas tener tu perfil ya creado en Google+ . A partir del 20 de Septiembre de 2011, Google abre este servicio para todos sin necesidad de invitación.

Pasos para instalar el botón "Agrégame" de Google + en el tu blog:

Paso 1. Configurar y obtener el código del botón:

Entra en WidgetPlus para configurar tu botón
Pulsa el botón "Get Widget"
En la pestaña "Basis Settings"

Introduce tu Google+ ID. Es el número que aparece en la URL cuando estás dentro de tu Perfil en Google+ (¿Cómo conocer el Google+ID?)
Esteblece el ancho. El que yo tengo es de 240px
El idioma y el tipo de letra.
Si quieres mostrar la actividad de tu perfil de Google+ en el blog marca la opción "Include Update Feed "

Date una vuelta por el resto de las pestañas para configurar títulos, colores, etc.
Cuando lo tengas pulsa el botón Get Code.
Selecciona todo el código y cópialo.

Paso 2. Agregar el botón en el Blog

Abre la pestaña "Diseño"

Si usas la interfaz antigua de blogger, pulsa también "Elementos de la página".

En la barra lateral elige "Añadir nuevo Gadget".
Se muestra una lista, elige el que pone "HTML/Javascript".
En contenido, pega el código.
Guarda la plantilla y visualiza el blog.
Recuerda que puedes mover el Gadget en tu panel de Blogger para situarlo en el sitio deseado.

Nota: Recuerda que todavia no existe un servicio o por lo menos que yo conozca que permita vincular Blogger con Google+, por lo que los post de tu blog tendrá que darlos de alta en tu perfil copiando y pegando la URL de cada entrada, como cuando pones en Facebook un enlace, lo mismo.

Fuente: gadgetsblogger.com

Mil trucos para blogger

Páginas

Gadgets comunes

Datos personales

Buscar este blog