How to add a Download button with timer on Blogger and WordPress website?

In this article I will show you how you can add a Download button with timer on Blogger and wordpress website easily.

Hello Bloggers. Do you want to make your readers wait on your blog before downloading any resources from your website? Do you want to add a Download button with timer script on your Blogger website? Than this article is for you.

Download Button with timer script For Blogger and WordPress

In this article I will teach you How you can add a Timer on download button for your Blogger website easily and customize it with your custom text and seconds you want to make your readers wait according to your choice. I will share a code for Download button with timer. You can use the same code on your WordPress website as well. Just create a HTML blog inside your WordPress post where you want to show your Button with timer.

What is Download Timer button and How it works?

Download timer button is a simple button build with JavaScript which starts count down from the time you set. And after counting it reveals the link you set behind the button. And that's why it's called Download timer button.

Download link will be available for your blog readers after custom time you have settled. After waiting your user can easily open or download files from the link you have provided. It's a very good way to force your users to wait on your website.

Benefits of Download timer button

Do you run a Website where users download files or resources and leave as soon as they get the download link. And your website don't have a perfect bounce rate. Than Download button with timer is something you need most. In this way you can ask your readers to wait on your website and read your blogs or posts before they download their file. This way your website bounce rate will improve and it will help on your website SEO.

And another and very important benefit is it will help you to make some good ad impression which will help you to boost your AdSense earning. It will also increase the chances of getting more ad click from your website.

How to create a Download timer button in Blogger?

It's really very easy to create a Download timer button on Blogger website. To add a Download timer button on your Blogger website folloe the steps below.

Step 1: Go to Blogger dashboard and create new post or open a previous post where you want to show your Download timer button widget.

Step 2: Now select Edit as HTML on your Blogger post Editor and paste the code below where you want to show the timer button.

  <div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown">You have to wait 30 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Generating Download Link...</b><br />
<a href="#" target="_blank" id="download_link" style="display: none;" class="button">Download Now</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
   var message = "%d seconds before download link appears";
   // seconds before download link becomes visible
   var count = 30;
   var countdown_element = document.getElementById("countdown");
   var download_link = document.getElementById("download_link");
   var timer = setInterval(function(){
      // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
      if (count) {
          // display text
          countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
          // decrease counter
          count--;
      } else {
          // stop timer
          clearInterval(timer);
          // hide countdown
          countdown_element.style.display = "none";
          // show download link
          download_link.style.display = "";
      }
   }, 1000);
})();
</script></div></div>

Step 3: Now from the above script change Yellow highlighted seconds to your custom time. Here default is 30 seconds.

Step 4: Now replace your download link with # and also change the Download text if you want.

Step 5: If you want to change button style with your theme style than change the class from above script. It's button by default. And don't change or edit id and classes on script except button class. Otherwise the script won't work.

Now publish your Blog post and visit your post. Your Download Button with timer is ready and live on your website.

You have to wait 60 seconds.

Generating Download Link...

Here you can see a demo of Download timer button script. It will redirect you to the download link of this script. The style of button on the screen you watching is my theme default download button style. The button will show up on your website according to your Blogger theme design.

If you are using median UI or other Jagodesign theme like me than your download button style will be like mine. And for other theme all theme has it's default button style. You can also change your theme button style by editing theme style. So just change the button class name according to theme.

If you face any problem while adding this script on your Blogger website feel free to ask me on the comment section. I will try my best to answer you. And I hope liked today article. For more update like this Don't forget to subscribe to our newsletter. 

Hi! Zakir Here. I am a Bangladeshi Blogger and content writer. I share Blogging related and WordPress tutorial on This website. I have shared lot's of SEO related content as well.

Post a Comment

Don't upload any spam link and words that harms others in the comment box. Please comment using your Google account or with name and urls. Use anonymous only If you are not signed in.
© ZHS ThemE. All rights reserved. Developed by Jago Desain