Membuat Tombol Download dengan Countdown Timer Responsive

September 03, 2017
Membuat Tombol Download dengan Countdown Timer Responsive

Salam Blogger, CrepictDGZ kali ingin berbagi tips bagaimana cara membuat tombol download dengan disertai countdown timer ( hitung mundur ). Maksud dari countdown timer disini adalah hitungan mundur setelah tombol download di klik, sebelum menuju ke link download yang sebenernya…nanti bisa dilihat demonya biat lebih jelas.

Keuntungan dari countdown timer adalah membuat space waktu kepada pengunjung selama 10 detik, tentu waktu ini akan memberikan sedikit peluang kepada Adsense ( iklan ) yang ada di Blog kita.

Lebih cocok tombol semacam ini dipasang pada Blog Download Software atau bagi-bagi Aplikasi Andoid.

DEMOBLOGDEMO on Codepen

Membuat Tombol Download dengan Countdown Timer Responsive

1. Silahkan masuk ke Akun Blogger Sobat lalu masuk ke menu Tema >> Edit HTML

2. Simpan kode dibawah ini sebelum kode < /head>

/*Auto Download with Countdown Timer*/
#btn{cursor:pointer;margin-top:10px;padding:10px 20px;border:none;border-radius:3px;background:#fdfdfd;color:#3cc091;float:right;text-transform:uppercase;font-size:16px;font-weight:600;text-shadow:none;}
#btn:hover, a#download:hover{background:#3cc091;margin-top:10px;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;}
.dgzwrap{display:block;width:100%;margin: 20px auto;border-radius:4px;font-family:&#39;Poppins&#39;, sans-serif}
.dgz-wrap1{background:#576269;color:#fff;padding:10px 20px;display:block;border-top-right-radius:3px;border-top-left-radius: 3px;margin-bottom:2px}
.size-wrap{color:#fff;display:inline-block;font-size:1.5em;font-weight:700;line-height: 38px;text-align:left}
.bottom-wrap{padding:10px 20px;background:#3cc091;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#fff}
#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}
.title-wrap span{display:inline-block;line-height:38px;float:right;margin-top:10px;background:#3cc091;padding:0 10px;border-radius:3px;}
.area-size{display:block}
.area-size span{margin-right:3px}
.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){
.dgzwrap{float:none;width:100%}}
@media screen and (max-width:320px){
.size-wrap{display:block;text-align:center}
#btn, a#download{width:100%;margin-bottom:10px}
.title-wrap span{float:none;width:100%;text-align:center}
.area-size{text-align:center}
}

3. Kemudian simpan kode dibawah ini diatas kode < /body>

<script type='text/javascript'>
//Download button with Countdown Timer by crepictdesign.blogspot.co.id
//<![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>

4. Simpan Template Sobat..

Penerapan Tombol Download Countdown Timer pada Posting Blog

1. Silahkan membuat artikel terkait dengan tombol download yang nanti akan Sobat pergunakan, Setelah selesai letakkan kode dibawah dimana Sobat ingin meletakkan, semisal dibawah artikel Blog ( seperti gambar diatas ).
Untuk menulis Artikel tetap pada menu compose ya…..Sob

2. Untuk meletakkan kode Download dibawah ini silahkan masuk ke HTML ( jangan Compose )

<div class="dgzwrap">
<div class="dgz-wrap1">
<div class="title-wrap">
<div class="size-wrap">
Whatsapps 3.1.200.1 Apk
</div>
<button onclick="generate()" id="btn">Download</button>
<a id="download" href="https://crepictdesign.blogspot.co.id/" style="display:none"> Try Again</a>
</div>
<div class="area-size">
<span class="uploader"></span> <span class="file-size">
 File Size 89 MB</span>
</div>
</div>
<div class="bottom-wrap">
Jika tidak terdownload otomatis silahkan klik Download Ulang. Dan jika link rusak silahkan lapor melalui halaman Contact Us.
</div>
</div>


Membuat Tombol Download dengan Countdown Timer Responsive


3. Copy dan pastekan kode diatas, dibagian paling bawah artikel Blog Sobat ( masih pada posisi HTML bukan Compose ), lalu tekan “Preview/Pratinjau”. Jika sudah sesuai silahkan tekan “Publikasikan/Publish”.

4. Selesai….

Selamat mencoba..

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
0 Komentar

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini