How to Add Download Timer Button 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>
  

  Referensi:
  ASThemeWorld

  

  Rate this article