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 gratis 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.
Table of Contents
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
</head><!--<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
<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 file yang kamu bagikan |
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.
Penutup
Nah itu tadi
cara membuat tombol download dengan Countdown timer di Blogger, fitur ini sangat cocok digunakan untuk blog dengan konten download ataupun nick lain.
Semoga dengan adanya artikel ini bisa membantu kamu yang mencari tampilan button download yang menarik dengan fitur waktu mundur.
