How to Add Responsive Download Timer Button in Blogger Posts 2021

Download Timer Button will Help you to increase revenue of adsense with high cpc and impression and also increase your engagement time in your blogger

The download timer button in blogger was designed to help you better understand your visitors by providing you with an easy to use tool that helps you get to the point where they are ready to buy.

Nowadays, one of the most important things for your blog is to make sure that all your visitors will make a purchase after they've read all the content on your blog. For this reason, it's advised that you add a download timer button or download counter to make it easy for your visitors to take their next step.

If you want Add Whatsapp Button in blogger, Telegram button in blogger then we have also make a post on that.

This tutorial will show you how to put a download timer button on your blog

How to Add Responsive Download Timer Button in Blogger

How to Add Download Timer Buton in Blogger?

If you want to download the timer button then you have to follow some of these 6 steps.

Step1) First of all, Go to The  Blogger.com Dashboard

Step2) Now you have to go to the Theme section in the blogger.

Step3) In Theme Section Go to Customize and then select Edit HTML

Step4) Now Search ]]></b:skin> tag via Ctrl + F & Paste this css code before the ]]></b:skin> tag

.modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            text-align: left;
            background: rgba(0, 0, 0, .9);
            transition: opacity .25s ease;
            z-index: 999;
        } 
        btn-at {
            cursor: pointer;
        }
        .at-pop__bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer;
        }
        .at-pop {
            display: none;
        } 
        .at-pop__inner {
            transition: top .25s ease;
            position: absolute;
            top: -20%;
            right: 0;
            bottom: 0;
            left: 0;
            width: 50%;
            margin: auto;
            overflow: auto;
            background: #fff;
            border-radius: 5px;
            padding: 1em 2em;
            height: 50%;
        }
        .at-pop__close {
            position: absolute;
            right: 1em;
            top: 1em;
            width: 1.1em;
            height: 1.1em;
            cursor: pointer;
        }
        .at-pop__close:after,
        .at-pop__close:before {
            position: absolute;
            width: 2px;
            height: 1.5em;
            background: #333;
            display: block;
            transform: rotate(45deg);
            left: 50%;
            margin: -3px 0 0 -1px;
            top: 0;
        }
        .at-pop__close:hover:after,
        .at-pop__close:hover:before {
            background: #aaa;
        }
        .at-pop__close:before {
            transform: rotate(-45deg);
        }
        @media screen and (max-width: 768px) {
            .at-pop__inner {
                width: 90%;
                box-sizing: border-box;
            }
        }
        .adpop-top {
            height: 40px;
            width: 100%;
            border-bottom: 1px #E5E5E5 solid;
        }
        .adhtml {
            margin: 14px 0 4px;
            min-height: 260px;
        }    
        .adpop-content {
            height: 330px;
        }     
        #at-downloadx {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            width: 140px;
            text-align: center;
            background-color: lightskyblue;
            color: #fff;
            padding: 5px;
            font-size: 19px;
            border-radius: 8px;
            text-transform: capitalize;
            text-decoration: none;
            border: 1px solid #212121 !important;
            margin-top: 1px;
        }
        .download-pop {
            line-height: 16px;
            margin: 15px;
            font-size: 19px;
            text-align: center;
            position: relative;
        }  
        .btn-at {
            display: block;
            height: 50px;
            color: #fff;
            font-size: 24px;
            text-transform: uppercase;
            background: #f3a;
            text-align: center;
            line-height: 50px;
            width: 200px;
            margin: auto;
            transition: all 0.4s ease-in;
            cursor: pointer;
        }
        .adpop-top h2 {
            margin: 0
        }

Step5) Now Search </body> tag via Ctrl + F & Paste this JAVASCRIPT code before the ]]></b:skin> tag

<script>
        //<![CDATA[
        const modal = document.querySelector("#my-modal");
        const btn = document.querySelectorAll(".btn-at");
        const closeModal = document.getElementsByClassName("at-btnclose")[0];
        for (let i = 0; i < btn.length; i++) {
            btn[i].addEventListener("click", function() {
                modal.style.display = "block";
            });
        }
        btn.onclick = function() {
            modal.style.display = "block";
        };
        closeModal.onclick = function() {
            modal.style.display = "none";
        };
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        };
        var downloadButton = document.getElementById("at-downloadx");
        var counter = 30;
        var newElement = document.createElement("span");
        newElement.innerHTML = "Please Wait 30 sec";
        newElement.style.font = '16px';
        var id;
        downloadButton.parentNode.replaceChild(newElement, downloadButton);
        function startDownload() {
            this.style.display = 'none';
            id = setInterval(function() {
                counter--;
                if (counter < 0) {
                    newElement.parentNode.replaceChild(downloadButton, newElement);
                    clearInterval(id);
                } else {
                    newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... ";
                }
            }, 1000);
        };
        var clickbtn = document.getElementById("btn-at");
        clickbtn.onclick = startDownload;
        
        //]]>
</script>
Step6) Now Create a New Posts and in that go to Edit View & Paste the HTML Code where you have to show your Download Timer button on the website.
<div class="btn-at" id="btn-at">Download</div>
    <div class="modal" id='my-modal'>
        <div class="at-pop__bg"></div>
        <div class="at-pop__inner">
            <div class="adpop-top">
                <label class="at-pop__close at-btnclose"><i class="fa fa-close" style="font-size:20px;"></i></label>
                <h2 style="margin: 0px;">Download Your file</h2>
            </div>
            <div class="download-pop">
                <a class="button" download href="https://drive.google.com/file/d/1KjJTnv2_N9yVdYLJ3Hp1pVzK7Agfdvr6/view?usp=sharing" id="at-downloadx">Download File</a>
            </div>
            <div class="adpop-content">
                <div class="adhtml">
                    <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="8671274899" data-full-width-responsive="true" style="display: block;"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div> <div class="btn-at" id="btn-at">Download</div>
    <div class="modal" id='my-modal'>
        <div class="at-pop__bg"></div>
        <div class="at-pop__inner">
            <div class="adpop-top">
                <label class="at-pop__close at-btnclose"><i class="fa fa-close" style="font-size:20px;"></i></label>
                <h2 style="margin: 0px;">Download Your file</h2>
            </div>
            <div class="download-pop">
                <a class="button" href="https://drive.google.com/file/d/1KjJTnv2_N9yVdYLJ3Hp1pVzK7Agfdvr6/view?usp=sharing" id="at-downloadx">Download File</a>
            </div>
            <div class="adpop-content">
                <div class="adhtml">
                    <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-format="auto" data-ad-slot="8671274899" data-full-width-responsive="true" style="display: block;"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
</div>
Step7) Now Click on Save 

Congratulation you have successfully Installed the Download Timer Button in blogger in just 5 steps

Demo(Download Timer Button)

Download Original Median UI Template

Purpose of Download Timer Button in Blogger

The purpose of download time is to notify a user a download is happening. It uses a timer set to a specific amount of time. This allows the user to know that the download is happening, and how much time is left until it's finished.

Benefits of Download Timer Button in blogger

  1. The main benefit of the Download Button is that it helps track your traffic and it can keep a track of who is clicking your link and most importantly, it is a great way to boost subscribers.
  2. Download Timer button Increase your Impression on AdSense to increase revenue.
  3. You have also increased the Engagement Time of your Website when you put Download Timer Button on your website.

Final Verdict

Setting up a download timer in your blog is one of the easiest and most rewarding ways to add extra value to your content and increase engagement on your page.

I hope you learn something new in these posts and If you find any queries then free feel to tell me in telegram group chat 

Link of Telegram Group Chat: Blog Triggers Discussion Group