How to make Download Box with Countdown Timer for Blogger

Make a Download Box with Countdown Timer using HTML, CSS and JavaScript.

How to make Download Box with Countdown Timer for Blogger

Make a Download Box with Countdown Timer using HTML, CSS and JavaScript. 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. 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. Step 1: First of all …

About the author

~ Hello World!

16 comments

AliGSMLab

thanks for this great design
please we need 1 help
1. Sagar Vishnoi
  
  YES How can we Help You?
2. Sanik
  
  ☺️
Lenny Carrero

Hello, when I place more than two buttons in the same post, they stop working correctly, since there are several download files and I would like to place the button on each one. how can I solve this, thank you?
1. Deo K.
  
  Hey! Just change the id. For eg:
  If you are adding the second download box, replace 'download1' with 'download2'. Similarly replace '#download1' with '#download2'.
2. Apk Fury
  
  I want to write text on that button, how can I write it?
Wernayasa

Nice blog and tutorial sir.
1. Deo K.
  
  Thank you :)
Admin

Bro How To Make Thumbnail Like This
1. Sanik
  
  Canva 👌
2. Deo K.
  
  There are various softwares available.
3. Deo K.
  
  @Developer Yeah, you can use canva.
Sagar Vishnoi

Awesome
1. Deo K.
  
  Thank you!
Rich XD

