Caja de Redes Sociales con Botón de Suscripción (widget)

Mantener a tu audiencia conectada a través de tus canales de redes sociales es clave para incrementar el tráfico de tu sitio web. Con este gadget HTML/CSS tendrás un bloque limpio, profesional e interactivo listo para el Sidebar de tu blog.

Características del Widget

• Efecto Hover suave: Transiciones dinámicas al pasar el cursor sobre los botones.
• Diseño estilizado: Botones identificados con la paleta de colores de cada plataforma.
• Cero scripts externos: Menor impacto en la velocidad de carga general del blog.

Cómo Instalar el Gadget de Redes Sociales

1. Accede al panel de control de Blogger.
2. Navega hasta la pestaña Diseño.
3. Haz clic en Añadir un gadget en la barra lateral.
4. Elige HTML/JavaScript.
5. Copia el fragmento de código, actualiza los enlaces hacia tus perfiles y guarda el gadget.

Código HTML y CSS del Widget

<!-- Widget Redes Sociales para Blogger -->
<style>
  .social-widget-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: Arial, sans-serif;
  }
  .social-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-radius: 12px;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: opacity 0.3s ease, transform 0.2s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  }
  .social-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  
  .btn-youtube { background-color: #ff0000; }
  .btn-facebook { background-color: #1877f2; }
  .btn-instagram { background-color: #e4405f; }
  
  /* Botón de Suscribirse al Blog */
  .btn-blogger {
    background: linear-gradient(90deg, #00a896 0%, #e85d04 100%);
    justify-content: center;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
</style>

<div class="social-widget-box">
  <a href="https://youtube.com/corpdirakion" class="social-btn btn-youtube" target="_blank" rel="noopener noreferrer">
    <span>Síguenos en YouTube</span>
    <span>1000</span>
  </a>
  <a href="https://facebook.com/" class="social-btn btn-facebook" target="_blank" rel="noopener noreferrer">
    <span>Síguenos en Facebook</span>
    <span>1000</span>
  </a>
  <a href="https://instagram.com/" class="social-btn btn-instagram" target="_blank" rel="noopener noreferrer">
    <span>Síguenos en Instagram</span>
    <span>1000</span>
  </a>

  <!-- Opción: Seguir / Suscribirse al Blog (Sin iconos) -->
  <a href="https://www.blogger.com/follow.g?blogID=TU_BLOG_ID_AQUI" class="social-btn btn-blogger" target="_blank" rel="noopener noreferrer">
    <span>¡SUSCRÍBETE AL BLOG!</span>
  </a>
</div>