Adsterra Advertisement
BloggerBlogger tips and TricksTips And Tricks

How to Add countdown Download Timer Button For Blogger

How to Add countdown Download Timer Button For Blogger 

In this post, How to Add Countdown Download Timer Button in Blogger & WordPress with HTML And CSS & Javascript. You can use Free Countdown download Button for Blogger. With redirect url and put adsense code.

countdown-download-timer-button-blogger

The download timer button on Blogger will help your visitor understand better, and is designed to give you a simple download tool designed for download.I will tell with you how can give that Link in a beautiful Download Button with countdown timer. 

Advertisement

Table Of Content(toc)

Benefits of Adding Download Timer Button in blogger blog post

If you are blogging and your blog is a download platform. Then you can also earn extra by adding countdown download timer from Adsense.  Because, by clicking on the download button, the visitors will give extra time to your website.  Where there is an advantage of earning income by putting ads code. 

Advertisement

You have also increased the Engagement Time on your Download Website when you put Download Timer Button on site and visitors click countdown timer button.

How To Add Countdown download Button for Blogger & WordPress

Adding Countdown Download Timer button on blogger blog post, you need to add HTML & CSS & Javascript code to your blog post. i will Share with you tow method, you can choose any method to apply download timer button on blog post. So lets start – 

Method 1 

  • Go to Blogger Dashboard 
  • Then Create a new post or page (where you want to show download button)
  • Switch HTML View 
  • Then past the blew Script code

Script Code :

<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<center>
<span id=”countdown”>You have to wait 1 seconds.</span></center>
<br />
<div style=”text-align: center;”>
<br />
<a href=”https://www.mediafire.com/folder/raoleaw5fvir/Rtf 84″ id=”download_link” style=”display: none;”>
<img src=”https://1.bp.blogspot.com/-K0p-fvrZ1bw/X6LDFIua_5I/AAAAAAAADsc/IV9UiAiiuwsDXnd82SPrBSJzlnpBvpMPACLcBGAsYHQ/w320-h78/107-1073795_download-button-png-file-download-free-download-button.png” /></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>(code-box)

You can change the countdown timer, 30 to Your your choose.(alert-warning)

Now Save the post and published. You are Alright to view Download button. 

Method 2 – Countdown Timer button With Adsense 

  • Go to Blogger Dashboard 
  • Theme 
  • Edite Theme 
  • Now Search for ]]></b:skin> and paste above ]]></b:skin> tag blew css code. 

CSS Code : 

.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
        }(code-box)

  • Then, Search for </body> tag. And paste above </body> tag blew script Code. 

Script Code : 

<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>(code-box)

You can change the countdown timer, 30 to Your your choose.(alert-warning)

 

  • Now save theme

  • Again Go To Blogger Dashboard 
  • Then Create a new post or New page (where you want to show download button)
  • Switch HTML View and Past The HTML code on your blog post. 

HTML Code : 

<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>(code-box)

Note:if you have adsense on your website, then you need to change ca-pub-xxxxxxxxxxxx) Replace the code with your Publisher id.(alert-warning)

Then save your post. 

Conclusion : Today I will share with you a new javascript, HTML & CSS code that will see the download button as time expires. Then your download timer will start after clicking. If you read the full post,  You can do – How to Add countdown Download Timer Button For Blogger -How to Add Download Timer in Blogger & WordPress or Countdown download Button for Blogger & wordpress too.

Tags: How to Add countdown Download Timer Button For Blogger, Countdown download Button for Blog post,Countdown Download Timer Button Blogger, Countdown Download Timer Button with adsense code.

Advertisement

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisement
Back to top button