Poner Botones para los iconos sociales en Blogger

martes, 26 de marzo de 2013

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

26 comentarios :

  1. Hola!!!! ooohhh!!! lo tengo que leer con más calma que a estas horas estoy algo espesa.
    Esto le puede servir a muuucha gente, no solo a mi. :)
    La verdad es que ahora, si, me gusta como lo tengo, pero quiero aprender a hacerlos como explicas porque nunca se sabe... y seguidos es muy chuli tenerlos. No sé... A ver qué opinan las demás!!
    Gracias eres un solete muy muy grande ❤❤❤❤!
    Besotes!!

    ResponderEliminar
    Respuestas
    1. si la verdad que estas cosas pueden ayudar o dar ideas a las demas... si entras en el blog de prueba que he hecho... tienes tus botoninos... pero en cuanto me digas que los vistes y tal, los quito, era solo para que los vieras tu...

      Eliminar
    2. es que no encuentro el blog de pruebas...

      Eliminar
    3. quiero decir que si pincho encima de la foto, se me amplía, pero no me lleva a ningún enlace. No sé si me explico.

      Eliminar
    4. ya, no puse enlace porque cuando lo elimine no quería que me quedase ningun enlace roto... si entras en mi perfil, ahi te salen mis dos blogs, pincha al de prueba...

      Eliminar
  2. A mi me gustan los de las dos, cada una en su estilo. Terenya, no los cambies, que puestos en bloque también quedan chulos ¡¡¡

    ResponderEliminar
  3. Ya lo vi el de pruebas!!! al ir en busca de tu mail!!! no sé, no se... muy pequeñines... los tuyos si quedan bien, pero los mios no sé... estoy indecisa...

    ResponderEliminar
    Respuestas
    1. es eso... que los tuyos lucen guays grandes... lo unico que se me ocurrió fue que no los enmarques... y los dejes sin marco y tal vez se pueda poner más grande... o agrandar el tamaño de la barra... los tienes sin el marco??? me los puedes pasar ??? y hacemos otra prueba...

      Eliminar
    2. he ampliado un poco mas las dimensiones, pero siguen siendo pequeños... y poner la barra lateral mas grande no queda bien...pasame si puedes lo que te pido, y hacemos otra prueba... ademas ayer se me fue la pinza, pero hoy le pregunto a mi colega que opina...

      Eliminar
  4. Me ha encantado el tutorial es buenisimo,besos

    ResponderEliminar
    Respuestas
    1. gracias... la verdad que se me olvido deciros que con el codigo html tengo ayudina de mi amigo Manu.... podeis ver su web en los amigos de Patry... Mas maquetacion.... yo tengo enchufe... pero lo que hago no tengo problema en contarlo...

      Eliminar
  5. Gracias por compartir guapa! Siempre voy buscando iconos que sean originales y no termino nunca de encontrar algunos chulos para mi blog!! Estos son muy bonitos, además con tutorial!!

    Nos vemos, un beso!

    Rosa.

    ResponderEliminar
    Respuestas
    1. la verdad que lo mio fue ponerse... toda la inspiración me la dieron cuando vi esas fuentes tan chulas... saludos...

      Eliminar
  6. Yo tuve la suerte de encontrar unos botones estilo sello como mi logo y solo cambie alguna cosilla con photoshop ;-)

    muacarmen.blogspot.com
    www.muacarmen.com

    ResponderEliminar
  7. La palabra Photoshpo Y salgo huyendo ;). A ver cuando me pongo a ello jejejejejeje!

    ResponderEliminar
    Respuestas
    1. yo no lo controlo mucho... ahora estoy empezando a entender lo de las capas y todo eso... pero mira poco a poco ovy haciendo cosas...

      Eliminar
  8. Hola!!, un mes o más mas tarde estoy de nuevo con esto... quiero probarlo, pero me cuesta mucho entenderte aunque está muy bien explicado... pero soy bastante cateta con la informática...
    ¿cuándo abres el gadget pone un recuadro y titulo y otro recuadro con contenido... allí ya me he perdido... qué desastre!!
    Por otro lado... no tengo albun picasa ¿? quizás lo pruebe desde blogger... Cómo me cuesta!!

    ResponderEliminar
    Respuestas
    1. no te preocupes, yo te explico dentro de lo que se, lo que haga falta y las veces que haga falta... dentro del gadget, el codigo html lo tienes que poner en "contenido", y en titulo si quieres que ponga algo en plan "Donde Seguirme"... o lo que sea, lo pones, yo por ejemplo no puse nada en titulo porque no quise... haz pruebas...

      y realmente donde te guarda blogger las fotos que subes a tu blog es un album picasa, por lo que si deberias tenerlo... lo que puedes hacer es crear una entrada, y subir los botones, pero esa entrada no la publicas, y luego ya puedes ir a picasa, entrando con los datos que entras en blogger, y deberías de tener todas tus fotos ahi... y entonces seguirías los pasos que pongo ahi para copiar el codigo html...

      Eliminar
  9. Ya lo he hecho!! pero al final de otra manera, pues siguiendo tus pasos no me encontraba, me liaba más y más... y al final, de la manera más simple me ha salido... qué cosas!! Todo desde Blogger...
    Es que me pongo tozuda y hasta que no me sale... no paro...
    Perdona las molestias.
    Besos

    ResponderEliminar
  10. Hola guapísima!!
    Muchas gracias por este estupendo tutorial. La verdad es que llevaba tiempo queriendo cambiar los iconos pero entre la pereza de buscar unos y que no tenía ni remota idea de como hacerlo siempre lo iba posponiendo.
    Estos días de vacaciones de los críos me he dicho... a ratitos actualizas un poco las partes estáticas del blog que ya toca y tras mirar y remirar he dado contigo! La verdad es que de todos los articulos/tutoriales que he encontrado el tuyo es en el que mejor se explica así que gracias de nuevo!
    Pero no todo iba a ir sobre ruedas jajaja algo tenía que fallarme y es que o cosigo ponerlo en línea y he probado tu consejo de modificar las dimensiones pero nada!! uno, otro debajo y luego tres bien alineados jajaja lo he mirado y remirado, ya veis la hora que es jajaja pero que si quieres arroz!
    A ver si tu o alguna de las chicas que lo han hecho me pueden echar una manita :D
    Gracias por adelantado y enhorabuena por tu blog!
    :*

    ResponderEliminar
    Respuestas
    1. He entrado en tu blog... Y con una herramienta de desarrollador he visto el código... Bueno el tema, detras de cada de los tres primeros he visto un
      , si pruebas a quitarlo, creo que funcionaria...

      Lo pruebas y me dices si te funciono... porque si no, desde el curro tengo un compi que controla de html y maquetación y a lo mejor nos puede ayudar...

      saludines y gracias por pasarte por aqui....

      Eliminar
    2. He ido probando y he conseguido... no sé cómo... que los cuatro primeros queden en línea pero el último se resiste con todas sus ganas :S

      Gracias por echarme una mano :)

      Eliminar