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