How to make Download Box with Countdown Timer for Blogger

Hello! Welcome to Fineshop Design.

If you are providing any file on your Website to download, this Download Box will be helpful for you. Some websites shows a countdown before the download begins or redirected to final destination.

Download Box with Countdown Timer using HTML, CSS and JavaScript — Countdown Download Box | Fineshop Design

Today we will make Download Box with Countdown Timer for Blogger Website. When users will click on the download button, a countdown will start before the download begins.

Before we start let's take a look at its Demo.

View Demo

How to make a Countdown Download Box?

Creating a Countdown Download Box 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.

First of all Login to your Blogger Dashboard.
On Blogger Dashboard, click Theme.
Click the arrow down icon next to 'customize' button.
Click Edit HTML, you will be redirected to editing page.

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.

.dld-container {
  --box-color: #08102b;
  --box-bg: #fffdfc;
  --box-bg-alt: rgba(0, 0, 0, .08);
  --font-family: inherit;
  --svg-color: #fffdfc;
  --button-bg: #482dff;
}
.darkMode .dld-container {
  --box-color: #fffdfc;
  --box-bg: #2d2d30;
  --box-bg-alt: #252526;
  --button-bg: #e91e63;
}
.dld-container{-webkit-tap-highlight-color:transparent;box-sizing:border-box;position:relative;display:flex;flex-direction:column;max-width:480px;margin:30px 0;color:var(--box-color);font-family:var(--font-family);transition:margin .6s;-webkit-transition:margin .6s}
.dld-container svg{width:22px;height:22px;fill:currentColor}
.dld-box,.dld-image{position:relative;display:flex}
.dld-container svg.line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2}
.dld-box{z-index:2;background:var(--box-bg);width:100%;padding:15px;flex-direction:row;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.dld-image{flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:var(--box-bg-alt);border-radius:6px;transition:.4s;-webkit-transition:.4s}
.dld-image[style*=background-image]{width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)}
.dld-image:not([style*=background-image])::before{content:attr(data-placeholder);opacity:.7}svg.dld-svg{width:calc(100% + 12px);height:calc(100% + 12px);position:absolute;top:-6px;bottom:-6px;right:-6px;left:-6px;opacity:0;stroke-width:1.5;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);transition:.5s;-webkit-transition:.5s}
.dld-image[style*=background-image] .dld-svg{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px}.dld-svg .b{fill:none;stroke:var(--box-bg-alt)}
.dld-svg .c{fill:none;stroke:var(--button-bg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:.5s;-webkit-transition:.5s}
.dld-info{flex-grow:1;width:calc(100% - 115px)}
.dld-info>*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dld-bottom,.dld-button{position:absolute;display:flex}
.dld-info>::before{content:attr(data-name) ': ';text-transform:capitalize;opacity:.8}
.dld-info>::after{content:attr(data-value)}
.dld-button{background:var(--button-bg);width:40px;height:40px;bottom:-20px;right:20px;outline:0;border:none;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:.3s;-webkit-transition:.3s;cursor:pointer}
.dld-button:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)}
.dld-button svg.line{width:24px;height:24px;stroke:var(--svg-color)}
.dld-download{visibility:visible;opacity:1}
.dld-container.alt .dld-download,.dld-retry{visibility:hidden;opacity:0;bottom:-40px}
.dld-bottom{z-index:1;bottom:0;right:0;align-items:center;justify-content:center;height:60px;width:100%;padding-top:20px;font-size:14px;background:var(--box-bg);border-radius:0 0 10px 10px;transition:.6s;-webkit-transition:.6s}
.dld-bottom>* span{color:var(--button-bg);font-size:18px;font-weight:600}
.dld-container.alt{margin:30px 0 70px}
.dld-container.alt .dld-image{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%}
.dld-container.alt .dld-svg{opacity:1}
.dld-container.retry .dld-retry{visibility:visible;opacity:1;bottom:-20px}
.dld-container.alt .dld-bottom{bottom:-40px;background:var(--box-bg-alt);box-shadow:0 0 35px rgba(0,0,0,.09)}

Now add the following JavaScript just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.

<script type='module'>/*<![CDATA[*/
(({selector:a,messages:{startingDownload:b,pleaseWait:c}})=>{const d=a=>("string"==typeof a?a:a+"").replace(/&/g,"&amp;").replace(/'/g,"&#39;").replace(/"/g,"&#34;"),e=document.querySelectorAll(a);e.forEach(e=>{e.classList.add("dld-container"),e.innerHTML=`<div class='dld-box'><div class='dld-image'${e.dataset.image?` style='${d(`background-image: url(${e.dataset.image})`)}'`:""} data-placeholder='${e.dataset.placeholder||".ext"}'><svg class='dld-svg' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92' /><circle class='c dld-progress' cx='17' cy='17' r='15.92' /></svg></div><div class='dld-info'>${(Object.keys(e.dataset).reduce((b,a)=>(["link","image","placeholder","target","timeout"].includes(a)||(!b&&(b=[]),b.push([a,e.dataset[a]])),b),null)||[["Info","No information provided"]]).map(([a,b])=>`<span data-name='${d(a)}' data-value='${d(b)}'></span>`).join("")}</div><button class='dld-button dld-download'><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='dld-button dld-retry'><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='dld-bottom'></div>`;const f=e.dataset.link||"#",g=e.dataset.target,[h,i,j,k]=[".dld-download",".dld-retry",".dld-bottom",".dld-progress"].map(a=>e.querySelector(a));h.addEventListener("click",()=>{e.classList.add("alt");let a=+(e.dataset.timeout||10);(Number.isNaN(a)||!Number.isFinite(a))&&(a=10);const d=a;j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`;const h=setInterval(()=>{a-=1,j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`,k.style.strokeDashoffset=Math.floor(100*(a/d));0>=a&&(clearInterval(h),j.innerHTML=c,g?window.open(f,g):window.location.href=f,i.onclick=()=>{g?window.open(f,g):window.location.href=f},setTimeout(()=>{e.classList.remove("alt"),e.classList.add("retry")},4e3))},1e3)})})})({
  selector: ".download-box",
  messages: {
    startingDownload: "Starting Download in <span>%d</span> seconds",
    pleaseWait: "Please wait..."
  }
});
/*]]>*/</script>

Save the changes by clicking on this icon

That's done! Add any of the following HTML Codes in your Blog Posts through HTML View to add Countdown Download Box.

<div class='download-box'
     data-link='#'
     data-image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MJfJjegO4N7txAwyFBfNJMEUNLV4aaADlXmR8ZdOspFNqbx2UR2GsRW_g4rtdpAf39rvwooMe1n1IHD_7eP32nKqpkq8tnZ_HwWAhuLVfDWQv045PLMCa_-LXccLUkeiG7dPp7YycZ2nQj2uY2QqeQm-QsbARoQfaj_4EkEl3DrEB3Soc0ZPAO1tUQ/s160-rw-e30/fd_logo.webp'
     data-timeout='30'
     data-name='Example Image'
     data-category='Image'
     data-size='879KB'
     data-resolution='1980x1080'></div>

<div class='download-box'
     data-link='#'
     data-placeholder='.png'
     data-name='Example Image'
     data-category='Image'
     data-size='879KB'
     data-resolution='1980x1080'></div>

Replace the marked parts as per your need.

Conclusion

This is all about creating a Countdown Download Box for Blog Posts. 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 comment box.