How to Add a Download Button With Timer in Blogger.

Hello Blogger.

In this tutorial, I will share with you all How to Add a Download Button With Timer in Blogger. Installing a Download Button With Timer on your website will look more professional, plus it can also serve as an assessment of the views.

What is Download  Timer Button?

Download timer is a simple javascript code that starts a count down of 15 sec or the time set and shows you the download link after the time is over. As it reveals the download link after some time, that's why it is called a download timer. 

Here you can set the time according to your choice and when the timer will stop, the download button will appear in the blog post. So, When a user will click on the button the link will open in a new tab and the user can able to download the file. 

What are the Benefits of the Download Timer Button?

• Reduce the bounce rate.
• Impact on SEO of your blog.
• Increase your earnings from the blog.
• Helps you boost the Adsense revenue by engaging the user more time on a webpage.

Step To Make Download Timer Button!

Step 1. Adding CSS code

• Go to Blogger
• Go to Theme Menu
• Click on Edit HTML

Copy the Code and Paste the Code above the ]]</b:skin>

<style>
 .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:#214ecf;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}
.asTargetLink{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}}
ascolor{color:#214ECF;font-size:1.5em;font-weight:bold}
</style>

Step 2. Adding Javascript (js.)

• Copy the Code and Paste the Code above the </body>

<script type='text/javascript'>
var timeLeft = 10;
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.asTargetLink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait <ascolor>'+timeLeft+'</ascolor> second.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
</script>

Step 3. Now Its Time To Adding HTML

• Now Make a Post/Page in your Blog
• Copy the Code And Paste the Code in your Blog

<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='asTargetLink'>Link_Here</div>

Conclusion

 In this article I have made a tutorial on How to Add a Download Button With Timer in Blogger. which you can use in your website to reduce Bounce rate and increase revenue etc. User's have to wait for codes or download links until the timer finishes so its a better idea to decrease Bounce rate of your website.

 Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © ItsThemeWorld | All Rights Reserved