Cara Membuat Download Otomatis dengan Countdown Timer - Reboza Sambirejo

Cara Membuat Download Otomatis dengan Countdown Timer - Setelah lama tidak update kini saya akan membagikan sebuah tutorial yang mungkin dalam penerapanya sering dijumpai pada website file sharing/upload download maupun blog download. Sesuai dengan judul saya akan membagikan tutorial download otomatis. Secara singkat konsep dari download otomatis ini seperti yang sering kita jumpai di blog download yaitu ketika kita klik tombol download maka akan muncul hitung waktu mundur selama yang sudah kita tentukan, jika waktu tersebut sudah mencapai angka 0 maka file akan terdownload otomatis/link download akan terbuka otomatis.

Mungkin sebagian dari kalian masih bingung dan bertanya. Gunannya untuk apa? bukannya malah kelamaan?..dsb
Perlu diketahui dengan menunggunya si pengunjung yang ingin mendownload file di web/blog kita maka ada keuntungan dari kita seperti menaikkan bounce rate, bisa juga menaikkan CPM iklan kita jika memasang dan juga keuntungan lainya. Tutorial ini juga saya khususkan bagi yang ingin membuat blog download sendiri menggunakan blogspot.

Download otomatis yang saya buat sebenarnya terinspirasi dari salah satu website download. Walau style nya cuma sederhana namun hal tersebut sudah saya buat dengan fitur yang cukup lengkap seperti responsive design, font awesome, dan download ulang jika file tidak terdownload otomatis. Untuk demo lebih lanjut mengenai project yang akan kita buat silahkan bisa lihat di link berikut.

Result Result (Blogger)

Langsung saja ke tutorial, pastikan ikuti sesuai langkah-langkah berikut.

Cara Membuat Download Otomatis dengan Countdown Timer

Pertama masuk ke blogger >>  Tema >>  Edit HTML. Kemudian silahkan pasang script berikut sebelum </body>

<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 = "<i class='fa fa-clock-o' aria-hidden='true'/> " + "File siap diunduh dalam " + "" + waktu.toString() + " Detik....";
            btn.style.display = "none";
        }
    }, 1000);
}
//]]>
</script>

Ganti angka 10 dengan waktu yang sobat inginkan(dalam hitungan detik)

Kemudian kopikan kode css berikut sebelum </head>

<style type='text/css'>
/*Auto Download By Reboza Sambirejo*/
#btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700}
#btn:hover, a#download:hover{background:#BC4634;color:#fff;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.paling-jobo{display:block;width:60%;margin: 20px auto;border-radius:4px;font-family:'PT Sans Narrow', sans-serif}
.bungkus-down{background:#FE634A;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;}
.file-info{color:#fff;display:inline-block;font-size:1.3em;line-height: 38px;text-align:left}
.catatan-sikil{padding:10px 20px;background:#EAEBED;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555}
#download{float:right}
a#download{padding:10px 20px;border-radius:3px;background:#fff;color:#FE634A;float:right;text-transform:uppercase;font-weight:700;text-align:center}
.embuh span{display:inline-block;line-height: 38px;float:right}
.iklan-down{float:right;width:40%;padding-left:10px;margin:20px 0;text-align:right}
.file-deskripsi{display:block}
.file-deskripsi span{margin-right:3px}
.iklan-ngisore, .iklan-duwure{display:block;width:100%;margin:0 auto}
h2.entry-title{margin-top:10px}
.post-labels, .post-timestamp{display:none}
a.home-link{color:#555;font-size:20px;}
a.home-link:hover{color:#222}
@media screen and (max-width:600px){
.paling-jobo{float:none;width:100%}
.iklan-down{float:none;width:100%;text-align:center;padding:0}
 }
@media screen and (max-width:360px){
/* CSS styles */
.file-info{display:block;text-align:center}
#btn, a#download{width:100%;margin-bottom:10px}
.embuh span{float:none;width:100%;text-align:center}
.file-deskripsi{text-align:center}
}
</style>

Untuk warna dan style lain bisa disesuaikan menurut selera sobat masing-masing

Kemudian untuk format/kode dipostingan seperti berikut. Silahkan sesuaikan dengan data/deskripsi file sobat. Silahkan masuk ke postingan baru/laman baru dan pastikan dalam pembuatan postingan masuk ke mode HTML bukan Compose.

<div class="paling-jobo">
<div class="bungkus-down">
<div class="embuh">
<div class="file-info">
Nama File Mu
</div>
<button onclick="generate()" id="btn"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button>
<a id="download" href="linkdownload" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download Ulang</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Reboza Sambirejo</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
 File Size 5MB</span>
</div>
</div>
<div class="catatan-sikil">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
</div>
</div>

Dikarenakan script diatas menggunakan font awesome dan PT Sans Narrow, untuk itu jika di blog sobat belum dipasang script font awesome silahkan dipasang terlebih dahulu. Silahkan bisa menggunakan script dibawah ini dan kopikan sebelum </body>

<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");
//]]>
</script>

Mungkin sekian tutorial kali ini, jika ada script error atau masih kurang paham bisa tanyakan lewat komentar.

Jika ingin copy script untuk dibuat artikel baru jangan lupa tulis sumbernya ya. Hargailah karya orang lain jika Anda ingin dihargai