Tutorial: Creación de Botón de Descarga con Tareas Completadas

  • Autor Autor jcduranm
  • Fecha de inicio Fecha de inicio
jcduranm

jcduranm

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Cómo Crear un Botón de Descarga Basado en Tareas
botondedescargascontareas.webp

Esta vez compartiremos un tutorial sobre cómo crear un botón de descarga en un blog que se abrirá según las instrucciones de la tarea. Puedes ver la demostración debajo
pngkey.com-likes-icon-png-7898568.png

El funcionamiento de este botón de descarga solo se activará si el visitante ha (completado) las instrucciones dadas, como seguir la página de fans primero, entonces el botón de descarga se abrirá automáticamente.

En otras palabras, el botón de descarga estará bloqueado inicialmente hasta que el visitante complete la tarea asignada. Entonces, ¿cómo creamos dicho botón de descarga?

Paso #1: Abre el panel de Blogger
Paso #2: Ve a Tema > Editar HTML
Paso #3: Añade el siguiente código CSS encima de la etiqueta </style> o de la etiqueta ]]></b:skin>

CSS: 
 /*  botón de descarga basado en tareas */
.stepdownload{align-items:center;justify-content:center;margin:12px auto}
.stepdownload input{width:100%;margin:5px auto;}
input#paso1{cursor:pointer;}
input#paso2{background-color:#ddd; cursor:no-drop;}
input#paso3{background-color:#ddd; cursor:no-drop;}
input#pasoFinal{background-color:#ddd; cursor:no-drop}
#BoxDescarga{text-align:center;margin:auto;width:310px;padding:2px;}

Paso #4: Crea el Botón de Descarga​
  1. Crea una página o publicación para mostrar el botón de descarga​
  2. Cambia a la pestaña de Visualización HTML​
  3. Copia este código HTML y pégalo donde quieras que aparezca el botón de descarga​
HTML: 
<div class='stepdownload'>
<input id="paso1" onclick="paso1()" type="button" value="1. Dar me gusta a la página de fans!" />
<input disabled="" id="paso2" onclick="paso2()" type="button" value="2. Seguir en Instagram!" />
<input disabled="" id="paso3" onclick="paso3()" type="button" value="3. Suscribirse a Youtube!" />
<input disabled="" id="pasoFinal" onclick="pasoFinal()" type="button" value="Descargar Archivo" />
<p id="textoFinal" style="text-align:center;"></p>
</div>
Cambia el texto marcado según la frase o instrucciones que proporciones.​
Hacer clic para expandir...

Paso #5: A continuación, añade el código JavaScript en la misma publicación creada en el paso 4.

JavaScript: 
<script>
var parte1EnlaceDescarga = "https://demos.jcdur";
var parte2EnlaceDescarga = "anm.com/Descarga.html";

$link1 = "https://www.facebook.com/JcDuranM.com";
$link2 = "https://www.instagram.com/jcduranm.com/";
$link3 = "https://www.youtube.com/c/JcDuranM.com";
$linkfile = parte1EnlaceDescarga + parte2EnlaceDescarga;

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

function paso1() {
    window.open($link1);
    sleep(4000);
    document.getElementById("paso1").value="Dar me gusta a la página de fans!";
    document.getElementById("paso1").onclick= "";
    document.getElementById("paso2").style.backgroundColor = "#204ecf";
    document.getElementById("paso2").style.cursor = "pointer";
    document.getElementById("paso2").disabled= false;  
}

function paso2() {
    window.open($link2);
    sleep(4000);
    document.getElementById("paso2").value="Seguir en Instagram!";
    document.getElementById("paso2").onclick= "";
    document.getElementById("paso3").style.backgroundColor = "#204ecf";
    document.getElementById("paso3").style.cursor = "pointer";
    document.getElementById("paso3").disabled= false;
}

function paso3() {
    window.open($link3);
    sleep(4000);
    document.getElementById("paso3").value="Suscribirse a Youtube!";
    document.getElementById("paso3").onclick= "";
    document.getElementById("pasoFinal").style.backgroundColor = "#204ecf";
    document.getElementById("pasoFinal").style.cursor = "pointer";
    document.getElementById("textoFinal").innerHTML= "Gracias por seguir las instrucciones! Haz clic en Descargar Archivo para continuar.";
    document.getElementById("pasoFinal").disabled= false;
}

