Iconos de redes sociales para tu blog
Angela
domingo, julio 11, 2021
0 Comments
Vamos a colocar Iconos de redes sociales en nuestro blog o también para paginas web, traigo muchos iconos sociales y están listos para colocarlos en tu blog o web, si usas wordpress, blogger o cualquier otro servicio no te preocupes el código de estos botones sociales esta optimizados y la imágenes también, así tendrás mas popularidad entre tus seguidores
Configurando los iconos sociales
Bien, después de tener los iconos veras que cada código generado tiene esta forma:
<a href="URL" target="_blank"><img loading="lazy" alt="Sígueme en facebook!" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkL59p7bv8TYrN_zh_ZfLn5fXHtp0eMGpky7-ZYgUUYJmchZhU8Rl8gfBZpH5xxbftjgLle2-LztCcwm4V5c5dq6YA2OWDEyq-Du-eOTsUts-0Rqf3liRNjaiil-i2k8eCYERhAwM2Bw4/s1600/facebook2.png" title="Sígueme en facebook!"/></a>
<a href=" URL/" " target="_blank"><img loading="lazy" alt="Sígueme en instagram !" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-4lUO20JG1QS07rDQxrTwZAB-4bN7t4Pd73ZxQP_R4gTGgTC-vkbvxqOZdUJRO-9AYB8aVxD6jvsiMudIqN5YEfPzK86nXpsw8oOoSFm9tkE5m74dS73-EsO8_eTU0OYHbBMMg8N0-o/s1600/instagram.png" title="Sígueme en instagram !"/></a>
<a href="URL" target="_blank"><img loading="lazy" alt="Sígueme en pinterest!" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi90Oac9xVQT22PGA9Z3crVEuLDSpP5z_fFchyphenhyphendsUG7acXeZjsAA3pPQZTM0KoxzixPC91XfTb7RoRAUkHXKEYTLt0dfjpKwzV6NMA4mIzTH8mA58x8FxC0Oqht35IwSuuzBDuFr-qm2U/s1600/pinterest2.png" title="Sígueme en pinterest!"/></a>
<a href="URL" target="_blank"><img loading="lazy" alt="Sígueme en twitter!" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fw3HcrlKAdRIaeMhyphenhyphenS4was4yNYFOgsex9MIuhISsFLkI50AAIrh6XNVK9Mg8Ps3YwWcUHYs5bdWa8XkunhlzB6eVbw4du71FHTxfOjBPBQsZkrrGmAN9eWTMxfxfRcTIMi5mJEaMN3s/s1600/twitter.png" title="Sígueme en twitter!"/></a>
Veamos que hacen las partes marcadas mas otras que están en el código, así podrás personalizar aun mas tus iconos sociales.
Lo que esta en rojo debes remplazarlo por la url de tu usuario o pagina en la red social o lo que sea que escogiste, por ejemplo, si tengo pagina de facebook, copiare la URL y la reemplazo por la de rojo, se hace lo mismo si elegiste twitter, google+ etc.
Lo que esta en color azul es el texto que mostrara al pasar el cursor, en el generador podrás agregar la frase que quieras, en nuestro ejemplo pondría: ¡sígueme en facebook!.
El color verde es el texto alternativo, este es el mismo que el del titulo, este por si la imagen por alguna razón no se pudo cargar, muestre el texto para dar a entender a que se refiere la imagen.
El fragmento target="_blank" se usa para abrir enlaces en otra pestaña del navegador, esto para que las personas puedan acceder a tu pagina social sin abandonar tu blog. si no quieres eso pues simplemente elimina esa parte.
Las partes height=”40″ y width=”40″ no creo que necesiten presentación, pero igual, son el ancho y alto de la imagen, en el generador puedes elegir un valor entre el 35 y 90.
Personalizar los estilos de los iconos
Vamos ahora a darle algunos efectos, esto es totalmente opcional y si no quieres pues ignora esto. Como puedes ver en el generador esta la opcion de escoger un icono redondo, no es un icono redondo por aparte del cuadrado como tal, solo estamos aplicando estilos para personalizarlos.
Para usar estos efectos vamos a necesitar hacer uso de un contenedor, esto ara identificar las imagenes de nuestros iconos y poder aplicarles los efecto específicamente a ellos, entonces todos los códigos que elijas pégalos dentro de este código:<div class="iconos-sociales"> ... aqui van los códigos .... </div>
Iconos sociales redondos
En el código cuando se escoge la opción: redondo, no aparece nada adicional, osea que no hay cambios extra, la opcion es mas que todo para dar un vista previa de como se verian con el efecto redondeado, si quieres el icono de esa manera entonces agregaremos un código justo debajo del contenedor que mostre arriba, el resultado final se vera así:
<div class="iconos-sociales">
... aqui van los códigos ....
</div>
<style>.iconos-sociales img{border-radius:50px;}</style>
Si no deseas los iconos totalmente redondos, puedes ajustar el valor que esta entre las etiquetas <style>, específicamente el fragmento border-radius:50px; a 30px por ejemplo, y tendran sutiles toques redondeados.
Si no deseas los iconos totalmente redondos, puedes ajustar el valor que esta entre las etiquetas <style>, específicamente el fragmento border-radius:50px; a 30px por ejemplo, y tendran sutiles toques redondeados.
Aquí los códigos ajustados...
<div class="iconos-sociales">
<a href="URL" target="_blank"><img loading="lazy" alt="Sígueme en facebook!" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkL59p7bv8TYrN_zh_ZfLn5fXHtp0eMGpky7-ZYgUUYJmchZhU8Rl8gfBZpH5xxbftjgLle2-LztCcwm4V5c5dq6YA2OWDEyq-Du-eOTsUts-0Rqf3liRNjaiil-i2k8eCYERhAwM2Bw4/s1600/facebook2.png" title="Sígueme en facebook!"/></a>
<a href=" URL/" " target="_blank"><img loading="lazy" alt="Sígueme en instagram !" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5-4lUO20JG1QS07rDQxrTwZAB-4bN7t4Pd73ZxQP_R4gTGgTC-vkbvxqOZdUJRO-9AYB8aVxD6jvsiMudIqN5YEfPzK86nXpsw8oOoSFm9tkE5m74dS73-EsO8_eTU0OYHbBMMg8N0-o/s1600/instagram.png" title="Sígueme en instagram !"/></a>
<a href="URL" target="_blank"><img loading="lazy" alt="Sígueme en pinterest!" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi90Oac9xVQT22PGA9Z3crVEuLDSpP5z_fFchyphenhyphendsUG7acXeZjsAA3pPQZTM0KoxzixPC91XfTb7RoRAUkHXKEYTLt0dfjpKwzV6NMA4mIzTH8mA58x8FxC0Oqht35IwSuuzBDuFr-qm2U/s1600/pinterest2.png" title="Sígueme en pinterest!"/></a>
<a href="URL" target="_blank"><img loading="lazy" alt="Sígueme en twitter!" height="45" width="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fw3HcrlKAdRIaeMhyphenhyphenS4was4yNYFOgsex9MIuhISsFLkI50AAIrh6XNVK9Mg8Ps3YwWcUHYs5bdWa8XkunhlzB6eVbw4du71FHTxfOjBPBQsZkrrGmAN9eWTMxfxfRcTIMi5mJEaMN3s/s1600/twitter.png" title="Sígueme en twitter!"/></a>
</div>
<style>.iconos-sociales img{border-radius:50px;}</style>
Poner los iconos sociales en Blogger
Si usas blogger: copia el codigo -> ve a diseño -> añadir un gadget -> elige un HTML/Javascript, pega los códigos que elegiste y guarda.
Poner los iconos sociales en WordPress
si usas wordpress: copia el codigo -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pegas los códigos que elegiste.
.jpeg)
.jpeg)
.jpeg)
.jpeg)
