martes, 11 de agosto de 2015

Paso a Paso | ¿Cómo agregar botones o iconos de redes sociales a nuestro blog?

¡Hola! A mi en cierto modo me costó un poco colocar los íconos de redes sociales en mi blog.
Quiero aclarar una cosa desde ya. Esta entrada no es sobre cómo editar dichos iconos de mil y un formas extravagantes, es para saber cómo colocarlos en blogger, sin embargo, les diré cómo le puse colores a los míos, es un plus, y quizás a todos no les parezca viable. Voy a explicar cómo yo los agregué al blog de una forma sencilla, puesto que no tengo programas como photoshop, y sé que muchos tampoco, por lo que les comparto mi experiencia.
Esta es la primera entrada del segmento "Paso a Paso" del blog. Así que vamos a ello:
Lo primero que hice fue buscar una imagen de apoyo en Google Imágenes.



A mi, personalmente, me gustaron más los estilos en blanco y negro, y si quieren un acabado como los iconos que yo tengo, son mejores estos, pero pueden escoger el que les guste y editarlo en su plataforma favorita.



Bien, una vez escogido el icono lo guardé y verifiqué que estuviera en formato png.

Posteriormente lo abrí con paint y cambié el tamaño de la foto original, porque el icono debe ser pequeño para que quepa en la barra lateral del blog; por lo que cambié su tamaño a 72x72 px, pero ustedes lo pueden poner más grande o más pequeño, el tamaño es cuestión de gustos.


Posteriormente, guardé la imagen, y abrí un programa que descargué, llamado KVAD Photo+ ahí encontré un montón de efectos, escogí el que más me gustó y se lo apliqué a la imagen; que por tener el efecto png con los colores blanco o negro agarró ese efecto, no sé si ocurra lo mismo con una foto de color.


Una vez creado esto, tenía que encontrarle una dirección a la imagen, para eso, me fui a blogger, como si fuera a crear una entrada común, luego agregué la imagen y después busqué el link que blogger le asignó, en la edición HTML. Muchas personas utilizan páginas para obtener estos links, como Tynipic, también es válido. La cuestión es que yo veo más cómodo sacarlo de aquí.



El código HTML para poder agregar los botones al blog lo dejaré en un cuadro de texto al final de esta entrada para que puedan copiarlo.

Ahora bien, ¿Por qué hacemos esto? Debido a que el código nos lo pide:

<a href="LDTRS" target="_blank"><img alt="Instagram" src="IMAGEN" title="Instagram"/></a>

Donde está el color morado va el link de tu red social; es decir, la URL de tu página personal donde deseas que te sigan, ya sea de Twitter, Facebook, Tumblr... 
Donde está el color verde colocaremos el nombre de la red social del icono que estamos colocando (en este caso "Instagram"), dicho nombre de la red social, aparecerá cuando se coloque el mouse sobre el botón.
Donde está el color amarillo colocaremos la URL/link de la imagen de nuestra red social que obtuvimos de la entrada de blogger, o de la página de nuestra preferencia (tynipic, etc).

Luego de esto nos vamos a blogger ―» diseño ―» añadir un gadget ―» HTML/Javascript.

Lo añadimos, y damos clic a "Editar HTML" y copiamos nuestro código completo.


En el título del gadget se coloca que si "Sígueme en...", "Encuentrame en..." y similares.

Hice el mismo procedimiento con los iconos/botones de redes sociales que quería y luego le di a "guardar".



Ese es el resultado final, espero que les sirva de mucha ayuda. Aquí les dejo el código que necesitan:



No hay comentarios.:

Publicar un comentario

¡Gracias por comentar! -así sea un emoji- por tu comentario el blog va creciendo más, y me brindas tu apoyo para seguir haciendo lo que hago🥳