function pasoFinal() {
    var enlaceCompletoDescarga = parte1EnlaceDescarga + parte2EnlaceDescarga;
    window.open(enlaceCompletoDescarga);
}
</script>
Cambia los enlaces 1/2/3 marcados según lo desees y el enlace de descarga con tu URL. y divídela en dos como el ejemplo "https://demos.jcdur" "anm.com/Descarga.html"​
Hacer clic para expandir...

una vez tengas tus enlaces en el JS te recomiendo Obfuscar tu script para hacer un poquito menos legible la URL de descarga.

dando como resultado
Insertar CODE, HTML o PHP: 
<script>
var _0x58383d=_0x4cc6;function _0x4cc6(_0x18a645,_0x3ce1c5){var _0x585dc8=_0x585d();return _0x4cc6=function(_0x4cc6f0,_0x4bd548){_0x4cc6f0=_0x4cc6f0-0x72;var _0x1d4709=_0x585dc8[_0x4cc6f0];return _0x1d4709;},_0x4cc6(_0x18a645,_0x3ce1c5);}(function(_0x31645d,_0x564d64){var _0x3b3f28=_0x4cc6,_0x36b56d=_0x31645d();while(!![]){try{var _0x4ee363=parseInt(_0x3b3f28(0x89))/0x1*(-parseInt(_0x3b3f28(0x7f))/0x2)+-parseInt(_0x3b3f28(0x75))/0x3+parseInt(_0x3b3f28(0x83))/0x4+parseInt(_0x3b3f28(0x8e))/0x5+-parseInt(_0x3b3f28(0x8b))/0x6*(-parseInt(_0x3b3f28(0x8d))/0x7)+parseInt(_0x3b3f28(0x87))/0x8+-parseInt(_0x3b3f28(0x78))/0x9*(parseInt(_0x3b3f28(0x8a))/0xa);if(_0x4ee363===_0x564d64)break;else _0x36b56d['push'](_0x36b56d['shift']());}catch(_0x4c104){_0x36b56d['push'](_0x36b56d['shift']());}}}(_0x585d,0xc2c68));var parte1EnlaceDescarga=_0x58383d(0x92),parte2EnlaceDescarga=_0x58383d(0x84);$link1=_0x58383d(0x7b),$link2=_0x58383d(0x79),$link3=_0x58383d(0x86),$linkfile=parte1EnlaceDescarga+parte2EnlaceDescarga;function sleep(_0x1712ec){var _0x1e1c1d=_0x58383d;const _0x21da3b=Date['now']();let _0x56074f=null;do{_0x56074f=Date[_0x1e1c1d(0x7e)]();}while(_0x56074f-_0x21da3b<_0x1712ec);}function paso1(){var _0x14433f=_0x58383d;window['open']($link1),sleep(0xfa0),document[_0x14433f(0x76)](_0x14433f(0x91))[_0x14433f(0x90)]=_0x14433f(0x73),document[_0x14433f(0x76)](_0x14433f(0x91))[_0x14433f(0x93)]='',document[_0x14433f(0x76)](_0x14433f(0x74))['style'][_0x14433f(0x7c)]=_0x14433f(0x8f),document[_0x14433f(0x76)]('paso2')[_0x14433f(0x82)]['cursor']=_0x14433f(0x8c),document[_0x14433f(0x76)]('paso2')[_0x14433f(0x85)]=![];}function _0x585d(){var _0x299a40=['https://www.facebook.com/JcDuranM.com','backgroundColor','paso3','now','1402jhsTGw','cursor','pasoFinal','style','1407736HyzUQg','anm.com/Descarga.html','disabled','https://www.youtube.com/c/JcDuranM.com','9779376iWIMLP','Gracias\x20por\x20seguir\x20las\x20instrucciones!\x20Haz\x20clic\x20en\x20Descargar\x20Archivo\x20para\x20continuar.','169iLDWcv','3730syCpRf','6688524UtvMTG','pointer','7QDNOEz','5721280sEdHib','#204ecf','value','paso1','https://demos.jcdur','onclick','Seguir\x20en\x20Instagram!','textoFinal','Dar\x20me\x20gusta\x20a\x20la\x20página\x20de\x20fans!','paso2','3770622mkcuDs','getElementById','innerHTML','40059ttpApB','https://www.instagram.com/jcduranm.com/','open'];_0x585d=function(){return _0x299a40;};return _0x585d();}function paso2(){var _0x5aa85d=_0x58383d;window[_0x5aa85d(0x7a)]($link2),sleep(0xfa0),document[_0x5aa85d(0x76)](_0x5aa85d(0x74))[_0x5aa85d(0x90)]=_0x5aa85d(0x94),document[_0x5aa85d(0x76)]('paso2')[_0x5aa85d(0x93)]='',document[_0x5aa85d(0x76)](_0x5aa85d(0x7d))[_0x5aa85d(0x82)][_0x5aa85d(0x7c)]='#204ecf',document[_0x5aa85d(0x76)](_0x5aa85d(0x7d))[_0x5aa85d(0x82)][_0x5aa85d(0x80)]='pointer',document[_0x5aa85d(0x76)]('paso3')[_0x5aa85d(0x85)]=![];}function paso3(){var _0x58f1a7=_0x58383d;window[_0x58f1a7(0x7a)]($link3),sleep(0xfa0),document[_0x58f1a7(0x76)]('paso3')[_0x58f1a7(0x90)]='Suscribirse\x20a\x20Youtube!',document[_0x58f1a7(0x76)](_0x58f1a7(0x7d))['onclick']='',document[_0x58f1a7(0x76)]('pasoFinal')[_0x58f1a7(0x82)][_0x58f1a7(0x7c)]=_0x58f1a7(0x8f),document['getElementById'](_0x58f1a7(0x81))[_0x58f1a7(0x82)]['cursor']=_0x58f1a7(0x8c),document['getElementById'](_0x58f1a7(0x72))[_0x58f1a7(0x77)]=_0x58f1a7(0x88),document[_0x58f1a7(0x76)](_0x58f1a7(0x81))['disabled']=![];}function pasoFinal(){var _0x597edd=_0x58383d,_0x55fbe7=parte1EnlaceDescarga+parte2EnlaceDescarga;window[_0x597edd(0x7a)](_0x55fbe7);}
</script>
 
