Cara Membuat Tombol Download Dengan Fitur Countdown Timer Pada Blogger

Daftar Isi

ReinsMedia.Com - Pada kesempatan kali ini saya akan share bagaimana caranya membuat tombol download pada blogspot tapi ada fitur menghitung mundurnya atau countdown timer.

Tutorial ini sangat cocok buat teman-teman yang mempunyai blog atau website yang bertema download atau menyediakan fitur download filenya.

Cara Membuat Tombol Download Dengan Fitur Countdown Timer Pada Blogger

Cara Membuat Tombol Download Dengan Fitur Countdown Timer Pada Blogger

Buat teman-teman yang ingin belajar membuat tombol download yang ada fitur countdown timer tersebut, silahkan ikuti tutorial berikut ini.

  1. Masuk ke Dashboard
  2. Pilih Tema
  3. Lalu Edit HTML
  4. Lalu tambahkan Javascript dibawah ini tepat di atas kode </head> dan Simpan.

    <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>
  5. Setelah itu tempatkan kode berikut ini di tempat yang akan ditambahkan tombol download tersebut. Jangan lupa edit Nama File, Size File dan informasi lainnya sesuai keperluan masing-masing.

    <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>

Demikianlah Cara Membuat Tombol Download Dengan Fitur Countdown Timer Pada Blogger tersebut. Semoga bisa bermanfaat. 

Rudi Etnovian
Rudi Etnovian Seorang Blogger yang Menyediakan Layanan Pembuatan Website, Layanan Internet Murah dan Layanan Instal Ulang Windows Komputer

Posting Komentar