Como poner ICONOS de REDES SOCIALES en tu BLOG



Las redes sociales se han convertido en la principal fuente de trafico de muchas páginas web, Esto se debe a que cada día la competencia por los primeros lugares en los buscadores es más grande y a veces es más fácil conseguir audiencia e interacción de manera social que mediante trafico orgánico. Por eso es importante que las redes sociales estén presentes en la estrategia de distribución de contenidos en tu blog.

 


En este artículo te voy a mostrar Cómo agregar botones o Iconos de redes sociales en tu blog no importa si estas usando Blogger o cualquier otro CMS si sigues min indicaciones podrás utilizarlos sin problema.



Ventajas de usar botones para redes sociales

Los botones sociales le darán a tu blog un toque más profesional, además de que tus usuarios se sentirán más seguros a ver que detrás de tu blog existe una persona real con la cual podrán conversar en caso de ser necesario. Añadido a esto podríamos agregar los siguientes beneficios: 


Más tráfico en tu Blog: Hoy en día el 80% de las personas prefieren buscar información audio visual antes que leer un artículo de una página, por eso es importante que crees perfiles sociales y detienes parte de tu estrategia de crecimiento a buscar posibles lectores de manera social.


Aumento de seguidores: En Blogger difícilmente puedes llevar un control de cuantas personas estas siguiendo tu blog, sin embargo, las redes sociales te permiten manejar esa información de manera detallada. Si agregas botones sociales tus lectores podrán seguirte con solo hacer un clic ellos se beneficiarán porque recibirán notificaciones justo al momento que realizas una publicación y tú te beneficiaras porque podrás informarle que hay nuevo contenido en tu blog.



Iconos de Redes Sociales para copiar y pegar

Si eres bueno utilizando HTML y CSS podrás crear tus botones de redes sociales fácilmente solo necesitaras usar cualquiera de estas imágenes:


                   


                                   





Si quieren que agregue otra red social adicional solo háganmelo saber en los comentarios



Botones de redes sociales para Blogger

Si no sabes nada de HTML o CSS no te preocupes a partir de aquí te daré una guía detallada y paso por paso para que agregues los botones de redes sociales a tu blog en Blogger.


Paso 1: Copia y Pega el siguiente código 

A continuación tienes que copiar el código de abajo y pegarlo en la Entrada-Sección-Gadget donde quieres que se muestre.


<center>
<div class="iconos-sociales">
<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en YouTube" height="35" width="35" src=" https://1.bp.blogspot.com/-0Ao8V_ZtT5Q/YPhkfO0JqkI/AAAAAAAAA1U/Sz5GlaSW78AsY3nZpcqeIoPA_HQUSCVLgCPcBGAYYCw/s0/Youtube-icono.png" title=" Sígueme en YouTube "/></a>

<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en Facebook" height="35" width="35" src=" https://1.bp.blogspot.com/-Pop-U7OywXs/YPhkfrImyiI/AAAAAAAAA1Y/UBnVfTK9j2U-bIUqwZYMNSQPvz_l06mbwCPcBGAYYCw/s0/facebook-icono.png" title="Sígueme en Facebook"/></a>

<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en Instagram" height="35" width="35" src="https://1.bp.blogspot.com/-VFfOISywV0c/YPhkeRXuRQI/AAAAAAAAA1M/L75S9Usg5AovunH2Y-VzqJbaaY1LuK3eACPcBGAYYCw/s0/Instagram-icono.png" title="Sígueme en Instagram"/></a>

<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en WhatsApp" height="35" width="35" src=" https://1.bp.blogspot.com/-Vc_W7xraNnc/YPhkfwQExQI/AAAAAAAAA1c/dI72v37UC0EGJd7jWvKWYD3WMwZ7eER7gCPcBGAYYCw/s0/whatsapp-icono.png" title="Sígueme en WhatsApp"/></a>

<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt="Sígueme en TikTok" height="35" width="35" src=" https://1.bp.blogspot.com/-rK19lcfnq9c/YPhkfuEwAnI/AAAAAAAAA1U/0ydy_rVmboQtu211UQs7_zMXdMih2LCCwCPcBGAYYCw/s0/tiktok-icono-oscuro.png" title="Sígueme en TikTok"/></a>

<a href="URL DE LA RED SOCIAL" target="_blank"><img loading="lazy" alt=" Sígueme en Twitter" height="35" width="35" src=" https://1.bp.blogspot.com/-2JwTJZxg1AU/YPhkfB0DdjI/AAAAAAAAA1c/tDKdU6tS0A0lt4YegGUVd7k-9hguYz82ACPcBGAYYCw/s0/Twitter-icono.png" title="Sígueme en Twitter"/></a>
</div>
</center>

 <!-- Aquí van los estilos -->



