Tutorial: Cómo crear un botón de descarga con clave

  • Autor Autor Digitalplus
  • Fecha de inicio Fecha de inicio
Digitalplus

Digitalplus

VIP
Préstamo
Zeta
Diseñador
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Suscripción a IA
Tutorial: Cómo Agregar Descargas con Clave en Blogger

Hola compañeros del día de hoy les traigo un tutorial de cómo agregar un botón de descargas con clave para tu blogger, este botón tiene una clave que al poner la clave correcta te muestra tres botones donde podrás enlazar cualquier descarga que quieras, comenzemos

### Paso 1: Copiar el Código
Entra en la sección de HTML/JavaScript de tu entrada de Blogger y copia el siguiente código:

HTML:
<div class="opciones-vip-container">
    <h1>Descargas VIP</h1>
    <button class="opciones-vip-button" onclick="solicitarClave()">Acceso VIP</button>
    <div id="opciones-vip-form" style="display: none;">
      <h2>Introduce la Clave VIP</h2>
      <input type="password" id="opciones-vip-clave" placeholder="Clave VIP" class="opciones-vip-input">
      <button onclick="verificarClave()" class="opciones-vip-button">Acceder</button>
    </div>
    <div id="opciones-vip-botones" style="display: none;">
      <h2>Opciones VIP</h2>
      <button class="opciones-vip-download-button"><a href="enlace1.zip" download>Descarga 1</a></button>
      <button class="opciones-vip-download-button"><a href="enlace2.zip" download>Descarga 2</a></button>
      <button class="opciones-vip-download-button"><a href="enlace3.zip" download>Descarga 3</a></button>
    </div>
</div>

CSS:
    .opciones-vip-container {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #800080;
      max-width: 400px;
      margin: 50px auto;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }
    .opciones-vip-button {
      background-color: #FFD700;
      color: #000;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .opciones-vip-button:hover {
      background-color: #FFC700;
    }
    .opciones-vip-input {
      padding: 10px;
      width: 100%;
      margin-bottom: 10px;
    }
    .opciones-vip-download-button {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px;
    }
    .opciones-vip-download-button:hover {
      background-color: #45A049;
}

JavaScript:
function solicitarClave() {
      var claveForm = document.getElementById("opciones-vip-form");
      var vipButton = document.querySelector(".opciones-vip-button");
      vipButton.style.display = "none";
      claveForm.style.display = "block";
    }

    function verificarClave() {
      var claveIngresada = document.getElementById("opciones-vip-clave").value;
      // Cambia 'tuClaveVIP' por la clave que desees
      if (claveIngresada === "tuClaveVIP") {
        var botonesVIP = document.getElementById("opciones-vip-botones");
        botonesVIP.style.display = "block";
      }
    }
function solicitarClave() {
    var claveForm = document.getElementById("opciones-vip-form");
    var vipButton = document.querySelector(".opciones-vip-button");
    vipButton.style.display = "none";
    claveForm.style.display = "block";
    claveForm.style.paddingRight = "25px"; // Agrega espacio solo al lado derecho del formulario
}


### Paso 2: Personalizar la Clave VIP
Insertar CODE, HTML o PHP:
En la función `verificarClave()`, reemplaza `"tuClaveVIP"` con la clave VIP que desees utilizar.

### Paso 3: Guardar y Publicar
Guarda los cambios en tu entrada de Blogger y publica. Ahora, tus lectores podrán disfrutar de Descargas VIP exclusivas siguiendo las instrucciones proporcionadas.

¡Listo! Has implementado con éxito una sección de Descargas VIP en tu entrada de Blogger.


20231214_152929.gif


Espero que este tutorial sea útil para mejorar la experiencia de tus lectores en tu blog de Blogger.
 
Gracias por compartir tu tutorial, parece muy útil. Seguiré tus pasos para implementar descargas con clave en mi blog. ¿Es posible cambiar el diseño del botón?
 
Genial!!
luego probare
gracias
 
Se agradece mucho por tu aporte, saludos.
 
Algo para Wordpress?
 
Algo para Wordpress?
Si no conoces mucho los que es css, y si tienes wordpress puedes hacerlo con plugins, existen muchos plugin para implementar botones, pero tienes que tener en cuenta que utilizar demasiados plugin en wordpress ralentizan el sitio web
 
Me gustó, espero que puedan sacarlo para WordPress
 
Algo para Wordpress?
Te hago un plugin de wordpress donde puedas crear botones con contraseña e intervalo de tiempo para luego redirigirte a una url si gustas 😁 al final solo tendrias que pegar un shortcode en los articulos que quieras
 
