Como personalizar los iconos de las redes sociales

julio 06, 2013


Sois muchos los que me habéis preguntado por email en este tiempo la manera de personalizar los iconos de vuestras Redes Sociales. La verdad es que es algo interesante si queremos mantener la estética de nuestro Blog intachable. 

De momento, he preparado algunos paquetes de iconos, de varias formas y colores, podéis descargar el que más os guste e instalarlo como gadget HTML/Javascrip en el sidebar de vuestro Blog como os cuento en el tutorial de más abajo.

Para poder seguir el tutorial, necesitáis tener un sistema de almacenamiento de archivos en la nube, os aconsejo Dropbox, para descargarlo y aprender las nociones básicas podéis seguir los pasos que os enumero de manera detallada en esta entrada.


Iconos Redes Sociales Personalizados

Para descargar los diferentes iconos tan solo tenéis que pinchar sobre el diseño elegido y guardarlo.

Flores



Círculos



Como instalar los iconos de redes sociales en el sidebar de mi Blog




1.- Subimos los iconos elegidos a una web de almacenamiento de archivos online, tipo Dropbox, Picasa y similares.

2.- Copiamos la URL de nuestra imagen.

3.- En el panel de Diseño de Blogger, creamos un nuevo gadget HTML/Javascript.

4.- Copiamos en él el siguiente código:



5.- Cambiamos lo que aparece EN MAYÚSCULAS por nuestros enlaces personalizados.

6.- Si queremos añadir otra red social, solo tenemos que añadir de nuevo el código que aparece entre <td> y </td>, que sería una nueva celda, añadiendo los correspondientes enlaces. 

7.- Publicamos ¡y listo! Ya tenemos nuestros propios iconos de redes sociales personalizados en nuestro Blog. Probad con diferentes tamaños hasta que consigáis el resultado esperado sin que se salgan del sidebar, si incluis más de tres, podéis hacerlo en dos o tres tandas en diferentes gadgets.


¡¡Espero que os haya sido útil y haber respondido a vuestras dudas!!

Un fuerte abrazo,

Celia ♥





Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

