-->

Cara membuat tombol Download dengan Waktu

countdown timer, hitung mundur, responsive, pakai waktu, dengan script, dengan 2 tombol demo dan download,

Daftar Isi [Tutup]
    Tutorials kali untuk artikel ini akan membahas bagaimana cara membuat sebuah tombol unduh/demo/sejenisnya dengan jeda waktu tertentu yang dapat disetel manual atau bahasa lainnya countdown timer.

    Dengan cara ini tentu saja tidak otomatis kedownload atau terbuka linknya tetapi akan muncul hingga kamu dapat mengklik atau menyentuh untuk menggarahkan ke url yang dituju dengan tampilan yang keren atau flat.

    Tampilannya punya bisa kamu sesuaikan dengan selera masing-masing dengan merubah css/html nya. sedikit info ini lain timer pada camera yah hahah

    Cara membuat tombol Download dengan Waktu

    Sesuai dengan peraturan baru yang saya terapkan sabtu kemarin tanggal 21/04/2018 blog ini akan update antara sabtu dan minggu, itu untuk update tentang kode,tutorials,design dan sejenis programmer.

    Untuk hari-hari lainnya mungkin akan update artikel personal, kenapa personal? yah karena tujuan utama adanya blog ini untuk hobi jadi kalau mungkin ada masalah yang pernah saya alami tinggal buka disini karena sudah saya catat dan mungkin saja sangat berguna bagi orang lain.

    Jadi untuk hari senin-jum'at akan ada update artikel personal atau tentang admin. mungkin saja itu admin lagi nanam padi,nanam sayur,jalan-jalan, dan sejenis yang tidak ada sangkut pautnya dengan programmer. hoho

    Kembali ketopik utama artikel ini,,,

    Tahap Pertama - Tambah Kode CSS Tombol Download

    buka blogger -  template - edit html, salin kode css dibawah ini dan letakkan atas </b:skin> atau </style> dan simpan
    .ttan{display:inline-flex;border-radius:4px;cursor:pointer;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);font-size:13px;font-weight:700;text-transform:uppercase;color:#FFF!important;background-color:#22a1c4!important;margin:5px;padding:8px 20px;text-shadow:none;transition:all 1s}
    .ttan:hover,.ttan:hover,.ttan.link:hover{background:#1D7891!important;box-shadow:0 2px 10px 0 rgba(0,0,0,0.16),0 2px 15px 0 rgba(0,0,0,0.12)}
    .ttan:focus{background:#1D7891}
    #dtan{display:none}


    Tahap Kedua - HTML Tombol Download

    salin kode html dibawah ini dan letakkan ke dalam artikel yang akan menggunakan tombol download dengan berwaktu.(di HTML)

    <div style="text-align: center;">
    
    <a class="ttan" href="#" id="dtan" target="_blank">Download</a>
    
    </div>
    
    <div id="daplong">
    
    <script type="text/javascript">
    
    //<![CDATA[
    
    var seconds = 60;
    
    setInterval(
    
        function() {
    
            if (seconds <= 1) {
    
                daplong.style.display = "none";
    
                dtan.style.display = "inline-block";
    
            } else {
    
                document.getElementById('credits').innerHTML = --seconds;
    
            }
    
        },
    
        1000
    
    );
    
    document.write('<b>Link download</b> will be appear <span id="credits">60</span> seconds');
    
    //]]>
    
    </script>
    
    </div>
    
    </div>

    Keterangan:
    # - Ganti dengan url/link
    60 - waktu perdetik
    Download - bisa diganti teksnya

    semoga bermanfaat, jangan lupa share dan komentarnya hoho.
    Show comments
    Hide comments


    MANTANKODE.NET Kebijakan Komentar, Silahkan berkomentar sesuai ketentuan perundang-undangan!
    Baca Kebijakan Berkomentar kami sebelum berkomentar.

    Notification

    Donasi yang anda berikan akan digunakan untuk, pengembangan blog ini.

    Kesehatan admin dan lebih semangat berbagi tips dan informasi.

    Yang telah membantu saya ucapkan terima kasih

    Donasi: Trakteer

    Done
    Night Mode