Latest update Android YouTube
Home
Blogger
BlogSpot

Creating Stylish Download Countdown Timer on Blogger

Creating Download Countdown Timer on Blogger - IndianTechnoEra

Why Use a Stylish Countdown Timer?

A stylish countdown timer can:

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

Setting Up the Download Button (Plus UI Template)

If you are using the Plus UI Template, adding the countdown timer is straightforward as it is already included. Follow these steps:

  1. Create a new post.
  2. Switch to HTML view.
  3. Paste the following code where you want the download button to appear:
<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>

Setting Up the Download Button (Other Templates)

If you are using a template other than Plus UI, follow these steps:

  1. Log in to your Blogger dashboard and go to Themes.
  2. Click on the icon next to the Customize button.
  3. Search for ]]></b:skin> and paste the following 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)}
  1. Search for the </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>
  1. Click the icon to save the changes.

Usages of Countdown Download Timer

Follow these steps to use the countdown download timer:

  1. Create a new post and switch to HTML view.
  2. Paste the code below where you want the download button to appear:
<!--[ 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>
    <button onclick='download("link", "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>
<!--[ Download Timer Button by SiteGuide ]-->
  1. Adjust the settings as needed. These settings are the same as for the Plus UI template.

Test

ITE_Wallpaper.png Image 0.5MB 1148×205 .png


File Format Icons

Here are some different file formats icon images 

    



Conclusion

By following these steps, you can add a stylish download countdown timer to your Blogger site, enhancing user engagement and improving the overall appearance of your blog. Experiment with different styles to find the one that best suits your site's design.

#Blogger #BlogSpot

Post a Comment

Feel free to ask your query...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
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.