como agregar botones de redes sociales a blogger



Si quieres aumentar la presencia de tu blog en tus redes sociales, ofrecer a tus visitantes acceso directo a tus comunidades es esencial. Hoy les comparto un widget de redes sociales ultra compacto, elegante y liviano, diseñado especialmente para colocar en la barra lateral (sidebar) o en el pie de página de Blogger. A diferencia de otros widgets pesados que ralentizan tu página, este código está optimizado con CSS moderno e íconos vectoriales de FontAwesome 6.

🚀 Características principales

  • Diseño Compacto: Ocupa muy poco espacio vertical en tu blog.
  • Íconos vectoriales: Usa FontAwesome 6, lo que garantiza que se vean nítidos en cualquier pantalla.
  • Colores oficiales: Cada botón incluye los tonos e identificadores de marca (Facebook, YouTube, TikTok, X, Telegram, Blogger e Instagram).
  • Efecto Hover: Animación sutil cuando el usuario pasa el cursor sobre el botón.

📝 ¿Dónde debes colocar tus propios enlaces?

Antes de pegar el código en tu blog, debes reemplazar las URLs de ejemplo por tus enlaces reales. Busca en la parte inferior del código la sección del HTML y reemplaza los textos entre comillas dentro de href="...":

  1. Facebook: Busca U_LINK_FACEBOOK y cámbialo por tu página de Facebook.
  2. YouTube: Busca "TU_LINK_A_NAWARA_TONY" y coloca el enlace a tu canal.
  3. TikTok: Busca "TU_LINK_DE_TIKTOK" y coloca el enlace a tu perfil.
  4. X (Twitter): Busca "TU_LINK_DE_X" y pon la dirección de tu cuenta.
  5. Telegram: Busca "TU_LINK_DE_TELEGRAM" y coloca la invitación a tu grupo/canal.
  6. Blogger: Busca "TU_LINK_DE_BLOGGER" y pon el enlace para seguir tu blog.
💡 Nota: Si no usas alguna de estas redes sociales, simplemente borra toda la línea desde <a href=... hasta </a> correspondiente a esa red. También puedes personalizar el texto del lado derecho (como "Me gusta", "Suscríbete", "Únete") cambiando la palabra que está dentro de <div class="red-der-mini">.

🛠️ Paso a paso: Cómo instalarlo en tu Blogger

Instalar este widget en Blogger toma menos de 2 minutos. Sigue estos sencillos pasos:

  1. Copia el código completo del widget que te dejo abajo.
  2. Ingresa a tu panel de administración de Blogger.
  3. En el menú de la izquierda, haz clic en Diseño.
  4. Ubica la sección donde quieras que aparezca (por ejemplo, Sidebar / Barra lateral) y haz clic en + Añadir un gadget.
  5. En la lista emergente, selecciona la opción HTML/JavaScript.
  6. En el campo Título puedes escribir algo como "Síguenos" o "Nuestras Redes" (o dejarlo en blanco si no quieres título).
  7. En el campo Contenido, pega el código (ya editado con tus enlaces).
  8. Haz clic en Guardar.
  9. ¡Listo! Guarda los cambios de diseño en tu blog y refresca la página para ver el resultado.
Presiona para descargar


Tal vez te interesen estas entradas

No hay comentarios