32 pensamientos ¡falta el tuyo! ;)

  1. Respuestas
    1. ¡¡Gracias, guapa!! estos son muy sencillitos, tengo más en el "horno" jejeje

      por cierto, ¡me encanta el nuevo look de tu blog! :D

      Eliminar
  2. Me encanta esta entrada!!! A ver si de una vez cambio los míos.

    Los rositas son una monada! Gracias Celia.

    ResponderEliminar
  3. Hace poco me hice unos, yo use para guardar la imágen picassa, me apunto lo de dropbox.
    Me gusta como te han quedado los tuyos, además lo has explicado de una forma sencilla ;)

    Besos!!

    ResponderEliminar
    Respuestas
    1. Es lo que intento, yo cuando empecé con esto la verdad que casi tuve que aprender chino para enterarme de las cosas jajaja Por eso intento simplificar al máximo todo lo que sea posible ;)

      ¡¡Besos!!

      Eliminar
  4. Este post va directo a mis favoritos, gracias por compartirlos! Un beso Celia

    ResponderEliminar
    Respuestas
    1. ¡¡Gracias a ti, guapa!!

      Besos y feliz tarde de domingo ;)

      Eliminar
  5. Me encanta como está quedando el blog! por cierto me llevo las flores, y para que me quede mejor, podrías haber dicho como ponerlos en horizontal, estoy volviéndome loca!!! Un beso guapa.

    ResponderEliminar
    Respuestas
    1. Pues estos aparecen en horizontal, es con la orden: style='display:inline-block;'

      ¿Como te salen?

      Eliminar
  6. En vertical. Imagino que será del tipo de plantilla, no? Tengo la plantilla simple.

    ResponderEliminar
    Respuestas
    1. ¿pero has usado este código? porque con éste salen en horizontal...

      Eliminar
    2. He mirado tu código y no es éste y no tienes la orden para que aparezcan en horizontal, por eso te salen en vertical, guapa :)

      Tienes que copiar el código del cuadrado tal cual, cambiando solo tus enlaces donde aparece el texto en mayúsculas.

      Yo también tengo la plantilla simple, eso no tiene nada que ver, no te preocupes ;)

      Eliminar
  7. Ah! claro, abrí una cuenta con tu tutorial de Dropbox. Las subo allí y ya lo hago, verdad? Bueno, a ver si me sale. Te voy contando. Buenas noches guapa.

    ResponderEliminar
    Respuestas
    1. No no, eso no tiene nada que ver, yo no voy a borrar las imagenes de aqui, así que no te preocupes que no desaparecerán. Me refiero al código HTML/Javascrip de tu contenedor de iconos sociales.

      Tienes que poner el código que he puesto dentro un cuadrado en el tutorial.

      Es una tabla donde van alineados los iconos horizontalmente. La tabla y la orden style='display:inline-block;' hacen que salgan en horizontal y no en vertical.

      Tendrías que añadir tus enlaces donde lo pone y te funcionaría perfectamente.

      Eliminar
  8. Celia, me está quedando un blog precioso con tu ayuda. Gracias!

    ResponderEliminar
  9. Hola Celia, me acabo de dar cuenta que no funciona el de pinterest. Pinterest me pide verificar y no logro dar con la clave. Podrías ayudarme? Lo repaso todo y lo veo bien

    ResponderEliminar
    Respuestas
    1. ¡Hola guapa! Revisa el enlace que has asignado al icono, me vuelca esto al clickar encima:

      http://www.lascositasdelucas.com/www.pinterest.com/cositasdelucas

      Cambialo por: https://www.pinterest.com/cositasdelucas/

      ¡Ya me cuentas!

      Besos :)

      Eliminar
  10. estoy aluciando con todas las cosas que tienes por aquí!

    ResponderEliminar
  11. muchas gracias por los iconos y el tutorial, lo he hecho y ya los he conseguido poner en mi blog : - )

    besos

    ResponderEliminar
  12. Hola celia ,llevo tiempo siguiendote y he hecho muchos de tus tutoriales y post. Un problemita he hecho exactamente como indicas y he añadido todos los botones de mis enlaces ,pero solo me funcionan los tres primeros que tu has puesto. He hecho lo de añadir exactamente como indicas y los demas no funcionan al clicar.
    Puede ser que lo haya puesto debajo de las paginas en vez de en el sidebar?
    puedes verlo en www.tachuelasdiy.com

    ResponderEliminar
  13. Me ha ido muy bien tu explicación. Muchas gracias por todas tus entradas.
    A ver si, poco a poco, voy mejorando mi blog. Un abrazo

    ResponderEliminar
  14. Muchas gracias por este tutorial, ha sido el único que me ha servido para poner los iconos alineados en horizontal. Llevaba dos días intentándolo! :D

    Laura

    ResponderEliminar
  15. hola, tengo un problemilla, he seguido todos tus pasos pero las imágenes subidas a dropbox no me aparecen, alguna idea de que estoy haciendo mal?

    ResponderEliminar
    Respuestas
    1. ¡Hola, Alba!

      Comprueba que añades el enlace correctamente respetando las comillas y si sigue sin aparecer, prueba a subir las imágenes a otra plataforma como Picasa / Google Fotos.

      ¡Feliz finde! :)

      Eliminar
    2. ¡Hola!Yo tengo el mismo problema. He probado con Dropbox y con Google Fotos y nada. No se ven

      Eliminar
  16. Hola, cómo puedo añadir un enlace a cada icono? Gracias

    ResponderEliminar
  17. He probado subiendo los iconos a Picasa y a Dropbox y no hay manera, no aparecen los iconos. El enlace es público,

    https://picasaweb.google.com/lh/photo/z3sSl42Lo03aIHKfu0DL4NMTjNZETYmyPJy0liipFm0?feat=directlink

    https://www.dropbox.com/s/ql2puomq6zvcvfl/facebook-5-32.png?dl=0

    ResponderEliminar
  18. Yo tampoco consigo ponerlos, qué lástima!! He subido los iconos a Dropbox y a Drive, y nada, no hay manera....

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.