How To Add Download Timer in Blogger Post

How To Add Download Timer in Blogger Post

Friends, if you have a website or blog and inside that you write an article giving a link or button to download an application, software, video, audio, photo or other document, then this article is very beneficial for you'll happen. Because in this article, I will tell you a coding, with the help of which your blog / website will earn double (2×) and users will also find it quite attractive.

Today I will tell you how you can add a countdown timer to your blog or website article which will be of few seconds and after that the download link will be activated automatically. Above and below this download link, your ads will appear on both sides, which will increase your earnings and make the article more unique.
How To Add Download Timer in Blogger Post

Step 1: Login into your Blogger Account.

Step 2: Now Go to Theme >> click on Edit HTML.

Step 3: Find the ]]></b:skin>

Step 4: Just before the ]]></b:skin> tag paste the following code:

/* Download */ .buttonDownload{display:inline-block;position:relative;padding:10px 25px;background-color:#4cc713;color:#fff;font-family:sans-serif;text-decoration:none;font-size:.9em;text-align:center;text-indent:15px}.buttonDownload:hover{background-color:#333;color:#fff}.buttonDownload:after,.buttonDownload:before{content:' ';display:block;position:absolute;left:15px;top:52%}.buttonDownload:before{width:10px;height:2px;border-style:solid;border-width:0 2px 2px}.buttonDownload:after{width:0;height:0;margin-left:3px;margin-top:-7px;border-style:solid;border-width:4px 4px 0 4px;border-color:transparent;border-top-color:inherit;animation:downloadArrow 2s linear infinite;animation-play-state:paused}.buttonDownload:hover:before{border-color:#4cc713}.buttonDownload:hover:after{border-top-color:#4cc713;animation-play-state:running}@keyframes downloadArrow{0%{margin-top:-7px;opacity:1}0.001%{margin-top:-15px;opacity:0}50%{opacity:1}100%{margin-top:0;opacity:0}}

Step 5: Save the theme.

Step 6: Go to blog New Post >> Select HTML Edit

Step 7: Copy and Paste the code below into the HTML of the article.

<br />ADSENSE CODE - 1  <br> <div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown">You have to wait 15 seconds.</span></center>
<br /><div style="text-align: center;">
<b>Download Timer</b><br /><a href="your link" id="download_link" class="buttonDownload" style="display: none;">Download</a><noscript>JavaScript needs to be enabled in order to be able to download.</noscript><script type="application/javascript">(function(){    var message = "%d seconds before download link appears";    // seconds before download link becomes visible    var count = 15;    var countdown_element = document.getElementById("countdown");    var download_link = document.getElementById("download_link");    var timer = setInterval(function(){       // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed       if (count) {           // display text           countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);           // decrease counter           count--;       } else {           // stop timer           clearInterval(timer);           // hide countdown           countdown_element.style.display = "none";           // show download link           download_link.style.display = "";       }    }, 1000); })(); </script></div>
</div>
<br />ADSENSE CODE - 2 <br>

  • Replace ADSENSE CODE - 1 with your ad code.
  • Replace ADSENSE CODE - 2 with your ad code.
  • Replace your link Paste the URL of the site you want to send here.
  • Replace Download Timer to your title and text.
ViewCloseComments
Cancel