How to Create a Download Box with Countdown Timer for Blogger Plus UI Theme

In this article, I will show you how we can add a great countdown download box to your Blogger posts.

Hey dear blog readers, if you are using a download blogger site then you need to use the countdown button to control the bounce rate of your website. In this article, I will show you how we can add a stunning countdown download box to your Blogger posts. So, today we have been able to create a download container with countdown timer for blogger internet site. When customers click on the download button, a countdown will start before the download begins.

How to create 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. All you have to do is place the code in the right place in your Blogger post

Before you start adding all the code, I suggest you backup your current theme. If by chance another problem occurs, you can restore it later.

countdown download box

This feature will show the user a countdown before downloading a file.

Blogge Brackets.png Image 3.05MB 1920×1080 .png

This feature requires a direct download link for cloud files. You can use Google Drive to get a direct download link of a file.

Now copy this code and paste in your blogger post

<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>

Replace data-text with any name to show, data-file with filename, data-lang with file extension, data-time with countdown in seconds.

Change this html code according to your content

Music_Wallpaper.png

Music.

3.05MB.

1920×1080

.png

image url here #

Conclusion

That's all about creating a countdown download box for blog posts. I hope you like this article. Please share this article. And if you face any problem in any section or have any question then ask us in the comment box.