-->

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.

    Terus membaca

    Show comments
    Hide comments

    Notification

    Yuk bantu mantankode dengan berbagi artikel nya ke sosial media agar lebih dikenal. Atau sobat juga bisa membantu dengan Mentraktir mantankode di:

    Done
    Night Mode