#2 Diseña bloggers: Insertar iconos sociales + pack




¡Hello traveler’s! Hoy les enseñaré un nuevo mini tutorial para incorporar unos bellos iconos sociales en nuestro blog. ¿Por qué son importantes? Porque re-direccionan a nuestros lectores a otro contenido que tal vez pueda interesarle y finalmente se queden con nosotros. Are you ready?



¿Cómo inserto los iconos sociales?



1) Vamos directamente a BLOGGER > DISEÑO > CÓDIGO HTML



2) Luego ingresamos en AÑADIR UN GADGET > HTML/JAVASCRIPT




Puedes cambiar el nombre y colocar por ejemplo: ¡Sígueme en estas redes!, También estoy aquí, Encuéntrame, etc. Recuerda que este será el nombre de los iconos sociales, por lo que debes hacerlo bien creativo para que nos sigan.



3) Copiamos y EN CONTENIDO pegamos este gran código:

<center>
<a href=" LINK DE LA RED SOCIAL INSTAGRAM" target="_blank"><img alt="Instagram" height="40" src=" LINK DONDE SE ENCUENTRA LA IMAGEN " title="NOMBRE DEL LINK" width="40" /></a>

<a href=" LINK DE LA RED SOCIAL FACEBOOK" target="_blank"><img alt="FACEBOOK" height="40" src=" LINK DONDE SE ENCUENTRA LA IMAGEN " title="NOMBRE DEL LINK" width="40" /></a>

<a href=" LINK DE LA RED SOCIAL TWITTER" target="_blank"><img alt="TWITTER" height="40" src=" LINK DONDE SE ENCUENTRA LA IMAGEN " title="NOMBRE DEL LINK" width="40" /></a>

<a href=" LINK DE LA RED SOCIAL PINTEREST" target="_blank"><img alt="PINTEREST" height="40" src=" LINK DONDE SE ENCUENTRA LA IMAGEN " title="NOMBRE DEL LINK" width="40" /></a>
</center>

¿Cómo edito los iconos sociales?


1. Link de la red social: En cada uno de los apartados en morado debes copiar el link de la red social. Ejemplo: https://twitter.com/ViajeraT




2. Link donde se encuentra la imagen: En este apartado debemos colocar el link de la ubicación de la imagen del icono social que queremos agregar. En este caso son todos los apartados en rojo. Hay varias formas de agregar la imagen, con lo cual tú escoges la que se te haga mucho más cómodo.

Hay varias formas de agregar el link de la imagen. Sin embargo explicaré el más sencillo y cómodo que a mí me ha funcionado.

 Descarga un pack de iconos (estos son de Creative Mindly) y súbelos a una entrada vacía de manera tal que puedas disntinguir el único código que te va a crear.
 Luego seleccionamos HTML
 Copiamos el link de la imagen. Ese sería la url que colocaríamos en los apartados según la red social.

3. Nombre del link: Este será el nombre que aparecerá al pasar el mouse por el icono social. Ejemplo: Sígueme en Instagram, Sígueme en Twitter, Viaja en Pinterest, etc.

Una vez hayas llenado todos los apartados puedes seleccionar > GUARDAR > VISTA PREVIA
En el caso de que no tengas alguna de estas redes puedes suprimir el apartado  que comienza con <a href y termina con /></a>



¿Te ha funcionado?
 ¿Te complicaste un poco o lo lograste? 

6 comentarios

  1. Hola, qué genial este tipo de entradas para los que vamos aprendiendo ¡gracias!

    ResponderEliminar
  2. Hola soy Diego y llevo poco tiempo en este hermoso mundo. Si pudieras pasarte por el mio y ayudandome suscirbiendote a mi canal, te lo agradeceria un monton :D http://caminoalleer.blogspot.cl/

    pd: ya te sigo

    ResponderEliminar
  3. Madre mia a mi esto me hubiese venido genial cuando empezaba que no tenía ni idea de hacer nada de nada.... Buena idea ayudar con esta entrada a los demás.
    B7s

    ResponderEliminar
  4. ¡Holaa!
    Soy nueva por tu blog :)
    Gracias por esta entrada, me sirve mucho^^
    Besitos

    ResponderEliminar
  5. Hola preciosa!
    Me parece una entrada genial, me la guardo por si me hace falta.
    Me quedo por aquí y te invito al mío.

    Besotes!

    ResponderEliminar
  6. ¿Esto también vale para poner tus colaboradores? En plan empresas que te envían cosas y eso

    ResponderEliminar

¡Muchas gracias por dejarme tu comentario!