Adding a Download Countdown Timer Button to Your Blogger Posts

If your website has stuff to download, our Download Countdown Timer Button can help. Some websites show a countdown before you get your download or take you to the final spot.

Adding a Download Countdown Timer Button to Your Blogger Posts

In this guide, we'll make a Download Countdown Timer for your Blogger website. When folks click "download," a countdown will start before the download begins.

How do you make a Download Countdown Timer Button?

Making a Download Countdown Timer Button for your Blogger Website is simple. You don't need to know much about HTML, CSS, or JS because I've already made it for you. Just put the codes in the right spot 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 Rinku Rapria */

.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 </body>.

      


  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 ' + twtLf + ' seconds...';

    twtCo.classList.add('twtAlt');

    

    var downloadTimer = setInterval(function timeCount(){

        twtLf -= 1;

        twtMe.innerHTML = 'Starting Download in ' + twtLf + ' 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);

  };

  /*]]>*/

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.

Conclusion

In conclusion, this article covered the process of adding a Download Timer Button to a Blogger post. We hope you found this information helpful and enjoyable. Please consider sharing this article, and if you encounter any issues or have questions, feel free to ask in the comments section.