Cara Membuat Tombol Auto Download With Countdown Timer - Hai sobat blogger, pada kesempatan kali ini admin akan berbagi trik mengenai blogging, untuk para blogger yang mempunyai blog dengan niche download/gado-gado.
Seperti yang pernah kita jumpai di blog yang membagikan artikel seputar download pasti akan memakai trik ini. Mungkin sebagian dari kalian merasa bingung, apakah dengan trik ini malah membuat para visitor jadi enggan berkunjung? tentu saja iya sob.
Tapi dengan menggunakan trik seperti ini akan meningkatkan bounce rate dan bisa juga menaikkan CPM jika memasang iklan, dan tentu saja banyak kelebihan lainnya. Tutorial ini saya khususkan bagi para blogger yang mempunyai blog seputar download.
Trik ini terinspirasi dari sebuah website, walaupun dengan tampilan yang sederhana tetapi saya sudah redesign agar tampilannya menjadi lebih menarik, dengan fitur tambahan yang saya sertakan seperti, font awesome, responsive design, dan download ulang jika file tidak terdownload secara otomatis. Untuk demo kalian bisa cek pada tombol dibawah ini.
Menarik? jika menarik, silahkan lanjutkan ke tutorial cara pembuatan trik tersebut. Langsung saja ke tutorial, pastikan ikuti sesuai langkah-langkah berikut.
Cara Membuat Tombol Auto Download With Countdown Timer
1. Masuk ke akun Blogger kalian.
2. Setelah itu masuk ke Template > Edit Html.
3. Kemudian pasang script dibawah ini, sebelum kode </body>
Untuk memudahkan pencarian kode, bisa kalian gunakan pintasan dengan menekan tombol CTRL + F
<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>Ganti angka 10 dengan durasi waktu yang sobat inginkan (dalam hitungan detik).4. Kemudian copy CSS dibawah ini sebelum kode </head>
<style type='text/css'>
/*Auto Download By XDCodeFix*/
#btn{cursor:pointer;padding:10px 20px;border:none;border-radius:3px;background:#fff;color:#FE634A;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:#FE634A;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>Untuk warna dan style lain bisa kalian sesuaikan menurut selera kalian masing-masing.5. Simpan Template.
Belum sampai disini, jika ingin menerapkan pada postingan/artikel, kalian harus menambahkan kode html dibawah ini kedalam postingan/artikel. Kode HTML dibawah ini masih menggunakan settingan standart, silahkan kalian ganti sesuai selera masing-masing.
<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="#" 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> Bang Fernand</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>Untuk menuliskan html ini, kalian diharuskan menulis pada kolom HTML bukan Compose.
Dikarenakan script diatas menggunakan Font Awesome dan Font PT Sans Narrow, untuk itu jika ditemplate kalian belum terpasang script pemanggil Font Awesome dan Font PT Sans Narrow, silahkan pasang terlebih dahulu. Bisa kalian panggil script tersebut dengan menaruh script pemanggol dibawah ini, sebelum 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>Mungkin sekian dulu artikel dari Cara Membuat Tombol Auto Download With Countdown Timer, jika script error atau ada pertanyaan dikarenakan bingung dengan tutorial ini silahkan tanyakan dikolom komentar dibawah artikel ini.
Terima Kasih