Última edición:
Pero no tiene mucho sentido la clave es publica no es segura, es Js todo el mundo la puede ver. Al menos encríptala.
 
Pero no tiene mucho sentido la clave es publica no es segura, es Js todo el mundo la puede ver. Al menos encríptala.
Entiendo, eso intente hacer hace unos días pero no lo logré, aún soy inexperto sobre los códigos de programación solo se lo básico 👍
 
ta weno!
 
Tutorial: Cómo Agregar Descargas con Clave en Blogger

Hola compañeros del día de hoy les traigo un tutorial de cómo agregar un botón de descargas con clave para tu blogger, este botón tiene una clave que al poner la clave correcta te muestra tres botones donde podrás enlazar cualquier descarga que quieras, comenzemos

### Paso 1: Copiar el Código
Entra en la sección de HTML/JavaScript de tu entrada de Blogger y copia el siguiente código:

HTML:
<div class="opciones-vip-container">
    <h1>Descargas VIP</h1>
    <button class="opciones-vip-button" onclick="solicitarClave()">Acceso VIP</button>
    <div id="opciones-vip-form" style="display: none;">
      <h2>Introduce la Clave VIP</h2>
      <input type="password" id="opciones-vip-clave" placeholder="Clave VIP" class="opciones-vip-input">
      <button onclick="verificarClave()" class="opciones-vip-button">Acceder</button>
    </div>
    <div id="opciones-vip-botones" style="display: none;">
      <h2>Opciones VIP</h2>
      <button class="opciones-vip-download-button"><a href="enlace1.zip" download>Descarga 1</a></button>
      <button class="opciones-vip-download-button"><a href="enlace2.zip" download>Descarga 2</a></button>
      <button class="opciones-vip-download-button"><a href="enlace3.zip" download>Descarga 3</a></button>
    </div>
</div>

CSS:
    .opciones-vip-container {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #800080;
      max-width: 400px;
      margin: 50px auto;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }
    .opciones-vip-button {
      background-color: #FFD700;
      color: #000;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .opciones-vip-button:hover {
      background-color: #FFC700;
    }
    .opciones-vip-input {
      padding: 10px;
      width: 100%;
      margin-bottom: 10px;
    }
    .opciones-vip-download-button {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px;
    }
    .opciones-vip-download-button:hover {
      background-color: #45A049;
}

JavaScript:
function solicitarClave() {
      var claveForm = document.getElementById("opciones-vip-form");
      var vipButton = document.querySelector(".opciones-vip-button");
      vipButton.style.display = "none";
      claveForm.style.display = "block";
    }

    function verificarClave() {
      var claveIngresada = document.getElementById("opciones-vip-clave").value;
      // Cambia 'tuClaveVIP' por la clave que desees
      if (claveIngresada === "tuClaveVIP") {
        var botonesVIP = document.getElementById("opciones-vip-botones");
        botonesVIP.style.display = "block";
      }
    }
function solicitarClave() {
    var claveForm = document.getElementById("opciones-vip-form");
    var vipButton = document.querySelector(".opciones-vip-button");
    vipButton.style.display = "none";
    claveForm.style.display = "block";
    claveForm.style.paddingRight = "25px"; // Agrega espacio solo al lado derecho del formulario
}


### Paso 2: Personalizar la Clave VIP
Insertar CODE, HTML o PHP:
En la función `verificarClave()`, reemplaza `"tuClaveVIP"` con la clave VIP que desees utilizar.

### Paso 3: Guardar y Publicar
Guarda los cambios en tu entrada de Blogger y publica. Ahora, tus lectores podrán disfrutar de Descargas VIP exclusivas siguiendo las instrucciones proporcionadas.

¡Listo! Has implementado con éxito una sección de Descargas VIP en tu entrada de Blogger.


Ver el archivo adjunto 1158184

Espero que este tutorial sea útil para mejorar la experiencia de tus lectores en tu blog de Blogger.
muchas gracias
 
Hola @Empresadex

Estas usando mi firma...

1702775025780.webp


Pero está bien, fui muy inteligente al crearla y justo por eso seguro que varios me la copiaron...

Saludos y éxitos.

PD: Muy bueno tu tutorial.
 
Gracias por compartir tu tutorial, parece muy útil. Seguiré tus pasos para implementar descargas con clave en mi blog. ¿Es posible cambiar el diseño del botón?
Cual es el link de tu blog?
 
Atrás
Arriba