Cara Membuat Tombol Download dengan Countdown Timer di Blogger

Arsipbiru.com - Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat tombol download dengan countdown timer di Blogger. Seperti yang kita ketahui bahwa tombol download merupakan salah satu fitur yang mungkin harus ada dalam sebuah blog. Terlebih lagi jika blog tersebut memiliki konten download di dalamnya, baik download aplikasi, Video, maupun konten yang lainnya.

Tombol download pada blog memiliki manfaat yang cukup penting bagi pengunjung. Di antaranya adalah memudahkan pengunjung untuk dapat mengenali mana tanda biasa dan mana tanda untuk download. Tombol download yang dibuat lebih menarik akan lebih disukai pengunjung. Tidak hanya lebih mudah dikenali, pengunjung pun akan merasa nyaman karena tampilannya yang user interface.

Dalam membuat tombol download tentunya pemilik blog memiliki sistem tersendiri. Ada yang membuat tombol download dengan sistem direct link. Ada pula blog yang membuat tombol download dengan countdown timer. Setiap sistem download memiliki keunggulannya tersendiri. Sistem direct link, ketika diklik akan secara langsung mengunduh file yang tersimpan dalam suatu online storage. Sedangkan sistem countdown timer, ketika diklik pengunjung akan disajikan tampilan hitungan mundur terlebih dahulu sebelum dapat mengunduh file.

Karena judulnya membuat tombol download dengan countdown timer, maka disini akan disajikan beberapa langkah dalam membuat tombol tersebut. Tentunya dengan tampilan yang unik dan menarik. Yuk, simak langkah-langkah berikut ini.

Cara Membuat Tombol Download dengan Countdown Timer di Blogger

Sebelum melanjutkan tutorial kali ini, pastikan blog Anda telah terpasang Font Awesome versi terbaru agar tombol download berfungsi dengan baik. Jika belum tambahkan kode berikut ini sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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>

Namun, jika Anda telah memasang Font Awesome di Blog, Anda hanya cukup memasang kode berikut ini sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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>

Perhatikan kode l=10 pada script di atas. Silahkan atur waktu mundur sesuai dengan keinginan. Angka 10 merupakan space waktu mundur. Misal, l=5.

Jika sudah, klik Simpan Tema.

Penerapan Tombol Download dengan Countdown Timer di Postingan Blog

Jika langkah di atas telah selesai dilakukan, selanjutnya adalah menampilkan tombol download di postingan blog. Disini Anda cukup menyalin kode HTML berikut dan tempelkan ke dalam postingan blog Anda.

<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>