Tips para Blogger! Íconos Sociales Animados + Tutorial

9:00:00 Princess Aleka 1 Comentarios

tuto0

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í:

  • Dale "Me Gusta" en Facebook
  • Sígueme en Twitter
  • Suscríbete a mi canal de YouTube

  • Escríbeme un correo electrónico
  • Fuente Web RSS
  • Suscríbete vía email

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”.

tuto1

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

tuto2

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.

tuto3

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.

tuto4

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

tuto5

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

tuto6

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

tuto7

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

tuto8

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.

tuto9

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

tuto10

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

tuto11

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

1 comentario:

  1. Lo hiceeee y me saliooooo jejej mas feliz, la explicación esta perfecta lo único es que no se como hiciste para que cuando pasas el mouse arriba del icono te salga el comentario, como te sale a ti que dices suscríbete a mi canal de YouTube...

    ResponderEliminar

Deja tu huella en este Universo

Populares de la semana