What tutorial do you want for the next article! Request Here!

How to Add Download Countdown Timer Button on Blogger

Add a Download File Box with Countdown Timer using HTML, CSS and JavaScript.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Create a Download Countdown Timer Button on your website with a Countdown Timer using HTML, CSS, and JavaScript.

Welcome to The Web Trick!

If your website offers downloadable files, our Download Countdown Timer Button can be of great assistance to you. Many websites display a countdown before the download starts or redirect you to the final destination.

Download Countdown Timer Button using HTML, CSS and JavaScript
© The Web Trick | Download Countdown Timer Button

In this tutorial, we'll create a Download Countdown Timer for your Blogger website. When visitors click the download button, a countdown will begin before the actual download starts.

Let's begin by checking out the Demo before we proceed.


How can you create a Download Countdown Timer Button?

Creating a Download Countdown Timer Button for your Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

/* Download Timer Button by The Web Trick */

.twtCo{

  --boxC : #08102b; /* Font Color */

  --boxBg : #fffdfc; /* Container Background */

  --fontF : inherit; /* Font Family */

  --svgS : #fffdfc; /* Button SVG Stroke */

  --btnBg : #482dff; /* Button Background */

  --darkC : #fffdfc; /* Dark Font Color */

  --darkBt : #e91e63; /* Dark Button Background */

  --darkBa: #2d2d30; /* Dark Background Alt */

  --darkBs: #252526 ; /* Dark Background Sec */

}

.twtCo{-webkit-tap-highlight-color:transparent;position:relative;width:100%;max-width:480px;margin:30px 0;color:var(--boxC);font-family:var(--fontF);transition:margin .6s ease;-webkit-transition:margin .6s ease}

.twtBx{position:relative;z-index:2;background:var(--boxBg);width:100%;padding:15px;display:flex;flex-direction:column;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}

.twtTp{display:flex;flex-direction:row} .twtIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} .twtIm::before{content:attr(data-text);opacity:.7} .twtIm[style]:not([style='']){width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)} .twtIm[style]:not([style=''])::before{display:none}

.twtSv{opacity:0;position:absolute;width:calc(100% + 12px);height:calc(100% + 12px);top:-6px;bottom:-6px;right:-6px;left:-6px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;transition:all .5s ease;-webkit-transition:all .5s ease} .twtIm[style]:not([style='']) .twtSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} .twtSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .twtSv .c{fill:none;stroke:var(--btnBg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:all .5s ease;-webkit-transition:all .5s ease}

.twtIn{flex-grow:1;width:calc(100% - 115px)} .twtIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .twtIn >*::before{content:attr(data-text) ': ';opacity:.8}

.twtBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;right:20px;outline:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:all .3s ease;-webkit-transition:all .3s ease;cursor:pointer} .twtBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .twtBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .twtBt.twtDl{visibility:visible;opacity:1} .twtBt.twtRt{visibility:hidden;opacity:0;bottom:-40px}

.twtSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:var(--boxBg);border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} .twtMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .twtMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}

.twtCo.twtAlt{margin:30px 0 70px} .twtCo.twtAlt .twtIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .twtCo.twtAlt .twtSv{opacity:1} .twtCo.twtAlt .twtDl{visibility:hidden;opacity:0;bottom:-40px} .twtCo.twtRty .twtRt{visibility:visible;opacity:1;bottom:-20px} .twtCo.twtAlt .twtSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}

.darkMode .twtCo{color:var(--darkC)} .darkMode .twtBx{background:var(--darkBs)} .darkMode .twtIm, .darkMode .twtSl{background:var(--darkBa)} .darkMode .twtSv .b{stroke:#404045} .darkMode .twtSv .c{stroke:var(--darkBt)} .darkMode .twtBt{background:var(--darkBt)} .darkMode .twtMe span{color:var(--darkBt)}

Step 6: Now add the following JavaScript just above to </body> tag. If you don't find it, it is probably already parsed which is &lt;/body&gt;.

<script>

  /*<![CDATA[*/

  /* Download Timer Button Script by The Web Trick */

  function download(link, time, newtab, id){

    var twtCo = document.querySelector(id),

        twtMe = document.querySelector(id + ' .twtMe'),

        twtPg = document.querySelector(id + ' .twtPg'),

        twtDl = document.querySelector(id + ' .twtDl'),

        twtRt = document.querySelector(id + ' .twtRt'),

        twtLf = time;

    

    twtMe.innerHTML = 'Starting Download in <span>' + twtLf + '</span> seconds...';

    twtCo.classList.add('twtAlt');

    

    var downloadTimer = setInterval(function timeCount(){

        twtLf -= 1;

        twtMe.innerHTML = 'Starting Download in <span>' + twtLf + '</span> seconds...';

        twtPg.style.strokeDashoffset = Math.floor((twtLf / time) * 100);

      if(twtLf <= 0){

        clearInterval(downloadTimer);

        twtMe.innerHTML = 'Please wait...';

        

        if (newtab == 'true'){

          window.open(link, '_blank');

        } else {

          window.location.href = link;

        };

        

        twtRt.onclick = function (){

          if (newtab == 'true'){

            window.open(link, '_blank');

          } else {

            window.location.href = link;

          }

        };

        

        setTimeout(() => {

          twtCo.classList.remove('twtAlt');

          twtCo.classList.add('twtRty');

        }, 4000);

      }

    }, 1000);

  };

  /*]]>*/

</script>

Step 7: Save the changes by clicking on this icon

Step 8: That's done! Add the following HTML Codes in your Blog Posts through HTML View to make Download Timer Button.

<!--[ Download Timer Button by The Web Trick ]-->

<div class='twtCo' id='download1'>

  <div class='twtBx'>

    <div class='twtTp'>

      <div class='twtIm' data-text='.png' style='background-image:url(image_url_here)'>

        <svg class='twtSv' viewBox='0 0 34 34'>

          <circle class='b' cx='17' cy='17' r='15.92' />

          <circle class='c twtPg' cx='17' cy='17' r='15.92' />

        </svg>

      </div>

      <div class='twtIn'>

        <span data-text='Name'>Music_Wallpaper.png</span>

        <span data-text='Category'>Music</span>

        <span data-text='Size'>3.05MB</span>

        <span data-text='Resolution'>1920×1080</span>

        <span data-text='Extension'>.png</span>

      </div>

    </div>

    <button onclick='download("#", "10", "false", "#download1")' class='twtBt twtDl'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>

    <button class='twtBt twtRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>

  </div>

  <div class='twtSl'>

    <div class='twtMe'></div>

  </div>

</div>

Replace the marked parts as per your need, i.e.
# with download link.
10 with countdown in seconds.
false with true if you want to open link in new tab.
To add multiple Download Timer Button, replace download1 and #download1 i.e.
For the second Download Button, replace download1 with download2 and #download1 with #download2.

Terms of Use

To appreciate our works, consider keeping the credits in codes.

We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.

Conclusion

This is all about creating a Download Timer Button to Blogger post. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in .

© Copyright:
www.thewebtrick.com

You May Like These Posts:

About the Author

Hey there! My name is Sandeep Kumar aka Sandy, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator from Rajasthan, India. I love to Code and create interesting things while playing with it.

Buy me a Coffee

1 comment

  1. How to add second file
To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.