Creating a Stylish Download Countdown Timer on Blogger

 Adding a stylish download countdown timer to your Blogger site can enhance user experience and increase engagement. This guide will show you how to create a visually appealing countdown timer that activates when users click the download button.

Why Use a Stylish Countdown Timer?

A stylish countdown timer:

• Increases User Engagement: Attracts users' attention and encourages them to stay on the page.
• Boosts Conversions: Creates a sense of urgency, prompting quicker action from users.
• Enhances Aesthetics: Adds a professional look to your blog.

---

Video Tutorial Related to This Topic

If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.

Setting Up the Download Button

For Plus UI Template

If you are using Plus UI Template then it is very easy to use this Countdown Download Timer on your website. Because this is already added to your template. You just have to use it. 

Let's see how to use Countdown Timer on Plus UI.

1. Create a new post.
2. Go to HTML view.
3. Now paste the below code wherever you want to place the download button.

<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <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='dldBt dldDl'><svg class='line' 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='dldBt dldRt'><svg class='line' 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='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>

How to set the countdown download button

1. Change data-text='.png' with your text.

2. If you want to use an image instead then replace your image with image_url_here.

3. Replace # with your download link.
4. Set your download timer by replacing 10

If you need any more help you can contact me.

For Other Template

If you are using other templates rather than Plus UI then follow the steps below.

Step 1: Login to Blogger dashboard then go to Themes.

Step 2: Click on the icon next to the Customize button.

Step 3: Now search for the ]]></b:skin> and paste the below code above it.

/* Download Timer Button by SiteGuide */
.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 */
}

/* Download Timer Button by SiteGuide */
.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 4: Again search for </body> tag and paste the following code above it.

<script>
  /*<![CDATA[*/
  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 5: Click the icon to save the changes. 

Usages of Countdown Download Timer

Step 1: Create a new post and go to HTML view.

Step 2: Now paste the code below where you want to show up your Download button.

<!--[ Download Timer Button by SiteGuide ]-->
<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>
    <!--[ Download Timer Button by SiteGuide ]-->
    <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>

Step 3: Fix all the settings. The settings are the same as the Plus UI.