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:

               

                               

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:

Agregar Estilos a tus botones de redes sociales

<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>

<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>

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