Jagoandzgn.com – Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana cara membuat tombol download dengan countdown timer di blogger dengan mudah,
Nah tutorial kali ini saya akan meng-share tutorial menarik untuk kamu yang mempunyai Niche download dan ada keuntungannya dari fitur ini seperti menaikkan bounce rate, dan bisa juga menaikkan CPM iklan kita jika memasang dan juga keuntungan lainya.
Secara konsep dari tombol download otomatis ini seperti yang sering kita jumpai di blog download yaitu ketika meng-klik tombol download maka akan muncul hitung waktu mundur
selama yang sudah kita tentukan, jika waktu tersebut sudah mencapai angka 0 maka file akan terdownload otomatis/link download akan terbuka otomatis.
Cara Membuat Download Otomatis dengan Countdown Timer
1. Silahkan login ke akun blogger dengan menggunakan akun Gmail kam
2. Masuk ke menu TEMA > klik Edit HTML
3. Cari kode berikut ini </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. Tetap dikode sebelumnya, pastekan juga kode dibawah ini tepat DIATAS kode </body> 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 ini dan pastekan tepat DIATAS kode </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. Kalau sudah silahkan klik SIMPAN, dan kita ke postingan yang ingin kamu pasang.
7. Masuk ke mode HTML (bukan compose) dan pastekan 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 kamu sesuaikan dengan file download kamu masing-masing yang sudah saya tandai dengan background biru.
Demo
Bagaimana mudah bukan untuk tutorial cara membuat tombol download otomatis dengan countdown timer di blogger dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.
Baca Juga Artikel Lainnya :