Última edición:
¡Excelente tutorial! Gracias por compartir esta información detallada sobre cómo crear un botón de descarga basado en tareas en Blogger. Estoy seguro de que muchos usuarios encontrarán este recurso extremadamente útil.
 
BotBeta dijo:
¡Excelente tutorial! Gracias por compartir esta información detallada sobre cómo crear un botón de descarga basado en tareas en Blogger. Estoy seguro de que muchos usuarios encontrarán este recurso extremadamente útil.
Hacer clic para expandir...
Puedes bridarme el código de un botón de descarga sin salir aun enlace externo, solo que te dirija una cierta parte dentro desde la misma pagina
 
pedrohbk dijo:
Puedes bridarme el código de un botón de descarga sin salir aun enlace externo, solo que te dirija una cierta parte dentro desde la misma pagina
Hacer clic para expandir...
Claro, puedes utilizar el atributo HTML "href" y apuntarlo a un elemento específico de la misma página usando su ID. Aquí está el código:

HTML: 
<a href="#elementoID">Descargar</a>

Deberías reemplazar "elementoID" por el ID específico del elemento en tu página al que deseas dirigirte. Cuando hagas clic en "Descargar", la página se desplazará hasta esa sección.
 
BotBeta dijo:
Claro, puedes utilizar el atributo HTML "href" y apuntarlo a un elemento específico de la misma página usando su ID. Aquí está el código:

HTML: 
<a href="#elementoID">Descargar</a>

Deberías reemplazar "elementoID" por el ID específico del elemento en tu página al que deseas dirigirte. Cuando hagas clic en "Descargar", la página se desplazará hasta esa sección.
Hacer clic para expandir...
Puedes brindarme el codigo completo, usando tu un codigo como ejemplo
 
pedrohbk dijo:
Puedes brindarme el codigo completo, usando tu un codigo como ejemplo
Hacer clic para expandir...
¡Por supuesto! Aquí tienes un ejemplo sencillo donde el botón de descarga te dirige a una sección especifica de la misma página.

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Pagina Ejemplo</title>
</head>
<body>

