☀️ Editando los Botones de Redes Sociales
Fuente de Imagen y Ediciòn a Partir de Plantilla en Pixlr.com
☀️ Editando los Botones de Redes Sociales
En mi publicación anterior Botones de Redes Sociales en Mi Blog les compartí una manera sencilla para colocar algunos botones que nos sirvan para dirigir a nuestros lectores o visitantes del blog a nuestras redes sociales.
En esta ocasión y para complementar la información allí compartida, les quiero presentar algunas maneras de como pueden utilizar estos botones en sus blogs. La intención es presentarles algunas ideas simples que puedan ayudarles a hacer más vistosas esas entradas con esta interesante alternativa.
Botones con Texto
Para entrar en contexto, quiero que observen la forma como están colocados los iconos que yo uso en mi post, que se encuentran al final de esta y en cada una de las entradas de mi blog. En principio solo tenía tres de esos botones y estaban colocados en una tira de botones junto a otras opciones que recomiendo. Desde hace unos seis meses los coloqué de esta manera, ya que me parece una forma muy agradable. Si te gusta esta opción, te coloco el código a utilizar y te explico como lo debes editar para adaptarlo a tu gusto.
Código Para Copiar
<div class="pull-left">
<a href="TuEnlaceAqui" rel="nofollow noopener" title="This link will take you away from the app"><img src="https://images.hive.blog/40x40/https://images.ecency.com/DQmUf6r263rPFSbmzxswWA8MzhNTYSEU3uA8hRt77uMtALS/image.png" alt="IconFacebook.png" /></a>
<a href="TuEnlaceAqui" rel="nofollow noopener" title="This link will take you away from the app"><img src="https://images.hive.blog/40x40/https://images.ecency.com/DQmNasK2s9BHBrFPKY82cG73vtnrXWVVHFbjXAAShgBGVQ4/image.png" alt="IconInstagram.png" /></a>
</div>
<div class="text-justify">
Este post es de mi autoría y expreso en él, mis experiencias y aprendizajes cada día en este Blockchain. Todas las imágenes son editadas por mí y corresponden a capturas realizadas en mi PC y las fuentes están indicadas en cada caso. Si te gusta, puedes dejar un comentario u opinión y tu voto favorable.
</div>
Vista Previa del Resultado
Este post es de mi autoría y expreso en él, mis experiencias y aprendizajes cada día en este Blockchain. Todas las imágenes son editadas por mí y corresponden a capturas realizadas en mi PC y las fuentes están indicadas en cada caso. Si te gusta, puedes dejar un comentario u opinión y tu voto favorable.
Podrás notar que solo he colocado dos de los botones y he eliminado parte del texto que lo complementa. Puede que te guste esta opción si solo quieres usar dos botones, pero podrías usar solo uno o, añadir uno más para que sean tres botones. En cualquiera de los casos, deberás editar el texto, el cual debe ser de tu autoría y que exprese lo que quieras colocar allí. Se me ocurre quizás una breve descripción de quien eres, que haces y que te hace única/o como creador de contenido en Hive.
Si tu texto excede el espacio de los botones que utilices, este se colocara debajo de los iconos y si, por el contrario, se queda más corto, lo que coloques debajo de este bloque se meterá en ese espacio libre. Puedes evitarlo colocando una línea al final del bloque con tres asteriscos </div> / ***, pero lo ideal es colocar el texto que cubra todo el espacio de los botones a la izquierda.
Una variacion puede ser colocar los botones del lado derecho, lo que hara que el texto se ubique al lado izquierdo. Para lograrlo, cambia la etiqueta que ubica al lado izquierdo <div class="pull-left"> por la que ubica al lado derecho <div class="pull-right"> y nunca olvides cerrar el bloque con la etiqueta <div>. Esto te evitara dolores de cabeza.
Botones con una Imagen
Puedes usar, junto con tus botones, una imagen o banner que identifique quien eres y lo que haces. Veo muchos blogs que usan como pie de sus entradas, un banner con alguna descripción y los logos de sus redes sociales, pero, que solo es eso, una imagen que no dirige a ningún lado. Seguramente, esta será la opción que implemente en mi propio blog dentro de poco, ya que me gusta mucho. Para hacer esto, debes crear un banner que se ajuste a la cantidad de botones que quieras colocar en tu blog y subirlo en el espacio donde va el texto.
Las medidas aproximadas para dos botones estarían por el orden de los 650/730 X 120/150 píxeles. Para tres botones serían 650/730 X 190/230 píxeles aproximadamente. Es cuestión de jugar y encontrar la medida que se ajuste a tus deseos. Te muestro un par de opciones que he editado, para lo cual he creado un banner en Pixlr.com, pero que también lo puedes hacer en Canva o de la forma que mejor te parezca.
También puedes colocar la imagen al lado izquierdo y los botones al lado derecho, realizando el mismo procedimiento indicado anteriormente con el cambio de etiquetas de alineación. Recuerda que puedes agregar o quitar botones a tu conveniencia, copiando y pegando los códigos que coloque en él post anterior. De igual modo, puedes agregar cualquier otra red social, ubicando el icono correspondiente, cargándolo en tu editor preferido y luego de cargado, copiando la dirección de la imagen, en el espacio correspondiente a la imagen del icono dentro del código. Puedes ajustar los tamaños de los iconos, editando esta parte del código: <img src="https://images.hive.blog/40x40/..., colocando en donde están los números (40x40) las medidas que consideres adecuadas para tu icono.
Botones Arriba o Abajo
Quizás no quieras complicarte mucho y prefieras esta opción. Se trata de ubicar los botones, en vez de a los lados, según lo que hemos visto, más bien arriba o debajo, bien sea del texto o el banner. Esta es una opción mucho más simple, ya que solo requiere jugar con la alineación de los elementos que utilicemos.
Para esta opción, te muestro como se vería colocando los botones en la parte superior y el texto debajo, y la opción de colocar el banner arriba y los botones abajo. Esta última es la que más me gusta y solo requiere usar las etiquetas de centrado <center></center> para el banner y los botones y la de justificado <div class="text-justify"></div> para el texto, eliminando las etiquetas de alineación a los lados.
Para que los iconos queden alineados uno al lado del otro, deberás colocar los códigos uno seguido del otro, separados por un espacio. No olvides colocar tus enlaces y verificar que están funcionando correctamente.
Pienso que esta es una buena manera de hacer más sociables nuestras publicaciones, agregando una ruta directa a nuestras redes sociales desde Hive. Aunque web3 nos brinda un universo distinto de interacción, usar el innegable poder que tienen las redes sociales tradicionales para maximizar esas conexiones, es un factor que no debemos descuidar, más aún si tenemos mucha actividad en estas redes. Espero que esta publicación les sirva de ayuda, especialmente a la amiga @creacioneslelys y estaré muy complacido si me invitan a ver el resultado en sus blogs, si es que deciden usarlos. Como siempre, estoy atento a cualquier duda, requerimiento o sugerencia. Espero leer sus impresiones en los comentarios.
Este post es de mi autoría y expreso en él, mis experiencias y aprendizajes cada día en este Blockchain. Todas las imágenes son editadas por mí y corresponden a capturas realizadas en mi PC y las fuentes están indicadas en cada caso. Si te gusta, puedes dejar un comentario u opinión y tu voto favorable.
This post is of my authorship and I express in it, my experiences and learnings every day in this Blockchain. All images are edited by me and correspond to captures made on my PC and the sources are indicated in each case. If you like it, you can leave a comment or opinion and your favorable vote.
 |
 |
 |
 |
) |
 |
