Coloca un botón de descarga con contador en tu web/blog

Hola Blogueros, a continuación les mostramos un código HTML muy útil para implementar en tu sitio web o blog si lo usas para compartir archivos propios o con licencia libre en internet. Ya sea para descargar una canción, una aplicación móvil, un video, un documento, etc. Y deseas darle un toque de estar en un sitio premium y automátizado.

El código permite colocar un botón que al hacer click el usuario tenga que esperar 10 segundos o más para que se active la descarga automática

INSTRUCCIONES:
- Revisa los 3 códigos a continuación y copialos a tu editor HTML (Vista HTML en Blogger).
- Cambia el tiempo de descarga, viendo en el código javascript el número en color rojo
- Cambia el texto LINK DE DESCARGA DIRECTA del código HTML por tu link/url.
- Listo pruebalo y sorprende a tus usuarios.

---

Código CSS

<style>
/* Button */
.post-body .button{display:inline-flex;align-items:center; margin:12px 12px 12px 0;padding:10px 15px;outline:0;border:0; border-radius:2px;line-height:20px; color:white; background-color:black; font-size:13px;font-family:var(--font-body); white-space:nowrap;overflow:hidden;max-width:40%}
.button.outline{color:inherit; background-color:transparent; border:1px solid var(--body-altColor)}
.button.outline:hover{border-color:var(--link-bg)}
.button.whatsapp{background-color:#25D366}
.buttonInfo{display:flex;flex-wrap:wrap;justify-content:center; margin:12px 0 0} 
.buttonInfo > *{margin:0 12px 12px 0} .buttonInfo > *:last-child{margin-right:0}
@media screen and (max-width:480px){.buttonInfo > *{flex-grow:1;justify-content:center} }
.buttonInfo > *:last-child{flex:0 0 auto}}
  
/* Button Download */
.zhdescarga{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.zhdescarga a{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f070;border-radius:10px}
.zhdescarga a{background-color:;color:red; margin:0;padding:10px 6px;border-radius:3px; width:auto;height:auto; line-height:1px;font-size:13px}
.zhdescarga a:after{content:attr(aria-label)} 
.zhdescarga a:before{content:attr(data-text)} 
</style>

Código Javascript

<script>
function generate() {
var descarga = document.getElementById('download'),
pantalla = document.getElementById("screen"),
boton = document.getElementById('button'),
link = document.getElementById('download').href,
tiempo = 10;
var div = document.createElement('div');
var span = document.createElement('span');
descarga.parentNode.replaceChild(span, descarga,div);
var zheardownload;
zheardownload = setInterval(function () {
tiempo--; if (tiempo < 0) {
span.parentNode.replaceChild(descarga, span);
clearInterval(zheardownload);
pantalla.innerHTML = "Si no se descarga automáticamente."; 
window.location.replace(link);
descarga.style.display = 'inline'
} else {
span.innerHTML = 'Por favor espere <b> ' + tiempo.toString() +  '</b> segundos...';
button.style.display = 'none'
}
    }, 1000)
}
</script>

Código HTML

<center><div class="zhdescarga">
<a aria-label="DESCARGAR" class='button fileLink' onclick="generate()" id="button" ><i class="fas fa-download"></i> </a>
  
  <div id="screen" style="display:inline"></div><a id="download" data-text="Click Aqui" href="LINK DE DESCARGA DIRECTA" target="_blank" style="display:none"></a>
</div></center>

---

DEMO:

A continuación te mostramos como funcionaría el código en tu sitio web, para ello hemos colocado nuestra aplicación android (APK) del Blog de Zheard para que puedas descargarla y tenerla en tu celular.

DESCARGA APLICACIÓN ANDROID DEL BLOG

Nota: Recuerda que puedes utilizar y mejorar el código CSS para darle el estilo que mejor se adecue a tu sitio web.