Hoy en día, las redes sociales son una herramienta fundamental para atraer visitantes a tu sitio web. Ante la creciente competencia por los primeros puestos en los buscadores, a menudo resulta más sencillo conectar con tu audiencia y generar interacción a través de las plataformas sociales que depender únicamente del tráfico orgánico. Por eso, integrar las redes sociales en la estrategia de distribución de contenido de tu blog es crucial.
En este artículo, te guiaré paso a paso para que puedas añadir botones o íconos de redes sociales a tu blog, sin importar si utilizas Blogger o cualquier otro CMS. ¡Es más fácil de lo que imaginas!
¿Por qué son tan importantes los botones de redes sociales?
Agregar botones sociales a tu blog no solo le da un toque más profesional, sino que también genera confianza en tus lectores al mostrarles que hay una persona real detrás del contenido, dispuesta a interactuar. Además, disfrutarás de los siguientes beneficios:
- Más tráfico para tu blog: Actualmente, un gran porcentaje de usuarios prefiere consumir información audiovisual. Al crear perfiles sociales y dirigir parte de tu estrategia de crecimiento a las redes, abres un canal directo para atraer a nuevos lectores interesados en tu contenido.
- Aumento de seguidores: A diferencia de lo que ocurre en plataformas como Blogger, las redes sociales te ofrecen un control detallado sobre tu base de seguidores. Al añadir botones sociales, tus lectores podrán seguirte con un solo clic. Ellos recibirán notificaciones instantáneas cada vez que publiques algo nuevo, y tú podrás informarles sobre el nuevo contenido disponible en tu blog.
¿Necesitas íconos de redes sociales para copiar y pegar?
Si tienes conocimientos de HTML y CSS, te resultará muy sencillo crear tus propios botones de redes sociales. Solo necesitarás algunas imágenes de íconos para empezar.
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGxjm__TS1-sOnf69Vbppx-u8CX1ltlmqqtDey3Gml5aV2kZ1BJsK94hMPF-cn870hd7Jk1bx9E50oPbA1fanb90M_2eoVUnnlSQ-Q_axbKVsDmsla6hPg-mRT-9FsPx0coSeVLmQppAbN/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6vlV5enwWRJSXPWHkLi_QEhcy0OAwMgVAqp4F0dvu5sJ5zMBOSAPoqw4ZrMk6GaS_YUtjrK6p_qrHJipWOJz_Ib3NIppNWwx8se0fmswGW1YhYOT4lzTZXssDtPNuzZ7KxvJGR3RDarUt/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioycSf-8NI3Ff15eeXtdXUO4e888671ildrsPBjKJnTFjzSymZi95xweZpk0Vc6zll0WDyE0pBGj3PWL564QS8VkRxeh_PbW6y6sT9dWJq-xHh1ohUJN737-Qe-c12TRC2kUAbf7TBzxK5/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1fwppWJk-Z8OVvyOtTxSxBmUMIt702HOt6OSOCVtrKG5GLxCRnPxu6bSj0GDEI3q-FugFOkb82rCvBYMYeM0648TQOjJk9-nFbI4hkOLTpDY3qL-qga9HPTB052Eqay4w3hHZnmW6lENj/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFv8UKZ1-41VtEZOmOWZfuQSeNlkHBnbzmMYBIWVbiiEPWv28j9QmxHUOKceoGNe-6XEk31OnWLoNj-nTWrAK8mba-yMPPEqZlLMj3AI3_nnygxwxamLLKrALutw3nRMaDE2_Hzl7MLcWH/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIg2tj8k49hok_zk9DG0mZ8nJlR_dS8ETeVBD9111J2Gpn8OJjlw9xPxuR-aIPqcb0aIJNxLNxgFmqNx5IG-X5TCGacOFT8S8gwVTBs1gnGUz3xiIkhgXNYu1zQIvW57TXEmk9wwr7Yg9jQxVRZGqL1FzeLyhmg9jR7SX11M3WTih3FN7yuJ2p0r8G0Gh9/s1600/logo-x.png" title="Sígueme en Twitter"/></a>
</div>
</center>
<!-- Aquí van los estilos -->
<style>
.iconos-sociales a {
display: inline-block; /* botones horizontales */
margin: 0 5px; /* espacio entre los íconos */}
</style>
Paso 2: Personaliza tus Redes Sociales
Ahora, vas a editar algunas partes del código. Presta atención a las siguientes indicaciones:
- URL DE LA RED SOCIAL: En cada línea donde veas URL DE LA RED SOCIAL, debes reemplazar ese texto con el enlace directo a tu perfil en esa red social (por ejemplo, el enlace a tu página de Facebook, tu canal de YouTube, etc.).
- (Alto y Ancho): Por defecto, los íconos tienen un tamaño de 35px. Si quieres que se vean más grandes o más pequeños, simplemente aumenta o reduce el número en los atributos height (alto) y width (ancho) de cada imagen.
Paso 3: Agrega o Elimina Redes Sociales
Tienes total control para decidir qué redes sociales quieres mostrar en tu blog:
- Para quitar una red social: Simplemente elimina el bloque de código completo que corresponde a esa red social. Cada bloque empieza con <a href... y termina con .../></a>.
- Para agregar una nueva red social: Copia el código de cualquiera de las redes sociales existentes y pégalo. Luego, edita los campos "URL DE LA RED SOCIAL", "Sígueme en..." (que es el texto que aparece cuando pasas el cursor por encima del ícono) y la "URL del icono de la red social" si tienes una imagen de ícono diferente.
Si sigues estos pasos, tus redes sociales se verán perfectas en tu blog.
Si todo sale bien tus redes sociales se verían de la siguiente manera:
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.
1. 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{
transform:translate(0px, -5px); }
</style>
Vista previa
2. 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{
transform:translate(0px, -10px);
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); }
</style>
Vista previa
