Styles

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 Offer Widget with Countdown Timer for Blogger

Make a Countdown Timer for your website's upcoming events, offers, sales and discounts using HTML, CSS and JavaScript.

How to Create Stylish Codebox for Blog Posts

If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/517362887-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7sZWzjLwq16DYplnN6g4ChCF455A:1713273022450';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3667079295234480644','//www.fineshopdesign.com/search/label/Styles?m\x3d0','3667079295234480644');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3667079295234480644', 'title': 'Fineshop Design', 'url': 'https://www.fineshopdesign.com/search/label/Styles?m\x3d0', 'canonicalUrl': 'https://www.fineshopdesign.com/search/label/Styles', 'homepageUrl': 'https://www.fineshopdesign.com/?m\x3d0', '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': '', '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', '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/2409974e622e3273', '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': 'index', 'searchLabel': 'Styles', 'pageName': 'Styles', 'pageTitle': 'Fineshop Design: Styles', 'metaDescription': 'The Best Website where you can find Blogger Widgets, Tech News, Tech Reviews, Coding related Tutorials and many more.'}}, {'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': 'Fineshop Design', 'description': 'The Best Website where you can find Blogger Widgets, Tech News, Tech Reviews, Coding related Tutorials and many more.', 'url': 'https://www.fineshopdesign.com/search/label/Styles?m\x3d0', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isSearch': true, 'isLabelSearch': true, 'search': {'label': 'Styles', 'resultsMessage': 'Showing posts with the label Styles', 'resultsMessageHtml': 'Showing posts with the label \x3cspan class\x3d\x27search-label\x27\x3eStyles\x3c/span\x3e'}}}, {'name': 'widgets', 'data': [{'title': 'License Key - Don\x27t remove or disable', 'type': 'HTML', 'sectionId': 'license', 'id': 'HTML15'}, {'title': 'Fineshop Design (Header)', 'type': 'Header', 'sectionId': 'header-title', 'id': 'Header1'}, {'title': 'Try \x27Blogger\x27', 'type': 'BlogSearch', 'sectionId': 'header-search', 'id': 'BlogSearch1'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'header-icon', 'id': 'TextList000'}, {'title': 'Contributors', 'type': 'Profile', 'sectionId': 'header-icon', 'id': 'Profile1'}, {'title': 'Additional Menu', 'type': 'PageList', 'sectionId': 'nav-widget-1', 'id': 'PageList002'}, {'title': 'Social Media', 'type': 'LinkList', 'sectionId': 'nav-widget-1', 'id': 'LinkList002'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'nav-widget-2', 'id': 'HTML000'}, {'title': 'Notification', 'type': 'HTML', 'sectionId': 'notif-widget', 'id': 'HTML0'}, {'title': 'Under Header Ad', 'type': 'HTML', 'sectionId': 'horizontal-ad', 'id': 'HTML91'}, {'title': 'Featured Post', 'type': 'FeaturedPost', 'sectionId': 'top-widget', 'id': 'FeaturedPost1', 'postId': '4990960623216260259'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'main-widget', 'id': 'Blog1', '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}, {'id': '1622671380047149352', 'title': 'How to make Offer Widget with Countdown Timer for Blogger', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjH6dqzxKfJepAwK2AuPuKkqp0-XrQucCWU7aMUSKa89DsnZq5MnkhjJ15UNN3tW8fnvYv6wpZwYA7zPPVvdjwkmzZpS7omuLH6fuIaANquSi6wob2wCE-tm-m0NKUlftR44hknPADwaWPinKAXj8yIAwQSTm11uMeqPcI8cB9u3a_7_WXvkGSzNJLSQ/s0-rw/Countdown_Offer_Widget_%28Fineshop_Design%29.webp', 'showInlineAds': false}, {'id': '2516187803080340633', 'title': 'How to Create Stylish Codebox for Blog Posts', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6h2z7JFv7TCbsmN61IaTnq6x2tGxOcdCF38ZuSuicZtmlC40_mmj9qXQFfOGf6lENi4vpJjxU00Pwv_fF8xY3H7jzXJF1S-bs0hRF5wNZfrc1dhORy2NBSnoKVmkZxvitWE619djbOAG-ubNFI3mDYGRn1chaTE2wvLjMEnOlmGZAr15AWxqTmNqVPQ/s0-rw/Codebox_For_Blog_Posts_%28Fineshop_Design%29.webp', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': 'in'}]}, {'title': 'Middle Post Ad 01', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML01'}, {'title': 'Middle Post Ad 03', 'type': 'HTML', 'sectionId': 'main-widget', 'id': 'HTML03'}, {'title': 'Monthly Popular Posts', 'type': 'PopularPosts', 'sectionId': 'side-widget', 'id': 'PopularPosts00', 'posts': [{'title': 'How to get Channel or Group Information using Telegram API', 'id': 8664372353820550215}, {'title': 'How to build a PWA (Progressive Web App) for Blogger Site in 2023', 'id': 5695471488630163172}, {'title': 'How to make Download Box with Countdown Timer for Blogger', 'id': 2858560800993511754}, {'title': 'Lightbox Image with Vanilla Javascript', 'id': 7004734279858278173}, {'title': 'How to permanently remove ?m\x3d1 from Blogger Blog', 'id': 4990960623216260259}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'side-widget', 'id': 'Label00'}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'side-widget', 'id': 'HTML11'}, {'title': 'Made with coffee by', 'type': 'HTML', 'sectionId': 'footer-widget-1', 'id': 'HTML77'}, {'title': 'Company', 'type': 'LinkList', 'sectionId': 'footer-widget-2', 'id': 'LinkList2'}, {'title': 'Product \x26amp; Service', 'type': 'LinkList', 'sectionId': 'footer-widget-3', 'id': 'LinkList3'}, {'title': 'Support', 'type': 'LinkList', 'sectionId': 'footer-widget-4', 'id': 'LinkList4'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'credit-widget', 'id': 'HTML88'}, {'title': 'Back to top', 'type': 'TextList', 'sectionId': 'credit-widget', 'id': 'TextList88'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'error-404', 'id': 'HTML404'}, {'title': 'Cookie Consent', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML21'}, {'title': 'Enable JavaScript!', 'type': 'HTML', 'sectionId': 'addons-widget', 'id': 'HTML25'}, {'title': 'Backlinks', 'type': 'LinkList', 'sectionId': 'addons-widget', 'id': 'LinkList5'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML15', 'license', document.getElementById('HTML15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header-title', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'header-search', document.getElementById('BlogSearch1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList000', 'header-icon', document.getElementById('TextList000'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'header-icon', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList002', 'nav-widget-1', document.getElementById('PageList002'), {'title': 'Additional Menu', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': '/p/disclaimer.html', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '/p/privacy.html', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList002', 'nav-widget-1', document.getElementById('LinkList002'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML000', 'nav-widget-2', document.getElementById('HTML000'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML0', 'notif-widget', document.getElementById('HTML0'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML91', 'horizontal-ad', document.getElementById('HTML91'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'top-widget', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main-widget', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'navMessage': 'Showing posts with label \x3cb\x3eStyles\x3c/b\x3e. \x3ca href\x3d\x22https://www.fineshopdesign.com/\x22\x3eShow all posts\x3c/a\x3e', 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3116279569-lbx__en_gb.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'main-widget', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML03', 'main-widget', document.getElementById('HTML03'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts00', 'side-widget', document.getElementById('PopularPosts00'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label00', 'side-widget', document.getElementById('Label00'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'side-widget', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML77', 'footer-widget-1', document.getElementById('HTML77'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList2', 'footer-widget-2', document.getElementById('LinkList2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList3', 'footer-widget-3', document.getElementById('LinkList3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList4', 'footer-widget-4', document.getElementById('LinkList4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML88', 'credit-widget', document.getElementById('HTML88'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList88', 'credit-widget', document.getElementById('TextList88'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'error-404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'addons-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML25', 'addons-widget', document.getElementById('HTML25'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList5', 'addons-widget', document.getElementById('LinkList5'), {}, 'displayModeFull'));
</script>
</body>
</html>