Brief
Countdown Download Box is a dynamic feature designed to enhance user engagement by offering a visually interactive countdown before downloadable content becomes available. With its visual timer and live text updates, users can clearly see when their download link will be ready, providing a smooth, engaging experience. The use of CSS ensures the timer transitions and visibility changes are fluid, contributing to a professional and polished interface. This feature can be easily customized in terms of design and functionality, making it adaptable to various website styles and content themes.
By incorporating this feature into articles or websites, content creators can effectively manage user expectations, encouraging visitors to stay on the page while waiting for downloads. The Countdown Box not only adds a professional touch but also helps reduce bounce rates by maintaining user interest throughout the waiting period. It’s a simple yet powerful tool that enhances the overall user experience and contributes to the flow and interactivity of a website.
Procedure
- Go to Blogger Dashboard.
- Click icon next to the Customize button.
- Backup your Theme and then click Edit HTML, you will be redirected to the editing page.
- Now, find this
]]></b:skin>in your Template/Theme and paste the below code just above it;/* Download btn */ .dlBox{max-width:500px;background:#f1f1f0;border-radius:10px;padding:12px;margin:1.7em 0; display:flex;align-items:center; font-size:14px} .dlBox .fT{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:45px;height:45px; padding:10px; background:rgba(0,0,0,.1);border-radius:10px} .dlBox .fT::before{content:attr(data-text);opacity:.7} .dlBox .fT.lazy{background-size:cover;background-position:center;background-repeat:no-repeat} .dlBox .fT.lazy::before{display:none} .dlBox a{flex-shrink:0;margin:0;padding:10px 12px;border-radius:10px;font-size:13px} .dlBox a::after{content:attr(aria-label)} .dlBox .fN{flex-grow:1; width:calc(100% - 200px);padding:0 15px} .dlBox .fN >*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dlBox .fS{line-height:16px;font-size:12px;opacity:.8} .dldCo{display:flex;align-items:center;justify-content:center;max-width:480px;background:rgba(0,0,0,.03);border-radius:10px;margin:30px 0;transition:margin .6s ease;-webkit-transition:margin .6s ease} .dldCo::before{content:'Generating Download Link...';position:absolute;z-index:1;font-size:13px;font-family:auto;opacity:.8} .dldBx{visibility:hidden;opacity:0;transition:opacity .3s ease;-webkit-transition:opacity .3s ease} .dldSl{visibility:hidden;opacity:0;transition:opacity .3s ease,bottom .6s ease;-webkit-transition:opacity .3s ease,bottom .6s ease} /* Icon btn */ .icon{flex-shrink:0;display:inline-flex} .icon::before{content:'';width:18px;height:18px;background-size:18px;background-repeat:no-repeat;background-position:center} .icon::after{content:'';padding:0 6px} .icon.dl::before, .icon.dl::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='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>")} .icon.demo::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z'/><path d='M10.11 13.6501L13.69 10.0601'/></svg>")} .button.ln .icon.dl::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308102b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='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>")} - Now find
</body>and paste the below the code just above it;<script> <![CDATA[ function download(a,b,c,d){const e=document.querySelector(d),f=e.querySelector(".dldDl"),g=e.querySelector(".dldPg"),h=e.querySelector(".dldRt");let i=0;const j=setInterval(()=>{i+=5,g.style.strokeDasharray=`${i} 100`,i>=100&&(clearInterval(j),f.innerHTML="Downloaded","true"===c&&h.classList.remove("hidden"))},100*b);f.onclick=()=>{window.location.href=a},h.onclick=()=>{window.location.reload()}}]]> </script> - Save & Exit.
- Now, use the
'HTML' codeprovided below to apply it anywhere in your Article/Post."<p>With Image:</p> <div class="dldCo" id="download1"> <div class="dldBx"> <div class="dldTp"> <div class="dldIm" data-text=".webp" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPYs0CBKaZc8QjtD3qBnmBTsjXatQAlvomQQgf8s7YX14yvHx1rLlRb_eYE0S2KqjDk-r8HHtfoaMsqk0k7EwG92Asf8RxvswUyT3I8N1_exuqhMShGQcby0Saa2I_ylXXSOMQMsfX7FQ/s113/1.+Logo+%2526+Favicon.png);"> <svg class="dldSv" viewbox="0 0 34 34"> <circle class="b" cx="17" cy="17" r="15.92"></circle> <circle class="c dldPg" cx="17" cy="17" r="15.92"></circle> </svg> </div> <div class="dldIn"> <span data-text="Name">Sample text</span> <span data-text="Created on">00.00.0000</span> <span data-text="Size">00KB</span> <span data-text="Resolution">1080×1080</span> <span data-text="Extension">.pdf</span> </div> </div> <button class="dldBt dldDl" onclick="download("javascript:;", "10", "false", "#download1")"><svg class="line" viewbox="0 0 24 24"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" x2="12" y1="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg></button> <button class="dldBt dldRt"><svg class="line" viewbox="0 0 24 24"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg></button> </div> <div class="dldSl"> <div class="dldMe"></div> </div>
To modify the countdown timer, locate this "10" in the above HTML code and replace only the value with your desired value.
Furthermore, it is brought to your kind attention that the CSS code provided above is applicable solely to the light mode implemented in a theme. Users may notice that the CSS does not completely display certain features of the Countdown Download Box when dark mode is activated. To effectively integrate the aforementioned code into dark mode, users are requested to add the necessary CSS to their website's dark mode stylesheet to address the issues that arise when enabling dark mode.