Memasang Tombol Download Box dengan Counter

Templatesme.com - Mungkin kita sering menyaksikan tombol download yang secara otomatis akan menyerahkan waktu hitung mundur saat kita klik dan sesudah waktu selesai seringkali akan membuka otomatis ke halaman atau langsung mendowload file yang disediakan oleh website tersebut. Begitu juga dengan tips Memasang Tombol Download Box dengan Counter yang bakal saya bagikan ini konsepnya tidak cukup lebih sama.

Alasan mengapa memasang tombol download box dengan counter ini salah satunya ialah mengurangi tingkat Bounce Rate blog kita saat pengunjung mendatangi 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 &lt;/head&gt;&lt;!--<head/>--&gt;

<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> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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> Namina Responsive Blogger</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>
</div>

Edit kembali tulisan yang ditandai dengan tulisan dan link Anda. Ganti linkdownloadx di href="linkdownloadx" dengan link tujuan Anda.

Subscribe to receive free email updates:

0 Response to "Memasang Tombol Download Box dengan Counter"

Post a Comment