Cara mudah membuat tampilan countdown untuk blog download

 Halo kawa jumpa kembali ,pada saat ini admin akan bagikan tips atau tutorial membuat timer Countdown yang biasanya di gunakan untuk blog atau web download.dan tentu saja untuk pemasangan jika kita menggunakan blogger ,seperti biasa yang akan kita tambah bagian CSS Javasript dan terakhir memasang Script di bagian halaman.

 Dan untuk bagian halaman biar tambah keren ,karena biasanya jika kita ingin memasang link download di bagian Halaman biar tidak ada sidebar,komentar .dengan  tujuan biar tambah ringan loadingnya.Sobat bisa tutorial tentang mmembuat halaman biar tidak ada sidebar Dkk.Bisa lihat di artikel sebelumnya di SINI.

 Sekarang kita lanjut dengan tips cara membuat halaman untuk download file dengan sistem Countdown ,berikut langkah-langkah yang akan kita lakukan.
  1. Buka Blogger,lalu Edit Html (Untuk mempercepat gunakan tombol pada Keyboard (CTRL +F)
  2. Selanjutnya cari kode</body> dan pasang kode javascript di bawah ini tepat berada di atas kode </body>.
Berikut kodenya JSnya.
    <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>
    

    Selanjutnya kita akan lanjut dengan mencari kode </head> copy paste kode di bawah ini di atasnya.Dan kode di bawah ini adalah kode CSS (Cassading Style Sheet)

    <style type='text/css'>
    /* countdown -webkediri.net*/
    #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;}
    .kediri{display:block;width:60%;margin: 20px auto;border-radius:4px;font-family:'PT Sans Narrow', sans-serif}
    .web{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}
    .footer{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}
    .teks 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>
    
    
     Sekarang terakhir kita akan tambahkan kode javascript tempatkan kode di bawah ini,tepat berada di atas 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>
    
    
     Sekarang save template kita ,dan saat akan membuat artikel atau membuat halaman yang menampilkan menu download ,kita tambahkan Script di bawah ini.Jadi saat membuat artikel baru ,usahakan saat akan menuju link download kita buka bagian HTML bukan Compose.Berikut kodenya

    
    <div class="kediri">
    <div class="web">
    <div class="teks">
    <div class="file-info">
    Nama File yang akan di download
    </div>
    <button onclick="generate()" id="btn"><i class="fa fa-cloud-download" aria-hidden="true"></i> Download</button>
    <a id="download" href="linkdownload" 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> ganti nama admin/bisa nama blog</span> <span class="file-size"> <i class="fa fa-file" aria-hidden="true"></i>
     File Size bisa isi dengan ukuran file MB</span>
    </div>
    </div>
    <div class="footer">
    Jika tidak terdownload otomatis silahkan Refresh halaman ini
    </div>
    </div>
    
     Demikian kawan yang bisa admin bagikan semoga bermanfaat dan selamat mencoba

    Baca juga artikel lainnya