Minggu, 30 April 2017

Cara Menampilkan Link Setelah 5 Detik Atau Beberapa Detik


Cara menampilkan link setelah 5 detik atau mungkin beberapa detik (tergantung anda) ini sangat berguna untuk anda yang punya blog download ataupun tidak (yang ingin menggunakannya saja).

Mungkin ada alasan tertentu sehingga anda ingin menampilkan link menggunakan waktu, saya tidak tau alasannya apa tapi yang jelas disini saya aan share kodenya saja, dan ini dia kodenya.

1. CSS - Simpan sebelum ]]></b:skin> pada template anda.

#linkdl {
  display: none
}

2. Javascript / Jquery - Simpan sebelum </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
    var counter = 5;
    var id = setInterval(function() {
       counter--;
       if(counter > 0) {
            var msg = 'Download tersedia setelah ' + counter + ' Detik';
            $('#waktu').text(msg);
       } else {
            $('#waktu').hide();
            $('#linkdl').show();
            clearInterval(id);
      }
    }, 1000);
});
});//]]> 
</script>

Perhatikan script jquery yang bergaris bawah, jika pada template anda sudah ada kode tersebut pada bagian head maka anda tidak perlu lagi menyalin kode tersebut, anda cukup menyalin kode yang ada dibawahnya.

var counter = 5; Angka 5 adalah waktunya jadi anda bisa ubah berapa lama waktu yang anda inginkan.

3. HTML - Simpan dimanapun anda membutuhkannya (Mungkin dipostingan)

<a href="downloadFile.zip" id="linkdl">Download file...</a>
<p id="waktu">Download tersedia setelah 5 Detik</p>

Perhatikan tulisan "Download tersedia setelah...." itu harus sama seperti pada kode Javascriptnya ya biar terlihat hitungannya sama gitu :D.

Iya itu dia cara menampilkan link menggunakan waktu, semoga berguna untuk anda.