Cómo Poner un Botón de Descarga con Temporizador en Blogger

¿Estás buscando un botón de descarga con temporizador para tu Blog? ¿Un botón que al presionarlo aparezca una cuenta regresiva antes de abrir el enlace? En ese caso, este artículo será gran ayuda para ti.

Con este post, te traigo un bonito botón para las entradas del blog, en aquellas en las que publicas algún archivo y que el usuario lo tenga que descargar.

También te mostraré como puedes añadir este botón de descarga en tu sitio web de Blogger. Es fácil de instalar y si conoces algo de código css lo puedes personalizar a tu gusto.

¿Qué es un botón de descarga con temporizador?

Un botón de descarga con temporizador para Blogger es un simple código JavaScript que al presionar para descargar un archivo, inicia una cuenta regresiva en segundos. Los segundos pueden variar de acuerdo a cómo lo hayas configurado, y una vez que completa la cuenta regresiva se activa el enlace de descarga. De ahí viene su nombre de; botón de descarga con temporizador o también llamado botón de descarga con cuenta regresiva.

Podrás establecer el tiempo según tu elección y cuando se detenga el temporizador, la url de descarga se abrirá automáticamente. De este modo, cuando un usuario haga clic en el botón, se abrirá el enlace dentro de la misma pestaña y el usuario podrá descargar el archivo.

Ventajas de usar un botón de descarga con cuenta regresiva

En caso de que tengas un blog en el que los visitantes vienen a descargar un archivo y se marchan del sitio tan pronto como comienza la descarga, necesitas implementar el script de botón de descarga para blogs

• Con ello, puedes pedir al usuario que espere un tiempo antes de descargar el archivo y de esta manera conseguirás un tiempo de permanencia en tu sitio web. Con esta opción podrás reducir el porcentaje de rebote de las entradas del blog.
• La otra ventaja al implementar un temporizador con cuenta regresiva, está en que te ayuda a aumentar los ingresos de Adsense comprometiendo al usuario a permanecer por más tiempo en nuestro blog o página web.

Recuerda que mientras más tiempo un usuario se mantiene en nuestras entradas, aumenta la posibilidad de recibir clics en los anuncios, en otras palabras, la taza de clics "CTR" puede incrementar drásticamente y eso hace que Google comience a recomendar nuestro contenido. Para visualizar esas analíticas te recomiendo vincular Google Analytics en tu blog

¿Cómo añadir un botón de descarga con temporizador en Blogger?

El método de añadir el botón de descarga en blogger es bastante sencillo, cuando tengas tu enlace, solo tienes que agregarlo al script que te dejaré más abajo.

También puedes establecer los segundos a tu gusto, te recomiendo no abusar del tiempo, coloca los segundos que sean aceptables. Ponte en el lugar de un visitante de tu blog, y piensa si te gustaría esperar un minuto para descargar un archivo, créame que eso es mucho tiempo.

Código del botón de descarga

Copia el siguiente código y pégalo en el post o página en la que quieras añadir el botón. Solo tienes que activar el modo vista en HTML para que te funcione, de lo contrario si lo haces en el modo de redacción no te funcionaría.

Recuerda que puedes personalizarlo y cambiarle los colores para que concuerde con tu plantilla de blogger, si conoces algo de css te será muy fácil.

<script type="text/javascript">
//<![CDATA[
function generate() {
    var linkDL = document.getElementById("download"),
        btn = document.getElementById("btn"),
        direklink = document.getElementById("download").href,
        waktu = 10;
    var teks_waktu = document.createElement("span");
    linkDL.parentNode.replaceChild(teks_waktu, linkDL);
    var id;
    id = setInterval(function () {
        waktu--;
        if (waktu < 0) {
            teks_waktu.parentNode.replaceChild(linkDL, teks_waktu);
            clearInterval(id);
            window.location.replace(direklink);
            linkDL.style.display = "inline";
        } else {
            teks_waktu.innerHTML = "Por favor espere " + waktu.toString() + " segundos.";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>
<style>
  .buttons {margin: 10%;text-align: center;}
.btn-hover {width: 180px;font-size: 16px;font-weight: 600;color: #fff;cursor: pointer; margin: 20px;height: 45px;text-align:center;border: none;background-size: 300% 100%;border-radius: 8px; moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}

.btn-hover:focus {outline: none;}
.btn-hover.color-8 {background-image: linear-gradient(to right, #f76c5e, #F5DD90, #F68E5F);box-shadow: 0 4px 8px 0 rgba(45, 54, 65, 0.3);}
</style> 
  
<div style='text-align: center;'>
  <button class='btn-hover color-8' onclick="generate()" id="btn"><i class='fa fa-download'></i> Descargar</button>
<a id="download" href="#" style="display:none"></a></div>

Reemplaza # por tu enlace de descarga. Te debe quedar de este modo: href="https://www.tublog.com/enlace-de-descarga.html"

Establece los segundos mediante la siguiente función en el script: waktu = 10;. Cambia 10 por los segundos que quieres que el usuario permanezca en el sitio después de presionar el botón.

Importante: No establezcas tiempos muy largos, como mínimo unos 10 segundos y como máximo unos 30 o 40 segundos. De lo contrario, la gente puede abandonar tu blog antes de completar la cuenta regresiva.

Mi recomendación es que el botón lo coloques justo al final del contenido, de esa manera el usuario hace un pequeño recorrido entre la cabecera y el pie de la entrada.

Si no te aparece el icono de descarga, solamente agrega el siguiente código en tu plantilla justo arriba de </head> .

<link href='//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Espero que este Script de botón de descarga con temporizador en blogger te haya servido.