|
| How to add download timer in blogger |
If you have an apk download website or some sort of software download blog,
then you might want to add a countdown timer before a file is downloaded. This
guide will help you to add a count-down timer to your blog post or page so you
can get more engagement and users will spend more time on your post.
Why do we add a download timer?
If you are not getting much engagement time on your blog or website then you
can use a download timer to keep your visitor hooked up until the timer is
finished and then the file will be downloaded. So try to keep the timer under
15sec because too long count down will annoy the visitor and it can ruin your
engagement rate.
Any Effect on Adsense?
The real thing is user engagement when it comes to the Adsense issues so I
will suggest you not change the time duration and just keep it normal between
5sec to 15sec. Genuinely it is against the Adsense terms that you hook up a
user or visitor without any meaningful reason. They only allow a visitor to
stay on a website for content engagement. But you can solve this problem by
just keeping your countdown to less than 15sec. If you do so, nothing to worry
about.
Process
Step 1:
Create a New Post
First of all just as usual create a new post, where you can add your timer
button. And after opening a new post, go to the top-left and click on compose
view and change it to HTML view so we can add some HTML, CSS, and javascript.
|
| How to add download timer in blogger |
Step 2:
Copy & Paste the code
Copy the code below and paste it into your new post, this will add a download
button to your post and when the user will click on it, a timer will start and
on finishing the countdown, a download link will appear.
|
| How to add download timer in blogger |
<br/><hr/><div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<span id="countdown" style="font-size: 25px; font-weight: bold">You have to wait 10 seconds.</span></center>
<br />
<div style="text-align: center;">
<b>Download Timer</b><br /><a href="[Your-Download-Link]"><button id="download_link" style="display:none">DOWNLOAD NOW</button></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 = 10;
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>Step 3:
Copy the code in the theme
As you know we have added the code for the download button but it looks too
simple, so we will add some style to it, and then our button will look more
attractive and decent. Just go to blogger dashboard, click the theme,
and from dropdown navigation, select Edit HTML.
|
| How to add download timer in blogger |
When you will click on the Edit HTML option, it will open the source
code of your blog design and now you have to carefully paste the below code
into your theme. Press
CTRL+F and type in
</style>. After you find the typed text, just paste the code below this tag.
|
| How to add download timer in blogger |
<style>
#download_link{
background-color: #4CAF50; /* Green */
border: none;
color: white;
font-weight: bold;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
</style>
Step 4:
Click Save to Publish Changes
When you paste the code just below </style> tag, click save in the top right corner. All of your buttons with id "download_link" are now attractive and well designed.
Update Download Link
When you did all things, just now your work is to place your download link in the button section. To do this just replace [your-download-link] with your download URL.
0 Comments