Cara membuat tombol Download dengan Waktu - MANTANKODE

Cara membuat tombol Download dengan Waktu

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



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

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

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

Demo



Artikel sebelumnya: Cara install sublime text 3 beta di ubuntu

semoga bermanfaat, jangan lupa share dan komentarnya hoho.

Share with your friends

Add your opinion
Disqus comments
Notification

Donasi yang anda berikan akan saya gunakan untuk mengembangkan blog ini.

BANK BNI: 0431705794 a/n Muhammad Rahmadi

Pulsa/DANA/OVO: +6285822266832

Done