Tips para Blogger! Íconos Sociales Animados + Tutorial

Feliz jueves, gente bonita. Hoy les traigo un tutorial sencillo con el que pueden aprender a colocar sus íconos sociales en su blog, con un efecto especial: crecen cuando les pasas el ratón por encima. Los íconos sociales son imágenes enlazadas en tu blog con tu página de Facebook, canal de YouTube, cuenta de Twitter, y cualquier otra red social que quieras colocar. En mi blog, están en el tope de mi barra derecha. Se ven más o menos así:

• 
• 
• 


• 
• 
• 

Como pueden ver, es algo bastante vistoso. Este tutorial está basado (y tiene código) de la web Charkleons.com. Les muestro cómo se hace.

Paso 0: Antes de empezar, ten a la mano las imágenes que quieres usar. En la web Tripwire Magazine tiene una lista de más de 40 sets, Six Revisions también tiene una lista bien nutrida, y en la página DryIcons hay montones de sets. Revisa, bájate un paquete que sea gratis (ojo con los derechos de autor) en que los íconos sean al menos 128x128 píxeles, y aloja cada imagen (que deben ser .png) por separado donde guardas tus imágenes en línea. Yo te recomiendo que uses Flickr. Una vez que las tengas, obtén los enlaces de cada una, y cópialos en un bloc de notas.

Paso 1: Este ejemplo lo voy a realizar en el blog que tengo para estos menesteres. Empieza en el escritorio de Blogger, y dirígete al apartado “Plantilla”.

Paso 2: Ahora, da click en el botón “Editar HTML”.

Paso 3: Cuando salga el código, haz click en él y luego presiona Ctrl+F para abrir nuestra amiga la cajita de búsqueda.

Paso 4: En esta cajita, pega lo siguiente:

/head

Paso 5: Justo ANTES de la línea que contiene /head, pega el siguiente código.

Paso 6: Al terminar, guarda tu plantilla presionando el botón naranja.

Paso 7: Ahora, dirígete al apartado “Diseño”.

Paso 8: Ahora agregarás un gadget para alojar los íconos. Haz click en “Añadir un gadget”.

Paso 9: Baja la lista, para conseguir el que diga “HTML/Javascript”.

Paso 10: Cuando lo encuentres, haz click en el botón “+” correspondiente.

Paso 11: En la caja de Contenido, pega el siguiente código. Reemplaza donde "Enlace a la red social #" con los enlaces a cada red social, y donde dice "Dirección de la imagen #" con las direcciones de las imágenes correspondientes, que guardaste en el bloc de notas del Paso 0.

Paso 12: Deja el cuadro de Título vacío, y guarda lo que hiciste.

Paso 13: Arrastra el gadget al sitio donde quieras que esté, y guarda la disposición del blog.

Paso 14: ¡Y listo! Comprueba en tu blog que estén funcionando.

Como ven, lleva poco código y es bastante sencillo de seguir. Como siempre les digo, si tienen una duda, me la pueden dejar en un comentario o en mi correo princess.aleka@gmail.com. Espero que les sea útil,

Denise
Twitter