Cara Membuat Button Download Countdown Timer di Blogger

Membuat Button Download di Blogger - Tombol download merupakan fitur yang harus ada dalam sebuah blog atau website, terutama jika blog tersebut memiliki niche yang berisi konten donwload seperti Aplikasi, Video atau konten lain yang memang menyediakan file untuk di unduh. Manfaat adanya tombol download adalah untuk memudahkan user atau pengunjung pada saat di klik untuk mendapatkan file yang disediakan oleh pengelola blog yang biasanya di simpan di hosting atau layanan pihak ketiga penyimpanan cloud seperti Google drive, MediaFire, OneDrive, Mega dll. Sistem download yang ditampilkan oleh setiap pemilik blog/website akan berbeda, ada tombol download yang ketika di klik akan melakukan direct link ke halaman download dimana file tersebut di host atau disimpan, atau bisa juga melakukan download secara langsung dimana ketika diklik file akan terunduh otomatisz biasanya akan menampilkan countdown atau waktu mundur.

Cara Membuat Button Download Countdown Timer di Blogger

Nah, Di tutorial kali ini saya akan coba berbagi cara bagaimana membuat button download dengan Countdown Timer, dimana ketika pengunjung melakukan klik maka waktu hitung mundur akan dimulai dan file akan terunduh secara otomatis. Keuntungan memasang button download dengan countdown adalah untuk mengurangi tingkat rasio pantulan blog saat pengunjung mengunjungi halaman tersebut.

Tutorial Memasang Button Download Countdown Timer

Sebelum ke tutorial pastikan blog kamu sudah terpasang Font Awesome versi terbaru agar tombol download berfungsi dengan baik, jika belum tambahkan kode dibawah sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

// Paste Kode Sebelum </head>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> The file is ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>

Buat kamu yang sebelumnya sudah memasang kode Font Awesome di Blog, cukup memasang kode berikut

<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> The file is ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>

Atur waktu mundur sesuai keinginan pada kode yang saya tandai l=10, Angka 10 merupakan space waktu mundur. Jika sudah Klik Save/ Simpan untuk melakukan perubahan yang sudah dilakukan di template blogger kamu.

Menerapkan Tombol Download Countdown Timer di Postingan Blog

Selanjutnya yaitu merapkan menampilkan tombol download yang sudah ditetapkan di kode template kamu ke postingan blog kamu, caranya yaitu salin kode dibawah ini pada menu HTML postingan (Jangan di menu Compose)

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Name File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="LINK DOWNLOAD" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Re-download</a>
</div>
<div class="file-deskripsi">
<span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Nama Pembuat </span>
<span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i> File Size 15MB </span>
</div>
</div>
<div class="catatan-downx">
Jika tidak mengunduh secara otomatis, klik Unduh lagi. Dan jika linknya rusak, silahkan lapor melalui halaman Formulir Kontak blog ini.
</div>
</div>

Atur kode yang saya tandai sesuai kebutuhan kamu, mulai dari Nama, Other, Size dll.

Kode	Keterangan
Nama File	Ubah sesuai nama file yang kamu bagikan
LINK DOWNLOAD	URL Link download
Nama Author	Bisa dirubah menjadi Nama kamu atau Nama Blog kamu
File Size	Bisa dikosongkan atau Agar lebih profesional bisa di isi sesuai besar file yang kamu bagikan untuk memberi detail
Catatan	Isi sesuai catatan kalian

Untuk mendapatkan link download yang bisa diunduh secara langsung pada saat di klik, kamu bisa baca artikel saya sebelumnya tentang Google Drive, Dropbox dan OneDrive. Demo Button Download

Penutup

Nah itu tadi cara membuat button download dengan Countdown timer di Blogger, semoga dengan adanya artikel ini bisa membantu kamu yang mencari tampilan button download yang menarik dengan fitur waktu mundur.
Article "Cara Membuat Button Download Countdown Timer di Blogger" protected