How to change the download icon in this download timer script
1. Deo K.
  
  Replace the SVG code.

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1926661341-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6ArXjk_LbhmDQZtbKpizI9lXuLOw:1729279452623';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3667079295234480644','//www.fineshopdesign.com/2022/04/make-download-box-with-countdown-timer.html?amp\x3d1','3667079295234480644');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3667079295234480644', 'title': 'Fineshop Design', 'url': 'https://www.fineshopdesign.com/2022/04/make-download-box-with-countdown-timer.html?amp\x3d1', 'canonicalUrl': 'https://www.fineshopdesign.com/2022/04/make-download-box-with-countdown-timer.html', 'homepageUrl': 'https://www.fineshopdesign.com/?amp\x3d1', 'searchUrl': 'https://www.fineshopdesign.com/search', 'canonicalHomepageUrl': 'https://www.fineshopdesign.com/', 'blogspotFaviconUrl': 'https://www.fineshopdesign.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-83PT0ZGCQ7', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en-GB', 'localeUnderscoreDelimited': 'en_gb', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Fineshop Design - RSS\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3667079295234480644/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/2858560800993511754/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-6450536625798530', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/f220f96f12fba80a', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en_GB\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2858560800993511754', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT2AGkbt6p4AknA9AMICxKqXj-yGAJ92X1hjPqyEaqhTDusoN9PYBDMJxNaH_EJYTDOK4qSLhmlxvxx6oHAWNxsItQKkR5U_SiMwfP6zceSzdcP9p-qh2RoT4vifO5qlaolkMsyfV0rynUFV4WaTwB5UCdumC9zn2lqPA_n_tfcULSStdL0IT7eSS7sQ/s72-c-rw/Countdown_Download_Box_Fineshop_Design.webp', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT2AGkbt6p4AknA9AMICxKqXj-yGAJ92X1hjPqyEaqhTDusoN9PYBDMJxNaH_EJYTDOK4qSLhmlxvxx6oHAWNxsItQKkR5U_SiMwfP6zceSzdcP9p-qh2RoT4vifO5qlaolkMsyfV0rynUFV4WaTwB5UCdumC9zn2lqPA_n_tfcULSStdL0IT7eSS7sQ/s0-rw/Countdown_Download_Box_Fineshop_Design.webp', 'pageName': 'How to make Download Box with Countdown Timer for Blogger', 'pageTitle': 'Fineshop Design: How to make Download Box with Countdown Timer for Blogger', 'metaDescription': 'Make a Download Box with Countdown Timer using HTML, CSS and JavaScript.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard', 'ok': 'Ok', 'postLink': 'Post link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to make Download Box with Countdown Timer for Blogger', 'description': 'Make a Download Box with Countdown Timer using HTML, CSS and JavaScript.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT2AGkbt6p4AknA9AMICxKqXj-yGAJ92X1hjPqyEaqhTDusoN9PYBDMJxNaH_EJYTDOK4qSLhmlxvxx6oHAWNxsItQKkR5U_SiMwfP6zceSzdcP9p-qh2RoT4vifO5qlaolkMsyfV0rynUFV4WaTwB5UCdumC9zn2lqPA_n_tfcULSStdL0IT7eSS7sQ/s0-rw/Countdown_Download_Box_Fineshop_Design.webp', 'url': 'https://www.fineshopdesign.com/2022/04/make-download-box-with-countdown-timer.html?amp\x3d1', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2858560800993511754}}, {'name': 'widgets', 'data': [{'title': 'Fineshop Design (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Try \x27Adventure\x27', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Contributors', 'type': 'Profile', 'sectionId': 'sec_Header_Icon', 'id': 'Profile01'}, {'title': 'Bookmark Posts', 'type': 'LinkList', 'sectionId': 'sec_Header_Icon', 'id': 'LinkList02'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Social Links', 'type': 'LinkList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'LinkList04'}, {'title': 'Under Header Ad', 'type': 'LinkList', 'sectionId': 'sec_Horizontal-Ad', 'id': 'LinkList81'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '2858560800993511754', 'title': 'How to make Download Box with Countdown Timer for Blogger', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT2AGkbt6p4AknA9AMICxKqXj-yGAJ92X1hjPqyEaqhTDusoN9PYBDMJxNaH_EJYTDOK4qSLhmlxvxx6oHAWNxsItQKkR5U_SiMwfP6zceSzdcP9p-qh2RoT4vifO5qlaolkMsyfV0rynUFV4WaTwB5UCdumC9zn2lqPA_n_tfcULSStdL0IT7eSS7sQ/s0-rw/Countdown_Download_Box_Fineshop_Design.webp', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Below Posts Ad', 'type': 'LinkList', 'sectionId': 'sec_Bottom_Widgets', 'id': 'LinkList85'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': 'How to permanently remove ?m\x3d1 from Blogger Blog', 'id': 4990960623216260259}, {'title': 'How to build a PWA (Progressive Web App) for Blogger Site in 2024', 'id': 5695471488630163172}, {'title': 'How to get Channel or Group Information using Telegram API', 'id': 8664372353820550215}, {'title': 'How to add powerful Anti Ad Blocker to your site', 'id': 946191245667093000}, {'title': 'How to make Blogger Contact Form work without loading widgets.js', 'id': 3330393496786229586}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Sticky Ad [Desktop]', 'type': 'LinkList', 'sectionId': 'sec_Side_Sticky', 'id': 'LinkList86'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization Name [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Widgets_1', 'id': 'Image21'}, {'title': 'Social Media Links', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets_1', 'id': 'LinkList21'}, {'title': 'Company', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets_2', 'id': 'LinkList22'}, {'title': 'Product \x26amp; Service', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets_3', 'id': 'LinkList23'}, {'title': 'Support', 'type': 'LinkList', 'sectionId': 'sec_Footer_Widgets_4', 'id': 'LinkList24'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Credit', 'id': 'HTML21'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': 'Contact Form', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Cookie Consent [NoTitle]', 'type': 'LinkList', 'sectionId': 'sec_Addon_Widgets', 'id': 'LinkList63'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile01', 'sec_Header_Icon', document.getElementById('Profile01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList02', 'sec_Header_Icon', document.getElementById('LinkList02'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': '#', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '#', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList04', 'sec_Nav_Widgets_2', document.getElementById('LinkList04'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList81', 'sec_Horizontal-Ad', document.getElementById('LinkList81'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3513641592-lbx__en_gb.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList85', 'sec_Bottom_Widgets', document.getElementById('LinkList85'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList86', 'sec_Side_Sticky', document.getElementById('LinkList86'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Widgets_1', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList21', 'sec_Footer_Widgets_1', document.getElementById('LinkList21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'sec_Footer_Widgets_2', document.getElementById('LinkList22'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList23', 'sec_Footer_Widgets_3', document.getElementById('LinkList23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList24', 'sec_Footer_Widgets_4', document.getElementById('LinkList24'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Credit', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3667079295234480644', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY4oy--HTJICiVTXqvE8ZNUDz4BBZg:1729279452624', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//www.fineshopdesign.com/b/stats?amp\x3d1\x26style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmB-tvhPZ_QcOP_n2IGuDxsmsPCIYHSpt5CH_GNE_NJt1IzQO7Frhme5TpChY4ZstU6kmk6N_Xs98Sf95taE2sqGGdQjDw'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList63', 'sec_Addon_Widgets', document.getElementById('LinkList63'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>