Como crear una caja de Suscripciones de Canal de Youtube en Blogger

Aprende a integrar una caja de suscripciones para tu canal de YouTube en Blogger o cualquier sitio web. Aumenta tus suscriptores de forma sencilla con estas 2 opciones personalizables.

Cómo colocar una caja de suscripciones de YouTube en Blogger — Aumenta los suscriptores de tu canal incorporando un widget interactivo en tu sitio web.

Opción 1: Crear la caja mediante Google Developers

En esta primera alternativa puedes configurar manualmente tu caja de suscripción ingresando a la plataforma oficial para desarrolladores de Google.

Campos que debes configurar:

Nombre del Canal o ID: Ingresa el nombre de usuario o la ID única de tu canal de YouTube.
Diseño: Elige si prefieres mostrar la foto de perfil del canal (formato completo) o solo el botón simple.
Tema: Selecciona la paleta de colores del fondo entre las opciones Oscuro (Dark) o Blanco (Light).
Conteo de Suscriptores: Decide si deseas mostrar u ocultar la cifra actual de suscriptores en tiempo real.

Una vez completados los datos, se generará un fragmento de código automáticamente. Este código lo puedes pegar en cualquier gadget HTML/JavaScript o entrada de tu web.

Ejemplo de vista previa de la caja de suscripciones — Ejemplo visual del código generado en Google Developers.

Video Tutorial explicativo

Si prefieres ver el proceso paso a paso en formato en video, te lo mostramos a continuación:

Opción 2: Implementación rápida con código CSS y HTML personalizado

Esta es la opción más rápida y con un acabado moderno en modo oscuro. Copia el siguiente bloque de código e insértalo dentro de un widget HTML/JavaScript en la distribución de tu Blogger. Recuerda reemplazar ID-DE-CANAL-DE-YOUTUBE por la ID real de tu canal.

<div class="youtube-box-wrapper">
    <div class="youtube-box-header">
        <div class="youtube-icon-circle">
            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"></path><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02" fill="currentColor"></polygon></svg>
        </div>
        <div class="youtube-titles">
            <h4>¡Suscríbete al Canal!</h4>
            <p>No te pierdas ningún Video</p>
        </div>
    </div>
    
    <div class="youtube-subscribe-container">
        <script src="https://apis.google.com/js/platform.js"></script>
        <div class="g-ytsubscribe" data-channelid="ID-DE-CANAL-DE-YOUTUBE" data-layout="full" data-theme="dark" data-count="default"></div>
    </div>
</div>

<style scoped="" type="text/css">
.youtube-box-wrapper { max-width: 400px; margin: 25px auto; background: #18181b; border: 1px solid #27272a; border-radius: 16px; padding: 25px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; text-align: center; } 
.youtube-box-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; text-align: left; } 
.youtube-icon-circle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(255, 0, 0, 0.1); color: #ff0000; border-radius: 12px; flex-shrink: 0; } 
.youtube-titles h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 700; color: #f4f4f5; } 
.youtube-titles p { margin: 0; font-size: 13px; color: #a1a1aa; } 
.youtube-subscribe-container { display: flex; justify-content: center; background: #27272a; padding: 12px; border-radius: 10px; } 
@media only screen and (max-width: 480px) { .youtube-box-wrapper { padding: 15px; margin: 15px; } }
</style>