Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis di Blog ( Tombol Download Countdown Timer ) dengan mudah.
Pada postingan sebelumnya saya sudah membagikan sebuah tutorial yaitu Cara Membuat Tombol Download, Demo dan BuyNow di blogger. Nah pada kesempatan kali ini saya akan membagikan tutorial yang sama dengan tutorial sebelumnya tapi kali ini saya akan menggunakan timer pada tombol tersebut.
Dengan menggunakan fitur ini kalian bisa menaikan Bounce Rate apalagi jika blog kalian dengan niche blog download, dengan menggunakan fitur ini juga bisa menaikan CPM iklan dan masih banyak keuntungan lainnya.
Pasti kalian sering menjumpai tombol download otomatis dengan timer ini ketika kalian mau mengunduh file dari blog download tersebut.
Tombol ini di setting dengan waktu mundur otomatis yang biasanya antara 15 detik atau 10 detik dan bahkan ada juga yang hingga 1 menit, jika angka mundur sudah mencapai angka 0 maka link yang tertuju atau file tersebut akan keluar.
Nah, buat kalian yang mau memasang Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis Di Postingan Blog ( Tombol Download Countdown Timer ) bisa ikuti langkah di bawah ini.
Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis Di Postingan Blog ( Tombol Download Countdown Timer )
- Buka Blog kalian
- Pilih Tema lalu pilih Edit HTML
- Salin kode di bawah ini dan letakan di atas 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>- Cari kode </body> dan letakan kode di bawah ini tepat di atas 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>- Salin juga kode di bawah ini dan letakan di atas kode </body>.
<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>- Jika sudah silahkan simpan template kalian.
- Terakhir silahkan kalian buka postingan kalian yang ingin kalian pasang tombol download tersebut, lalu masuk ke mode HTML ( bukan
Compose) dan letakan kode di bawah ini ke dalam mode HTML.
<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> telatngoding</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>- Publish postingan kalian dan selesai.
Untuk penempatannya silahkan sesuaikan dengan isi artikel kalian
Sangat mudah bukan untuk tutorial Cara Membuat Tombol Download Dengan Waktu Mundur Otomatis Di Postingan Blog ( Tombol Download Countdown Timer ), jika kalian memiliki pertanyaan seputar postingan di atas silahkan bertanya pada kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih atas kunjungannya.