viernes, 20 de junio de 2014

Pon Tus Iconos de Redes Sociales

Hola chicas!! Hoy os traigo algo muy diferente a lo que suelo poner en el blog, no es ni una manicura ni un miércoles mudo pero que espero que os sirva mucho. Quiero enseñaros un tutorial sobre como poner los iconos sociales que tu quieras. Me ha costado muchísimo encontrar unos iconos que de verdad me gusten pero yo creo que por fin he dado con ellos. 



Buscando y buscando por las fotos de iconos sociales de google di con una página curiosa que tiene muchos iconos y es tal que esta, a su vez te lleva a otras donde te puedes descargar los iconos, los mios en concreto son estos. Vamos al paso a paso que creo que va a ser más claro y sencillo.

1. Los descargamos y descomprimimos.
2. Seleccionamos los que queremos poner en nuestro blog.
3. Vamos a tinypic.com. Tenemos que subir ahí los iconos para crearles una ruta.
4. Nos aparece esto:
5. Damos a seleccionar archivo y seleccionamos el icono que queremos, le ponemos el nombre que queramos y damos a cargar ahora.
6. Nos saldrá otra pantalla en la que tendremos que poner un captcha, lo ponemos y le damos a cargar ahora.


7. Nos aparece otra pantalla ya con el código y el que necesitamos para nuestro blog es el último (el que está remarcado)


8. Una vez que ya tenemos nuestro icono con una url necesitamos un código para poder ponerlo en nuestro blog y es tal que este;
<a href="URL de nuestra red social" target="_blank"><img border="0" src="URL del icono" /></a>
9. Nos vamos a nuestro blog y en la pestaña de Diseño, nos situamos en el gadget donde queramos poner nuestros iconos sociales y pinchamos en añadir un gadget (Os lo remarco)



10. Se nos abre otra ventanita y picamos en HTML/Javascript, copiamos el código que os he dado antes y ponemos la URL de nuestra red social, en este caso facebook y la que hemos creado antes para el icono.

11. Si queremos añadir más redes simplemente es poner lo mismo y si queremos que nos queden centradas (en mi caso tengo 4 y una se me baja a la siguiente fila) tenemos que añadir esto antes de nuestras redes sociales;
<br /><div class="separator" style="clear: both; text-align: center;">
y cuando hayamos acabado de añadir las redes ponemos esto;
<br /></div>


Sería tal que así:

12. Y el resultado final es este 




Espero que no se os haya echo muy pesada la entrada y lo más importante que os sirva para vuestro blog. 

Besos..




8 comentarios:

  1. Me ha parecido una entrada muy interesante y de ayuda. Yo en su día coloqué los iconos y me vi negra para poder ponerlos, menos mal que hoy en día hay muchos blogs donde se puede encontrar esta información :D

    Besos

    ResponderEliminar
  2. ¡Què entrada más interesante! Ya mismo lo estoy tratando de hacer. Un beso y gracias!

    ResponderEliminar
  3. Un post de gran ayuda!

    www.missarretrancos.blogspot.com

    ResponderEliminar
  4. ¡¡¡¡ Muchas gracias !!!! que gran aporte :) me ha servido mucho

    ResponderEliminar
  5. A mi también me fue de mucha ayuda! Muchas gracias y saludos desde losversosyreversos.blogspot.mx

    ResponderEliminar
  6. Yo tengo la suerte de trabajar como diseñadora y por suerte me sé cómo va todo este rollo, pero la verdad es que para el resto de la gente es una verdadera locura, me parece genial la idea que has tenido de subir este tutorial!!!!!!!!!

    Besitos :)

    ResponderEliminar
  7. Hola me encantaron tus botones y lucen bien chulos en mi blog como te comente por google+. Pero quería pedirte un favor, solo faltaba un icono con un corazón de bloglovin, y seria ideal lo bonito que quedaría en mi blog...yo con los programas de diseño no me llevo muy bien..Un saludo y muchas gracias

    ResponderEliminar

Muchas gracias por tu visita, espero volver a verte por aquí.
Recuerda que con tus comentarios me animas a seguir posteando pero por favor no hagas SPAM si quieres que pase por tu blog solo tienes que decírmelo.
Un besito.