Sunday, April 30, 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.

4 komentar postingan ini

mantab gan nice artikel sangat membantu saya juga sedang cari kek gini

makasih tutornya, sangat bermanfaat

Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
EmoticonEmoticon