Professional Download Timer Script For Blogger
Professional Download Script in 2023: Today in this blog, I will tell you how to download a timer script and how you can use it as a professional blogger. Download countdown timer script will help you to increase your post-engagement time in your Analytics. If you want to earn more revenue from Google then read this article completely.
This script is not just for timers. if you use this script in the post. Then your post boost because this script SEO free bost and reduce bounce rate.
What is a Download Timer Script?
Download Timer is a simple programming language (like java, HTML, and CSS ) code that starts a countdown of 10 seconds or the time set and shows you the download link after the time end.
What is the benefit of the Download Timer countdown?
If we provide any file in a blog then users visit and direct click on a file and download it easily within a few seconds. These behaviors of visitors damage our blog site and increase the bounce rate. If the bounce rate increases then our site is down due to visitor behavior. If we add a timer script then visitors stay on our post and wait for the countdown then click a file and download it. If we add a timer script then we keep our visitors on our post for many seconds. Script trimming tool
Read This Article ⤳ Add Whatsapp chat Button In Blog
Read This Article ⤳ 2x Revenue generated Timer Script
How to Add Download Timer Script in Post?
Open your website dashboard, select a post, and then create a new post and paste the HTML script in the HTML view section.
Then replace some things at #### like,
File Type Like........... Script
File Name like............ Download TImer Script
File Size Like................ 1kb
File Link Like................ Download Now
Download Link....... paste file link
DEMO Download Script
<div class='downloadInfo'>
<span class='fileType' data-text='####'></span>
<div class='fileName'>
<span class='textd'>####</span>
<span class='fileSize'>####</span>
</div>
<a class='fileLink' aria-label='####'><i class='icon download'></i></a>
</div>
<div class='pixabin-targetlink'>DOWNLOAD LINK</div>
<script type='text/javascript'>
var timeLeft = 10;
var downloadBtn=document.querySelector('.fileLink'),countdown=document.querySelector('.textd');downloadBtn.addEventListener('click',()=>{var e=document.querySelector('.pixabin-targetlink').innerText,t=setInterval(function(){timeLeft-=1,countdown.innerHTML='Please wait <pixabin-colour>'+timeLeft+'</pixabin-colour> second.',timeLeft<=0&&(clearInterval(t),window.location.href=e,setTimeout())},1e3)});
</script>
<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: #4800ff;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}
.pixabin-targetlink{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}}
pixabin-colour{color: #4800ff;font-size:1.5em;font-weight:bold}</style>