<h2>Contenido Principal</h2>
<p>Este es el contenido principal de la página...</p>

<button onclick="location.href='#descargaSection'">Descargar</button>

<h2>Otro Contenido</h2>
<p>Más contenido aqui...</p>

<h2 id="descargaSection">Sección de Descarga</h2>
<p>Aquí es donde el usuario sería dirigido al presionar el botón de Descargar</p>

</body>
</html>

En este ejemplo, cuando haces clic en el botón "Descargar", la página se desplaza automáticamente a la sección de descarga.
 
BotBeta dijo:
¡Por supuesto! Aquí tienes un ejemplo sencillo donde el botón de descarga te dirige a una sección especifica de la misma página.

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Pagina Ejemplo</title>
</head>
<body>

<h2>Contenido Principal</h2>
<p>Este es el contenido principal de la página...</p>

<button onclick="location.href='#descargaSection'">Descargar</button>

<h2>Otro Contenido</h2>
<p>Más contenido aqui...</p>

<h2 id="descargaSection">Sección de Descarga</h2>
<p>Aquí es donde el usuario sería dirigido al presionar el botón de Descargar</p>

</body>
</html>

En este ejemplo, cuando haces clic en el botón "Descargar", la página se desplaza automáticamente a la sección de descarga.
Hacer clic para expandir...
Puedes hacer un ejemplo nuevo, pero agregándole estilos al botón
Eres un crack, gracias por el ejemplo!
 
pedrohbk dijo:
Puedes hacer un ejemplo nuevo, pero agregándole estilos al botón
Eres un crack, gracias por el ejemplo!
Hacer clic para expandir...
¡Gracias por tus amables palabras! Claro, aquí tienes el código HTML con un botón estilizado:

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Pagina Ejemplo</title>
<style>
.button {
  background-color: #4CAF50; /* Color verde */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Contenido Principal</h2>
<p>Este es el contenido principal de la página...</p>

<button class="button" onclick="location.href='#descargaSection'">Descargar</button>

<h2>Otro Contenido</h2>
<p>Más contenido aquí...</p>

<h2 id="descargaSection">Sección de Descarga</h2>
<p>Aquí es donde el usuario sería dirigido al presionar el botón de Descargar</p>

</body>
</html>

En este ejemplo, he agregado estilos CSS al botón para que tenga un color de fondo verde, texto blanco, y un poco de padding para que sea más grande y fácil de leer.
 
BotBeta dijo:
¡Gracias por tus amables palabras! Claro, aquí tienes el código HTML con un botón estilizado:

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Pagina Ejemplo</title>
<style>
.button {
  background-color: #4CAF50; /* Color verde */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Contenido Principal</h2>
<p>Este es el contenido principal de la página...</p>

<button class="button" onclick="location.href='#descargaSection'">Descargar</button>

<h2>Otro Contenido</h2>
<p>Más contenido aquí...</p>

<h2 id="descargaSection">Sección de Descarga</h2>
<p>Aquí es donde el usuario sería dirigido al presionar el botón de Descargar</p>

</body>
</html>

En este ejemplo, he agregado estilos CSS al botón para que tenga un color de fondo verde, texto blanco, y un poco de padding para que sea más grande y fácil de leer.
Hacer clic para expandir...
Gracias Crack! pondré en practica este código
 
pedrohbk dijo:
Gracias Crack! pondré en practica este código
Hacer clic para expandir...
¡De nada! Me alegra poder ayudarte. No dudes en volver si tienes más preguntas. ¡Buena suerte con tu práctica de codificación!
 
Este está muy bueno, muchas gracias
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Digitalplus
Tutorial: Cómo crear un botón de descarga con clave
2
Respuestas
24
Visitas
712
Coderz
Coderz
Digitalplus
Botón de Descarga con Temporizador Personalizable
Respuestas
19
Visitas
908
Darking
Darking
Digitalplus
Contador de descarga para botón de descarga
Respuestas
5
Visitas
286
Digitalplus
Digitalplus
CANIBAL
Cuenta regresiva para botón de descarga en HTML y JS
Respuestas
2
Visitas
344
Ángeluz23
Ángeluz23
S
Tutorial: TunesScoop - Sacar el botón de descarga del reproductor.
Respuestas
0
Visitas
573
SnakeNet
S
Atrás
Arriba