Create a download box with a countdown timer using HTML, CSS, and JavaScript.
Hello! Welcome to daily technology
If you are providing any file on your website to download, this download box will be helpful for you. Some websites display a countdown before the download starts or redirects to the final destination.
Today we will make Download Box with Countdown Timer for Blogger website. When users click the download button, a countdown will begin before the download begins.
How to make a countdown download box?
Creating a countdown download box for your Blogger website won't require much knowledge of HTML, CSS, or JS because I've already designed it for you. What you need to do is implement the codes in the correct place in your Blogger theme XML.
Important!
Before you start adding code in XML, I'll recommend that you make a backup of your current theme. By any chance, if any problem occurs, you can restore it later.
Step 1: First of all, login to your Blogger dashboard.
Step 2 – In the Blogger Dashboard, click Theme.
Step 3: Click the down arrow icon next to the 'customize' button.
Step 4: Click Edit HTML, you will be redirected to the edit page.
Step 5 – Now find the ]]></b:skin> code and paste the following CSS codes just above it.
If your template has a dark mode feature and you want a different color when in dark mode, you can customize the codes to suit your needs. Each template can have a different dark mode class, so adjust it, you can replace the checked class with your template dark mode class.
/* Countdown Download Box by Fineshop Design */
.dldCo{
--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 */
}
.dldCo{-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}
.dldBx{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)}
.dldTp{display:flex;flex-direction:row} .dldIm{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} .dldIm::before{content:attr(data-text);opacity:.7} .dldIm[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)} .dldIm[style]:not([style=''])::before{display:none}
.dldSv{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} .dldIm[style]:not([style='']) .dldSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} .dldSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .dldSv .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}
.dldIn{flex-grow:1;width:calc(100% - 115px)} .dldIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dldIn >*::before{content:attr(data-text) ': ';opacity:.8}
.dldBt{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} .dldBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .dldBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .dldBt.dldDl{visibility:visible;opacity:1} .dldBt.dldRt{visibility:hidden;opacity:0;bottom:-40px}
.dldSl{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} .dldMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .dldMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}
.dldCo.dldAlt{margin:30px 0 70px} .dldCo.dldAlt .dldIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .dldCo.dldAlt .dldSv{opacity:1} .dldCo.dldAlt .dldDl{visibility:hidden;opacity:0;bottom:-40px} .dldCo.dldRty .dldRt{visibility:visible;opacity:1;bottom:-20px} .dldCo.dldAlt .dldSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.darkMode .dldCo{color:var(--darkC)} .darkMode .dldBx{background:var(--darkBs)} .darkMode .dldIm, .darkMode .dldSl{background:var(--darkBa)} .darkMode .dldSv .b{stroke:#404045} .darkMode .dldSv .c{stroke:var(--darkBt)} .darkMode .dldBt{background:var(--darkBt)} .darkMode .dldMe span{color:var(--darkBt)}<script>
/*<![CDATA[*/
/* Countdown Download Script by Fineshop Design */
function download(link, time, newtab, id){
var dldCo = document.querySelector(id),
dldMe = document.querySelector(id + ' .dldMe'),
dldPg = document.querySelector(id + ' .dldPg'),
dldDl = document.querySelector(id + ' .dldDl'),
dldRt = document.querySelector(id + ' .dldRt'),
dldLf = time;
dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';
dldCo.classList.add('dldAlt');
var downloadTimer = setInterval(function timeCount(){
dldLf -= 1;
dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';
dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);
if(dldLf <= 0){
clearInterval(downloadTimer);
dldMe.innerHTML = 'Please wait...';
if (newtab == 'true'){
window.open(link, '_blank');
} else {
window.location.href = link;
};
dldRt.onclick = function (){
if (newtab == 'true'){
window.open(link, '_blank');
} else {
window.location.href = link;
}
};
setTimeout(() => {
dldCo.classList.remove('dldAlt');
dldCo.classList.add('dldRty');
}, 4000);
}
}, 1000);
};
/*]]>*/
</script>Step 7: Save changes by clicking this icon
Step 8: You are done! Add the following HTML codes in your blog posts through the HTML view to add the countdown download box.
<!--[ Countdown Download Box by Fineshop Design ]-->
<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 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 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>Replace the marked parts according to your needs, that is,
# with download link.
10 with countdown in seconds.
false with true if you want to open the link in a new tab.
To add multiple download boxes, replace download1 and #download1, i.e.
For the second download box, replace download1 with download2 and #download1 with #download2.
Tags:
Blogger Widgets
