How to make countdown timer before a download button link appears

In today’s article i gonna share how to make a 10 second countdown timer before a download button link appear. you might seen at many games and software website’s download page such as Rapidshare and others, when the page loads, a 10 second timer automatically start. then after the time is up a download button appears for people to click on the link and start their download. why you have to do this on your blog? you can place advertisement at above and below of download button and timer. there is many chance to get more clicks on your ads. this is one of the best thing about this script. However, you can use this for the different things of your mind. So, if you would like to add countdown timer before a download button link appears on the download page. then just follow the simple steps below.

First thing you need to do is that install the jQuery plugin at before ending of head tag  in your blog’s HTML or any html page , if you have already installed this plugin then you don’t have to place it again. just ignore and go for the next step.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Now, go to the download page, HTML editor and place the below code on it and just replace the download link with yours. for blogger, go to new post, in HTML mode, place the code below and then change the download link and publish.

<script type="text/javascript">  jQuery(document).ready(function() {  var sec = 10  var timer = setInterval(function() {     $("#mdtimer span").text(sec--);     if (sec == 0) {  $("#makingdifferenttimer").delay(1000).fadeIn(1000);  $("#mdtimer").hide(1000) .fadeOut(fast);}  },1000);  });  </script>  <center>  <a class="button" href="http://www.mediafire.com/?m47xa9e21hwqc5g" id="makingdifferenttimer" rel="nofollow" style="display: none;" target="_blank">Download</a>  </center>  <div id="mdtimer">  <b></b>  <div style="font-size: large;">  <b>Please Wait <span>10</span> seconds</b></div>  </div>

Now, just replace above red colored URL with any of download link as you want. and then publish it. for the demo , go to this HTML editor and place the above code on it and submit to see how it’s works great.

If you want to learn the codding, how this jQuery works and how to make jQuery codding on your requirements then i recommended you to go to this blog : www.Way2Designing.com and follow the blog to be updated with new designing stuff.