What tutorial do you want for the next article! Request Here!

How to Add Countdown Timer Button to Blogger V2.0

If you want to add countdown timer button to blogger website but don't know how to add then follow these easily step to add countdown timer script.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
add-countdown-timer-button-script

The goal of each business is to reach a wider audience and make extra money. This, however, may be tough because of opposition, competition and other such reasons.

Nowadays, You may have seen at many downloading web sites or safelink sites uses a countdown timer before the link appears, when the page loads, a few second timer automatically start. then after the time is up a download button appears for people to click on the link and start their download..

One such tactic is the use of ‘countdown timer’. In this article, we’ll talk about what a countdown timer does, and how you can use it to carve a niche for yourself.

What is a Countdown Timer

Many instances you could have stumble upon web sites which says Download will begin after 10-15 seconds. You have to wait for such number of seconds before the file you want gets automatically Downloaded and the download page also shows many Ads.

These kind of script makes use of Download countdown Timer widget due to which you need to wait in order to download the requested file.

Bloggers use Download Timer so that they can earn some good amount.

Decrease Website Bounce Rate Just Adding Countdown Timer Download Button

If you're blogger and your site is hosted on blogspot and also you offer Downloadable document files than you have to don't forget including this Download Countdown Timer Widget.

This widget will help you to significantly reduce the Bounce rate which will have a positive impact on search engine optimization (SEO) of your blog.

Advantage of Countdown Timer Button

  • The first advantage of the Countdown Timer Button is that it will reduce your Blogger Website’s Bounce Rate considerably.
  • If you give a Direct Link to your website, any user who comes into your post goes straight to Download the Materials and doesn’t stop on your site. If you add a few seconds of the Countdown Timer Button, the user will stop on your site and you must also read your post as long as you are at the same time.

Add Countdown Timer Button In Post:

Its very easy to implement on blogger just follow below steps to add script in your blogger template:

Step 1 : Go to Blogger Dashboard and Select Theme section.

Step 2 : Click on  Edit Html Tab

Step 3 : Search for ]]></b:skin> and copy the below css code and paste it just above ]]></b:skin> code.

Just Click / Tap to Copy below Code

.downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px}
.downloadInfo a{background-color:#f09800;color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icon.download{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='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.twtTargetLink{display:none} 
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}} 
/* CSS darkmode adjusts the class if it is different or removes this section */
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)} 

Step 4 : Final step copy the below javascript and place it just above the </body>tag and hit the save button.

Just Click / Tap to Copy below Code

<script>
//<![CDATA[
// dwonload countdown timer by the web trick 
var timeLeft = 10; //Set the time here
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.twtTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please Wait <span>'+timeLeft+'</span> Sec.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
//]]> 
</script>

The number 10 in the code above is the time parameter (seconds) for the destination link to display, you can change it to be faster or slower. You can also customize the time text that appears by changing the ' Link will appear in ', ' second ' section

How to add countdown timer button in blogger post

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Posts and Create New Post

Step 3 : Change mode from Composer view to HTML View 

Step 4 : Copy below html code & paste it where you want to add download button

Step 5 : Don't forget to copy the url/link of the file you created earlier and replace the url " https://your_blog_address.com/.html " that has been tagged, with the url of your download button.

Just Click / Tap to Copy below Code

<div class='downloadInfo'>
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<span class='textd'>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<a class='fileLink' aria-label='Download'><i class='icon download'></i></a>
</div>
<div class='twtTargetLink'>https://your_blog_address.com/.html</div>

Finally, we hope this article can help you to understand “How to add Download button with Countdown timer in Blogger”. If you really think this article helps you then don’t forget to appreciate our efforts in the comments below. For more blogging tutorials, stay connected with us.

You May Like These Posts:

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.