Paso 2: Personaliza tus redes sociales 

Editando los códigos que están de color verde:

URL DE LA RED SOCIAL: Allí debes colocar la URL de la red social que corresponda.

(Alto y Ancho): El código traerá la medida de 35px de forma predeterminada, si quieres que tus iconos de tus redes sociales se vean más grandes o más pequeños aumentar el número o redúcelo respectivamente.


Paso 3: Agregar o Eliminar redes sociales.

Puedes agregar y quitar las redes sociales que quieras. Para quitar una red social solo elimina el código de la red social que no quieres que aparezca y si quieres agregar una nueva copia el cedido de cualquier red social y edita los campo de “URL DE LA RED SOCIAL” “Sigueme en…” “URL del icono de la red social”


Si todo sale bien tus resde sociales se verían de la siguiente manera:


Sígueme en YouTube Sígueme en Facebook Sígueme en Instagram Sígueme en WhatsApp Sígueme en TikTok Sígueme en Twitter



Agregar Estilos a tus botones de redes sociales

Como puedes darte cuenta los botones de redes sociales de forma predeterminada no tiene animaciones, son simplemente una imagen con un enlace, esto puede ser bueno para no ralentizar tanto tu blog, sin embargo, si quieres algo más profesional tienes que copiar los estilos que te mostrare a continuación y pegarlo al final de tu código de redes sociales donde dice "Aquí van los estilos"


Desplazamiento hacia arriba
Los botones tendrán un ligero desplazamiento haca arriba cuando las personas pasen el cursor sobre la imagen.

<style>
.iconos-sociales img{ 
transition:all 0.5s ease-out; 
}
.iconos-sociales img:hover{ 
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); 
transform:translate(0px, -5px); 
}
</style>

Vista Previa

Sígueme en YouTube Sígueme en Facebook Sígueme en Instagram Sígueme en WhatsApp Sígueme en TikTok Sígueme en Twitter



Redondear imagen más Desplazamiento hacia arriba
Los botones se verán de forma circular y al pasar el curso por encima de ellos tendrán un leve desplazamiento hacia arriba

<style>
.iconos-sociales img{ 
transition:all 0.5s ease-out; border-radius:50px;
}
.iconos-sociales img:hover{
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
transform:translate(0px, -10px); 
}
</style>


Vista Previa

Sígueme en YouTube Sígueme en Facebook Sígueme en Instagram Sígueme en WhatsApp Sígueme en TikTok Sígueme en Twitter



Video TUTORIAL ¿Cómo Añadir los Botones Sociales en tu Blog?



Recomendaciones...
¿Te gustaron estos botones de redes sociales para tu blog? estaré agregando mas estilos y diseños espero verte pronto por acá. Si lo deseas tan bien puedes ir a ver este articulo 👉 Como EVITAR que COPIEN el contenido de tu Blog en Blogger 

No puedes irte sin leer esto 👇

18 comentarios

  1. Hola Abraham. ¿Cómo estas? oye si puedes incluir LinkedIn te agradezco

    ResponderBorrar
    Respuestas
    1. Listo, Icono agregado. Solo debes crear un nuevo Bloque de red social y editar la imagen, nombre y Dirección URL

      Borrar
  2. Hola abraham seras que puede agregar el icono de snapchat

    ResponderBorrar
  3. ¡Hola abraham!... ¿Podrías agregar el icono de Kakaotalk? te lo agradecería mucho!!

    ResponderBorrar
  4. Hola Abraham, por favor puedes agregar el Icono de LinkedIn en oscuro por favoooor, todos mi oconos estan en oscuro menos Linkedin

    ResponderBorrar
  5. Te falto el icono de Blogger, al fin de al cabo también es una red social, ¿no crees?

    ResponderBorrar
  6. Hola Abraham. ¿Nos podría agregar el ícono de Pinterest?
    Gracias!

    ResponderBorrar
  7. Hola! Crees que puedas agregar el boton de Wattpad por favor?

    ResponderBorrar
  8. Hola. Podria hacer un tutorial de como agregar el tiempo en blogeer

    ResponderBorrar
  9. Hola. Oye puedes poner la de Kwai app? y la de Wattpad?

    ResponderBorrar
  10. Muchas gracias Abraham, me sirvió tu mini tutorial porque eliminé los íconos que traía mi plantilla sin saber cómo.
    Gran trabajo, como siempre.

    ResponderBorrar
  11. Hola, Abraham podria añadir un icono de spotify, por favor?

    ResponderBorrar
  12. Hola Abraham, puedes colocar el icono de Google News? Porfavor!

    ResponderBorrar
  13. puedes porfa agregar el de Discord y el de Pinterest pls Amigo?

    ResponderBorrar