Boton para 2 publicidades. Sirve para Monetag y Adsterra

🔓 Script para desbloquear descargas con publicidad (2 pasos)

En este artículo te comparto un script en JavaScript + HTML + CSS que te permite bloquear una descarga hasta que el usuario visite 2 enlaces de publicidad. Es ideal para monetizar contenido en blogs como Blogger.

🚀 ¿Cómo funciona?

El sistema funciona mediante un botón interactivo que guía al usuario en 3 pasos:

• 1️⃣ Hace clic y se abre la primera publicidad
• 2️⃣ Espera unos segundos y luego abre la segunda publicidad
• 3️⃣ Finalmente se desbloquea el enlace de descarga

🎯 Características del script

• ✔ Animaciones modernas (brillo y vibración)
• ✔ Sistema de espera configurable
• ✔ Compatible con móvil y escritorio
• ✔ Bloqueo inteligente del botón
• ✔ Activación progresiva de descarga

⚙️ Código completo

Copia y pega este código en tu blog:

<div id="descarga-publicidad-container" style="text-align:center; margin:0; padding:0; max-width:400px; margin-left:auto; margin-right:auto; font-family: Arial, sans-serif;"> <h2 style="margin-bottom:10px;">Descarga después de 2 publicidad</h2> <p style="margin-top:0; margin-bottom:20px;">Haz clic y sigue los pasos para desbloquear la descarga</p> <button id="botonDescarga" class="btn-animado" style=" padding:15px 30px; font-size:18px; background-color:#007BFF; color:#fff; border:none; border-radius:8px; cursor:pointer; transition:background-color 0.3s ease, box-shadow 0.3s ease; margin-bottom: 20px; position: relative; overflow: hidden; "> <span class="texto">Ir a la primera publicidad</span> <span class="brillo"></span> </button> <div style="margin-bottom: 15px;"> <a id="linkPublicidad1" href="LINK DE PUBLICIDAD 1 AQUI" target="_blank" style="display:none;"></a> <a id="linkPublicidad2" href="LINK DE PUBLICIDAD 1 AQUI" target="_blank" style="display:none;"></a> <a id="linkDescarga" href="LINK DE A DONDE IRA DESPUES DE LAS 2 PUBLICIDADES AQUI" target="_blank" style="display:block; color:#28a745; font-weight:bold; text-decoration:none; pointer-events:none; opacity:0.5;"> Gracias por Colaborar </a> </div> <style> /* Brillo */ .brillo { position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: rgba(255, 255, 255, 0.6); transform: skewX(-25deg); } @keyframes efecto-brillo { 0% { left: -75%; } 50% { left: 125%; } 100% { left: 125%; } } @keyframes boton-temblor { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-3px); } 100% { transform: translateX(0); } } /* Glow dinámico */ .glow-azul { box-shadow: 0 0 20px #007BFF, 0 0 40px #007BFF; } .glow-naranja{ box-shadow: 0 0 20px #fd7e14, 0 0 40px #fd7e14; } .glow-verde { box-shadow: 0 0 20px #28a745, 0 0 40px #28a745; } </style> <script> (function() { const btn = document.getElementById('botonDescarga'); const brillo = btn.querySelector('.brillo'); const texto = btn.querySelector('.texto'); const linkPub1 = document.getElementById('linkPublicidad1'); const linkPub2 = document.getElementById('linkPublicidad2'); const linkDesc = document.getElementById('linkDescarga'); let paso = 0; const tiempoEspera = 20; function limpiarGlow() { btn.classList.remove("glow-azul", "glow-naranja", "glow-verde"); } function aplicarGlow(color) { limpiarGlow(); if (color === "#007BFF") btn.classList.add("glow-azul"); if (color === "#fd7e14") btn.classList.add("glow-naranja"); if (color === "#28a745") btn.classList.add("glow-verde"); } setInterval(() => { if (btn.style.backgroundColor !== "rgb(108, 117, 125)") { btn.style.animation = 'boton-temblor 0.4s ease-in-out'; setTimeout(() => btn.style.animation = '', 400); brillo.style.animation = 'efecto-brillo 1s ease-in-out'; setTimeout(() => brillo.style.animation = '', 1000); aplicarGlow(btn.style.backgroundColor); } }, 3000); function destelloInstantaneo() { if (btn.style.backgroundColor !== "rgb(108, 117, 125)") { brillo.style.animation = 'efecto-brillo 1s ease-in-out'; setTimeout(() => brillo.style.animation = '', 1000); aplicarGlow(btn.style.backgroundColor); } } function esperar(callback) { btn.disabled = true; let segundos = tiempoEspera; const colorOriginal = btn.style.backgroundColor; texto.textContent = `Espera ${segundos} segundos...`; limpiarGlow(); const intervalo = setInterval(() => { segundos--; texto.textContent = `Espera ${segundos} segundos...`; if (segundos <= 0) { clearInterval(intervalo); btn.disabled = false; btn.style.backgroundColor = colorOriginal; callback(); } }, 1000); } function abrirPublicidadPopup(url) { if (window.innerWidth > 800) { // Solo escritorio let popup = window.open( url, '_blank', 'width=500,height=400,top=50,left=' + (window.innerWidth - 520) + ',toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=0' ); if (popup) { popup.focus(); // Trae la ventana al frente // Cerrar después de 20s setTimeout(() => { if (!popup.closed) popup.close(); }, 20000); } } else { // Móvil abre normal window.open(url, '_blank', 'noopener,noreferrer'); } } btn.addEventListener('click', function () { if (paso === 0) { btn.style.backgroundColor = "#6c757d"; abrirPublicidadPopup(linkPub1.href); esperar(() => { texto.textContent = "Ir a la segunda publicidad"; btn.style.backgroundColor = "#fd7e14"; destelloInstantaneo(); paso = 1; }); } else if (paso === 1) { btn.style.backgroundColor = "#6c757d"; abrirPublicidadPopup(linkPub2.href); esperar(() => { texto.textContent = "Ya puedes descargar"; btn.style.backgroundColor = "#28a745"; destelloInstantaneo(); paso = 2; linkDesc.style.pointerEvents = "auto"; linkDesc.style.opacity = "1"; }); } else if (paso === 2) { window.open(linkDesc.href, '_blank'); texto.textContent = "Ir a la primera publicidad"; btn.style.backgroundColor = "#007BFF"; destelloInstantaneo(); paso = 0; linkDesc.style.pointerEvents = "none"; linkDesc.style.opacity = "0.5"; } }); })(); </script> </div>

🧠 Explicación del código

🔘 Botón principal

El botón controla todo el flujo. Cambia de texto, color y estado según el paso en el que se encuentre.

📢 Sistema de publicidad

Se utilizan dos enlaces ocultos:

• LINK DE PUBLICIDAD 1 AQUI
• LINK DE PUBLICIDAD 2 AQUI

Estos se abren en ventanas emergentes (popup en PC o pestaña en móvil).

⏱ Temporizador de espera

El script obliga al usuario a esperar unos segundos antes de continuar, evitando que se salte pasos.

🎨 Animaciones

Incluye efectos visuales como:

• ✨ Brillo dinámico
• 💥 Efecto de vibración
• 🌈 Iluminación (glow) por colores

🔓 Desbloqueo de descarga

El enlace de descarga inicia bloqueado (opacidad baja y sin clic). Solo se activa después de completar los 2 pasos correctamente.

🛠 Cómo personalizar

• 🔗 Cambia los enlaces de publicidad:
  linkPublicidad1.href y linkPublicidad2.href
• 📥 Cambia el enlace de descarga:
  linkDescarga.href
• ⏳ Modifica el tiempo de espera:
  const tiempoEspera = 20;

⚠️ Recomendaciones

Usa este sistema con responsabilidad. Evita abusar de la publicidad para no afectar la experiencia del usuario.

💡 Conclusión

Este script es una excelente forma de monetizar tu contenido con Monetag y Adsterra de forma sencilla sin necesidad de plugins externos. Además, es ligero y fácil de implementar.