Poner Botones para los iconos sociales en Blogger

Hola, hoy te quiero contar como he hecho y puesto mis botones para las redes sociales, lo hago porque me han preguntado varias personas por ellos y quiero contar como los hice y como los instalé.


Lo primero es elegir tus iconos sociales, yo me los he hecho, ya que no encontraba ningunos que me molasen.

Para hacerlos he usado Photoshop, pero quiero dejar claro que no se usarlo, así que cualquiera podría hacerlo, sólo hay que rulear y pelearse con las opciones. El tamaño de mis botones es de 50x50, y empecé por eso cuando crre el proyecto nuevo (Archivo/Nuevo), le dí ese tamaño, y lo dejé transparente. Y aparece el cuadrito que parece un tablero de ajedrez.

Ahora dibujaremos lo que queramos para nuestro botón, en las imagenes veis esa cara sonriente (es de una fuente de texto), lo que yo hago es pulsar la "T" para abrir un cuadro de texto en el cuadrito que he creado, le doy el tamaño de fuente que me interesa y escribo lo que quiero. Mis botones son: para el correo la fuente  KG Heart Doodles pulsando A mayúscula, y te sale ese sobre tan chulo; el botón para twitter lo hice con la fuente Socialico (la L mayúscula) y le cambié el color; el botón de facebook es la f minúscula con la fuente Comic sans MS; el botón de Bloglovin es la b con la fuente Comic sans MS, y le añadí el corazón con la fuente MTF DOODLE (es la letra O); el botón de Pinterest cogí la P de pinterest y le cambie el color con el photshop.

Una vez que tienes el dibujo escogido, yo lo que hago es ponerme encima de la capa, y darle al botón derecho y pulsar "Rasterizar texto", así convierto la letra en imagen, y puedo cambiarla de tamaño, color.

Y bueno una vez que tenía el dibujo deseado, lo guardaba en formato .PNG para que se mantenga la transparencia. Para ponerles el marco de polaroid lo hice con PicMonkey,  no es el editor que yo suelo usar, pero permite girarlas como las puse yo, para un lado y para otro, yo suelo usar Pixlr (la opción express).

Una vez que tienes tu diseño, lo siguiente es colocarlos en el blog. Se va a Diseño, y añadimos un nuevo gadget (HTML/Javascript), yo lo puse el primero de todos, pero tu lo colocas donde mejor te vaya.

En el gadget puse los cinco códigos html para los cinco botones.

 

<a href="https://twitter.com/XXXXX" title="PATYPEANDO EN TWITTER" onclick="window.open(this.href); return false;"><img src="http://YYYYYY.jpg" width="50" height="50" alt="PATYPEANDO EN TWITTER" /></a>

Las XXXXX es la url de tú página twitter, facebook..., vamos a donde quieres dirigir con ese botón.

Las YYYYY es la url de la imagen (donde tienes alojada la imagen).

En "title" es con lo que se consigue que al pasar por encima, salga la descripción, y el código que ves "onclick="window.open(this.href); return false;" consigue que se abra en otra página.

Y la pregunta que me hizo Terenya y que ha provocado este post es que como conseguí ponerlos todos en linea. Para esto tuve que modificar un poco la Plantilla, me fui a la Plantilla/Personalizar/ajustar ancho y tuve que ampliar la barra lateral derecha (la he dejado de 330px), y ya conté que los botones son de 50x50px (pero fue un poco, prueba error .hasta que lo conseguí, usando el firebug que es una herramienta de desarrollador del firefox fue como lo fui cambiando).


Espero que te sirva para hacer tus iconos sociales super molones. 

Saludines y buen día...