Memasang Tombol Download Box dengan Counter
Mungkin Anda sering melihat tombol download yang secara otomatis akan memberikan waktu hitung mundur ketika kita klik dan setelah waktu selesai biasanya akan membuka otomatis ke halaman atau langsung mendowload file yang disediakan oleh situs tersebut. Begitu pun dengan tips Memasang Tombol Download Box dengan Counter yang akan saya bagikan ini konsepnya kurang lebih sama.
Alasan kenapa memasang tombol download box dengan counter ini salah satunya adalah mengurangi tingkat Bounce Rate blog kita ketika pengunjung mengunjungi halaman.
Oke, tanpa berlama-lama berikut adalah tipsnya.
Memasang Tombol Download Box dengan Counter
Sebelum menambahkan widget ini, pastikan di blog Anda sudah terpasang Fontawesome. Jika belum, tambahkan kode ini sebelum </head> atau </head><!--<head/>-->
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
Pertama buka Blogger > Klik menu Tema, Edit HTML dan tambahkan kode CSS ini sebelum </head><!--<head/>-->
<style type='text/css'>
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#e67e22;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#e67e22;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}
</style>
Setelah itu tambahkan kode ini sebelum </body> atau bisa juga ditambahkan sebelum </head>.
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=10,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File siap diunduh dalam "+l.toString()+" Detik....",t.style.display="none")},1e3)}
//]]>
</script>
Edit tulisan pada kode yang ditandai, edit juga l=10 angka 10 berarti waktu mundur yang dibutuhkan adalah 10 detik.
Klik tombol Simpan tema.
Selanjutnya untuk menambahkan pemanggil Download Box nya, tambahkan kode di bawah ini di postingan pada tab HTML.
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
Nama File
</div>
<button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button>
<a id="downloadx" href="linkdownloadx" 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> Aan Sulistiawan</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
File Size 300MB</span>
</div>
</div>
<div class="catatan-downx">
Jika tidak terdownload otomatis silakan klik download Ulang. Dan jika link rusak silakan lapor melalui halaman Contact Form blog ini.
</div>
Edit kembali tulisan yang ditandai dengan tulisan dan link Anda. Ganti linkdownloadx di href="linkdownloadx" dengan link tujuan Anda.
Untuk melihat hasilnya bisa cek di bawah ini
Join the conversation