How to add Countdown Timer button in blogger and WordPress? | Add a Download Timer button | Tech Mahesh

Dear students,

Are you looking for a download Timber script for the blogger website?  This article differently helps you to add a download button in blogger with a timer. 

 I will teach you in this article how to add a download Timer button to your blogger website. We also learn easy steps to customize it. This customization gives more profit to your blog. 

How to add a download Timer button in blogger and WordPress? 

Use the same method that worked with your WordPress website. You need to add the script using a custom HTML section inside the post editor. 

Download Timer Button

Download timer button as JavaScript code.  It starts with a count down of 25 seconds or the time set and shows you the download link after the time is over. It reveals the download link after some time. That's why it is called download Timer. 

The download button will appear in the blog post. After this process user will click on the button.  The link will open in a new tab. Now the user can able to download the file. 

Benefits 

You are running a blog where users come to download a file and leave the site soon as they download it. You should apply the download timer script to your blogger and WordPress website. 

You can ask the user to wait some time before downloading the file. The bounces rate will reduce for that blog post. 

Another benefit of implementing a countdown timer is that it helps boost the AdSense revenue by engaging the user more time on the webpage. You can increase the chances of getting more impressions and click on your ads. 

Add a download timer button in blogger

To add a 15-second download timer button to your blogger website, follow the steps carefully. 

Step.01 Go to blogger.com 

Step.02 Click on a theme 

Step.03 Click on Arrow or edit HTML 

Step.04 Then find this code 

]]></b:skin> 

Now Save Theme and follow next process.

Adding CSS code

 Then copy and paste the CSS given below about it

 
  .Bg-93btn{background: #FFD62F; color:black; padding:8px; outline:none; border:0px; border-radius:5px; cursor:pointer;box-shadow:0 0 2px 2px #FFE000 ;}
  .Bg-94btn{background:#FFD62F; color:black; text-decoration:none; padding:8px; border-radius:5px; box-shadow:0 0 2px 2px #FFE000;}
 

After that Find </body>

and paste this JavaScript given Below above  </body>

Adding JavaScript

 
  <script>
            function dosomethig(e){
                e.style.display = "none";
                var output = document.querySelector('#output');
                var i=15; //set the time
                setInterval(
                    function(){
                        output.innerHTML = "Please wait.. "+i;
                        i--;
                        if(i<=0){
                            output.style.display = "none";
                            var Bg94btn = document.querySelector('#Bg94btn');
                            Bg94btn.style.display= "inline-flex";
                        }
                    },
                    1000
                )
            }
        </script>
 

Post edit Steps

Step- 1: Go to the blogger dashboard and open the blog post with an HTML view. 

Step- 2: Now copy the below download script and paste it into the blogpost editor. 

Script code

 
  <div style="text-align: center;">
        <button class="Bg-93btn" onclick="dosomethig(this)">Click Here</button>
        <div id="output"></div>
        <a class="Bg-94btn" href="http://bit.ly/3rane85" id="Bg94btn" style="display: none;">Download Now</a>
</div>
 

Step- 3: Now change the download timer second highlighted above [here 15 seconds] 

Step- 4: You have to add the download link in the above script. So replace the # value with the download link. 

Step- 5: You must change the download link with a button. Add the download button after the anchor text. 

Now hit the publish button. Timer button applied to your blogger website.