Cara Membuat Tombol Download Dengan Countdown Timer

Cara Membuat Tombol Download Dengan Countdown Timer

Sempetin.my.id - Pada artikel sebelumnya, admin pernah share tutorial yaitu Cara Membuat Tombol Demo, Download, dan Buy Dengan Icon SVG. Nah sedangkan pada kesempatan kali ini admin akan memberikan tutorial yang sama hanya saja lebih ditambahkan waktu dengan hitungan mundur.

Tombol dengan tampilan seperti ini dapat kalian temukan pada blog download, style tombol yang seperti ini sering kali digunakan dengan berbagai macam tujuan, apa saja tujuannya tersebut? akan kita bahas semuanya secara menyeluruh di artikel ini, jadi baca secara menyeluruh dan jangan skip.

Pembahasan

Memasang tombol download seperti ini tentunya akan meningkatkan bounce rate dan juga dapat digunakan untuk menaikkan CPM iklan di blog.

Countdown Timer (hitungan mundur) dari tombol seperti ini biasanya sering kita temui diantaranya 15 detik, 10 detik atau bahkan 1 menit untuk bisa menuju otomatis ke link download yang kita tuju.

Untuk anda yang sudah tidak sabar ingin segera mencobanya, bisa anda ikuti setiap langkah cara pemasangannya dibawah ini.

Cara Pemasangan di Template

Untuk membuat tombol download dengan count down timer seperti ini, anda diharuskan untuk menambahkan CSS, dan Javascript di template yang sedang anda gunakan. Lalu bagaimana cara nya? simak baik-baik tutorial dibawah ini.

1. Menambahkan Kode CSS

Pastikan anda sudah login ke Blogger, lalu salin kode dibawah ini dan paste diatas </head> atau ]]></b:skin> pada template anda.
<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>

2. Menambahkan Javascript

Salin kode dibawah ini, dan paste diatas kode </body> yang terdapat pada template anda.
<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>

<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>
Jangan lupa untuk Simpan Tema yang sudah anda edit seperti diatas.

Cara Penerapan di Postingan

Untuk menerapkan pada postingan, anda perlu memasukkan kode HTML berikut ini, pada tab penulisan HTML bukan Compose.
<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> Sempetin</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>
Setelah selesai, anda bisa publikasikan postingan yang anda buat.

Penutup

Sampai disini anda telah berhasil menerapkan tutorial diatas, dan apabila gagal atau ada yang perlu untuk ditanyakan bisa ajukan melalui kolom komentar yang tersedia dibawah artikel ini.

Mungkin sekian dulu postingan yang bisa kami berikan, semoga bermanfaat dan
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

5 komentar

  1. Keren gan :) bookmark dulu hehe

    BalasHapus
  2. Bikin turtor untuk tampilan header versi mobile.

    BalasHapus
  3. Ada tutorial untuk judul postingan di tengahnya ga min?

    BalasHapus

Posting Komentar