martes, 13 de marzo de 2018

Cómo poner BOTONES DE REDES SOCIALES PERSONALIZADOS en tu blog


Si me sigues desde hace tiempo, te habrás dado cuenta de que recientemente he cambiado la manera en que se ven los botones de redes sociales en mi blog. La verdad es que empecé este blog sin tener ni idea de cómo llevarlo y he ido aprendiendo día a día, disfrutando de este camino. Al principio tenía simplemente una lista con las URLs de mis redes sociales en el menú de la derecha. Después, me actualicé y me sentí increíblemente orgullosa de mí misma por ser capaz de poner los botones de redes sociales que ya le dieron otra imagen completamente distinta al blog. 

Pero últimamente, ya no estaba tampoco satisfecha con esto. ¿Por qué? Porque me parecía que igual era una sección que yo había hecho demasiado amplia y que probablemente hiciera que mis lectores no prestaran atención al resto de elementos en el menú lateral. Además, viendo otros blogs, me encantó la manera en que sus botones de redes sociales quedaban perfectamente integrados dentro de la estética de la página, mientras que los míos eran todos diferentes.


Esa es otra de las grandes lecciones que he aprendido desde que empecé este blog: aprende de otros bloggers. De hecho, puede que en un tiempo haga una entrada sobre todo lo que he descubierto (y lo que me queda por descubrir) desde que comencé.

Pero, de momento, centrémonos en los botones. Por diversas razones, yo decidí cambiar los míos. Y la verdad es que pensé que sería mucho más difícil. Pero no. De hecho, me llamó la atención que fue muchísimo más complicado poner los botones la primera vez, aquellos botones desiguales, que ahora que podía elegir el diseño que yo quisiera.

Así que, si tú también quieres añadir botones personalizados a tu blog, sigue leyendo, estás en el sitio indicado

1. Lo primero que debes hacer es buscar los iconos que deseas instalar en tu blog. 


Hay muchísimos creadores de este tipo de iconos que los comparten para que otros podamos descargarlos, ya sea de forma gratuita o de pago. Personalmente, creo que lo más sencillo es hacer una búsqueda de imágenes en google o el buscador que sea, para tener una idea rápida de si es lo que necesitas o no. Si tienes una idea clara de la estética que quieres que tengan tus iconos, sé concreto para encontrarlos lo más rápidamente posible. Ten en cuenta también qué redes sociales necesitas que estén incluidas en tus botones, ya que es fundamental y no todos los packs de iconos incluyen las mismas.


Si te gustan mis iconos, puedes descargarlos aquí

2. Una vez que tengas tus botones descargados, recuerda que si quieres editarlos de cualquier manera, debes mantener siempre su formato PNG

3. Lo siguiente será crearte una cuenta en cualquier tipo de sitio web que te permita subir imágenes, creando una URL para ellas. Yo he usado ImageShack, que es un servicio de pago, pero tienes 30 días gratis y es bastante rápido y sencillo de usar.

Simplemente, crea una cuenta con tu email o Facebook, y sube (de una en una) las imágenes de tus iconos. Debe aparecerte una pantalla como esta:


4. Copia el link que te aparece en el espacio que he resaltado en el ejemplo con un círculo rojo. Pégalo en un archivo de Word para no perderlo. Es importante que no te saltes este paso porque vamos a seguir copiando cosas y tu URL ya no estará copiada, con lo cual no podrás simplemente pegar

5. Ahora, vamos a Blogger, hacemos clic en el apartado "Diseño" del menú de la izquierda y clic en "Añadir un gadget" Yo lo he puesto en el sidebar derecho pero tú puedes ponerlo donde más te guste


Añadiremos el gadget llamado "HTML/Javascript"


De título del gadget puedes poner lo que quieras, yo he puesto "¡Sígueme!"

En el cuerpo del gadget debes copiar y pegar lo siguiente:

<a href="xxxxxxxxxx"><img src="yyyyyyyyyyy"></a>

Debes sustituir "yyyyyyyyyy" por la URL que habíamos copiado de tu icono, manteniendo las comillas, y "xxxxxxxxx" por la URL del sitio web al que quieres que te dirija esa imagen.

Por ejemplo, con la imagen de Google+ que yo había subido, sustituiría "yyyyyyyyy" por la URL que me dio ImageShack y "xxxxxxxxxx" por el link de mi perfil de Google+

6. Podemos repetir el proceso todas las veces que queramos para añadir la cantidad de iconos que necesitemos. Para añadirlo en el mismo gadget, simplemente pulsamos enter entre código y código; los iconos se ajustarán a la medida de nuestro blog, de manera que cuando no quepan más de forma horizontal, se añadirá otra fila. Si los queremos de forma vertical, debemos añadir sólo un icono por gadget

Si tienes alguna duda, escríbemelo en los comentarios o mándame un email a creatingmyhappyplace@gmail.com e intentaré resolverlo. Y, si te ha gustado esta entrada, ya sabes...  usa los nuevos botones para seguirme en las redes sociales 😊

Sígueme en...

2 comentarios:

  1. un post muy útil, la verdad
    bss preciosa
    kss
    =)
    New post up in my Lifestyle Blog !

    ResponderEliminar
    Respuestas
    1. Muchas gracias por pasarte, tesoro :) Me alegro de que te haya sido útil

      Eliminar