Cara Membuat Button Download Dengan Countdown Timer Pada Blog

Cara Membuat Button Download Dengan Countdown Timer Pada Blog


Pelajar Design - Pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Button Download Dengan Countdown Timer Pada Blog. Maksud dari Countdown Timer disini adalah hitungan mundur setelah button download di klik.

Keuntungan dari Countdown Timer adalah membuat space waktu kepada pengunjung selama 10 detik, tentu tombol button ini bagus untuk pemilin website yang sudah dipasangi iklan Adsense. Lebih cocok lagi dipasang untuk website Download Software atau lainnya.

Cara Membuat Button Download Dengan Countdown Timer Pada Blog

1. Silahkan login ke blogger.com.
2. Masuk ke TEMA > Edit HTML.
3. Kemudian cari kode </style> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/*Auto Download with Countdown Timer - Redesign Template*/
#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}
}

4. Kemudian simpan kode dibawah ini tepat DIATAS kode </body>.

<script type='text/javascript'>
//Download button with Countdown Timer - Redesign Template
//<![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>

Silahkan Ganti nomor yang diwarnai sesuai waktu hitung mundur yang kalian inginkan  

 5. Simpan.


Untuk Penerapan Tombol Download Countdown Timer Pada Postingan Blog

1. Silahkan kalian buat artikel terlebih dahulu.
2. Pastekan kode dibawah ini pada menu HTML ( Jangan Compose ).

<div class="dgzwrap">
<div class="dgz-wrap1">
<div class="title-wrap">
<div class="size-wrap">
Whatsapps 1.1.1.1 Apk</div>
<button id="btn" onclick="generate()">Download</button>
<a href="https://rdzgntemplate.blogspot.com/" id="download" style="display: none;"> Try Again</a></div>
<div class="area-size">
<span class="file-size">
</span> <span class="uploader">File Size 100 MB</span><span class="file-size"></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>

Silahkan Ganti text yang diwarnai sesuai keinginan dan kebutuhan kalian.

3.  Publikasikan.


Bagaimana tutorial Cara Membuat Button Download Dengan Countdown Timer Pada Blog. Silahkan comment dibawah jika kalian punya pertanyaan seputar blogger, dan comment juga dibawah jika tutorial kali ini bermanfaat.

You may like these posts