Cara Membuat Tombol Countdown Download Timer Di Blogger » Button atau dalam bahasa indonesia tombol merupakan sebuah fitur yang sangat penting di sebuah website, button memiliki banyak fungsi bagi website.
salah satunya button download, yang berfungsi penting untuk perantara link download pihak ketiga, bukan hanya itu saja. button download juga memudahkan para pengunjung untuk bisa mendownload file dengan mudah, dan sangat cocok di terapkan untuk website khusus downloader.
Apa itu button timer?
untuk memberikan tampilan yang lebih lagi button download ini juga bisa di tambahkan timer dengan sedikit memodifikasinya, yang nantinya setiap pengunjung yang akan mendownload file harus menunggu beberapa detik terlebih dahulu untuk bisa download file tersebut.
ini sangat cocok agar pengunjung bisa stay di website lebih lama dan jika website sudah terpasang iklan bisa juga menaikan pendapatan, karena pengunjung harus menunggu beberapa detik terlebih dahulu untuk mendownload dan otomatis pengunjung melihat iklan yang tampil.
Cara membuat button download timer di blogger
membuatnya pun sangatlah mudah, pastikan sudah memiliki blog di blogger jika belum silahkan daftar terlebih dahulu di blogger.com.
jika sudah kalian menuju dasboard blogger ke halaman tema > edit html copy kode di bawah ini dan taruh sebelum kode </head> atau </head><!–<head/>–> lalu save
<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>
<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>
<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'/> The file is ready to download in "+l.toString()+" Seconds....",t.style.display="none")},1e3)}
//]]>
</script>
setelah selesai untuk menerapkannya di halaman atau postingan silahkan copy kode di bawah ini, lalu edit link download, nama file, size file dan lainnya, setelah itu save dan publish.
<div class="batas-downx"> <div class="dalam-downx"> <div class="bungkus-info"> <div class="file-info"> Name File </div> <button onclick="generate()" id="btnx"><i class="fa fa-cloud-download" aria-hidden="true"></i> download</button> <a id="downloadx" href="LINK DOWNLOAD" style="display:none"><i class="fa fa-cloud-download" aria-hidden="true"></i> Re-download</a> </div> <div class="file-deskripsi"> <span class="uploader"><i class="fa fa-user-circle" aria-hidden="true"></i> Nama Pembuat </span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i> File Size 15MB </span> </div> </div> <div class="catatan-downx"> Jika tidak mengunduh secara otomatis, klik Unduh lagi. Dan jika linknya rusak, silahkan lapor melalui halaman Formulir Kontak blog ini. </div> </div>
Penutup
bagaimana mudah bukan? pastikan sudah upload filenya di penyimpanan pihak ketiga ya!, seperti mediafire atau google drive, lalu salin link tersebut dan masukan pada kode href link download, demikian tutorial cara membuat tombol countdown download timer di blogger, semoga tutorial kali ini dapat bermanfaat. ;))