|---|---|---|---|---|---|
Edición de Imágenes con/Images Editing by Pixlr.com
Traducido con/Translate with DeepL Traductor
Ortografía y Gramática con/Spelling and Grammar with Corrector Castellano.com
Que esperas para unirte a nuestro trail de curación y formar parte del "proyecto CAPYBARAEXCHANGE", tu casa de cambio, rapida, confiable y segura
Hola. Estoy practicando para dejar listas algunas plantillas, muchas gracias por dejarnos estos tips que están bastante completos. 😁
Hola mi amigo, la verdad te agradezco por dejar el código , pues facilita mucho el trabajo. Dejare guardado en favoritos esta publicación, porque cada vez que la necesite para dar la referencia a alguien, lo enviare para aca.
Saludos amigo, que bien qu te haya servido. Agradecido por la visita mano.
Hola @fragozar01 quiero darte las gracias por estas publicaciones tan útiles y bien explicadas. Ya hoy logré colocar los botones de mis RRSS junto a mi banner, este Plus quería tenerlo desde hace tiempo.
Gracias nuevamente 😍
Hola que bueno, eso me encanta. Fui a echarle un vistazo y quedo genial, me gusto. Recuerda que tambien puedes colocarlos una al lado del otro, quizas te agrade. Para ello, solo coloca los codigos uno al lado del otro y los separas con espacios. Aunque como estan colocados se ven muy bien. Me complace te haya sido util. Exitos.
No... ya lo vas a ver, en mi próxima publicación, que subiré más tarde... Ya verás lo que hice gracias a ti, ya te daré mi agradecimiento y créditos respectivos 🤗