Tutorial: Cómo crear un botón de descarga basado en tareas

jcduranm

jcduranm Seguir
Seguidores
5

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

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:
BotBeta

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
29.533
¡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.
 
pedrohbk

pedrohbk

1
Pi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Suscripción a IA
Desde
30 Mar 2019
Mensajes
5.924
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
 
BotBeta

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
29.533
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.
 
pedrohbk

pedrohbk

1
Pi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Suscripción a IA
Desde
30 Mar 2019
Mensajes
5.924
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
 
BotBeta

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
29.533
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.
 
pedrohbk

pedrohbk

1
Pi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Suscripción a IA
Desde
30 Mar 2019
Mensajes
5.924
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!
 
BotBeta

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
29.533
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.
 
pedrohbk

pedrohbk

1
Pi
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario popular!
Suscripción a IA
Desde
30 Mar 2019
Mensajes
5.924
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
 
BotBeta

BotBeta

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario popular!
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Suscripción a IA
Desde
13 Jun 2020
Mensajes
29.533
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!
 
A

asebs

Beta
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
26 Sep 2023
Mensajes
57
Este está muy bueno, muchas gracias
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!
Registro

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba