Cara Membuat Tombol Download dengan Countdown Timer

AmbyarBlog - Pada kesempatan kali ini saya akan berbagi tutorial yang sangat menarik untuk sobat coba, apabila mempunyai blog dengan niche download. Tutorial ini akan sangat bermanfaat sekali, yang akan saya bagikan ialah Cara Membuat Tombol Download dengan Countdown Timer. Keuntungannya dari fitur ini dapat menaikan bounce rate, dapat juga menaikan CPM iklan sobat jika memasangnya dan keuntungan lainnya.

Secara konsep, tombol download ini akan otomatis muncul waktu hitung mundur apabila sobat meng-kliknya seperti halnya tombol download yang sering kita jumpai. Jika hitungan tersebut menunjukan angka 0 akan otomatis link download muncul. Untuk tutorialnya silahkan simak dengan baik langkah-langkah berikut.

Cara Memasang Tombol Download Countdown Timer di Blog

1. Buka dashboard Blogger sobat.
2. Pilih menu Tema > Edit HTML.
3. Cari kode </body> dan paste kode dibawah tepat DIATAS kode tersebut.

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

4. Tepat dikode tadi </body> paste juga kode dibawah ini tepat DIATAS kode tadi. Karena fitur ini menggunakan font Awesome.

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

5. Kemudian copy kode dibawah dan paste DIATAS </head>.

<style type='text/css'>
/* Auto Download */
#btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#1589E3;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:#1589E3;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:320px){
/* 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>

6. Terakhir Simpan. Untuk pemasangan silahkan masuk ke menu postingan.
7. Pilih Mode HTML (bukan Compose) dan copy kode dibawah ini.

<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> Jagoan Design</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>

8. Silahkan sesuaikan kode tombol download tersebut dengan keinginan sobat.

Gimana mudah bukan Cara Membuat Tombol Download dengan Countdown Timer yang saya bagikan. Semoga bermanfaat, apabila ada pertanyaan silahkan komen di kolom komentar. Sampai jumpa, sekian dan terima kasih.