How to add a download button with a countdown timer on Blogger 2023
On many websites that provide application download service, you will find a countdown feature on the download button. This feature has many benefits on the blog, including increasing the visitor’s stay on it, as well as making the download more professional. But can it be added to Blogger blogs? In this lesson, we will learn how to easily add a download button with a countdown timer on Blogger.
If you do not know how to modify the colors in this feature, do not worry, as we have previously coordinated it in terms of colors and appearance. So you just copy and paste it onto your blog.
Before we begin to explain the addition, I want to point out that you should not put a long time in the download counter so that the visitor does not get bored and leaves without downloading the programs that he wants. Perhaps the best time that can be adopted is between 10 seconds and 15 seconds at most.
To view the button here:
Explanation of adding a download button with a timer on Blogger
1- Go to Blogger Appearance Edit HTML
2- You search for the tag <head/>and then put the following code directly above it:
<style>
.dowbox {display: flex;justify-content: center;padding: 15px 0;}
.gedone{background: #cbffb5;padding: 10px 20px;border-radius: 3px;}
#Stop_Timer {background: #f7f7f7;padding:0 0 1px 0;border-radius: 3px;text-align: center;}
.jistbutton{border-radius:3px;}
Cnt-Timer{font-size:16px;opacity:.8;display:inline-flex;align-items:center}
Cnt-Timer svg{width:20px; height:20px;}
.jistbutton {width: fit-content;font-size: 14px;border-radius: 3px;background: #43a533;align-items: center;padding: 5px 15px;color: #fff;display: flex;margin: 0 auto;}
.jistbutton svg {fill: transparent;margin-left: 6px;stroke: #fff;width: 16px;height: 16px;}
</style>
3- Search for the tag <body/>and then put the following code in it:
<script>/*<![CDATA[*/
var counter = 10; // Add the time here in seconds
var id,downloadButton=document.getElementById("Stop_Timer"),newElement=document.createElement("p");function startDownload(){this.style.display="none",id=setInterval(function(){counter--,counter<0?(newElement.parentNode.replaceChild(downloadButton,newElement),clearInterval(id)):newElement.innerHTML="<center><strong>انتظر <span>"+counter.toString()+"</span> ثوان</strong><p/><Cnt-Timer><svg viewBox='0 0 40 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg> جاري تجهيز الملف... انتظر رجاء!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Count_Time");clickbtn.onclick=startDownload;
/*]]>*/ </script>
4- Now go to the article in which you want to place the download button, choose the appropriate place, and then paste the following code in it:
<div class="downloadb">
<div class="dowbox"style="text-align: center;"><a class="jistbutton" id="Count_Time"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="transparent" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/></svg> Download</a> </div>
<div id="Stop_Timer" target="_blank">
<!-- Add your content here to show it after the timer is up -->
<p class="gedone">Download link is ready! Click the button below to download<p/>
<a href="####" class="jistbutton"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/></svg>Downloadيل</a></div>
</div>
5- Change the sign #### in the download link and press Save. Congratulations, you are presenting the article, trying it, and it will work with you, God willing.
When you want to put the download link in any other article, it is enough to put the last code with changing the download link. As for the two previous codes, it is enough to put them in the template codes the first time only. Then you paste the last code in any article where you want to put the download link.
Content Random
"Welcome to Content Random , a blog dedicated to providing a wide variety of engaging and informative content. From lifestyle and travel to technology and business, we strive to bring you the latest news, trends, and insights in a variety of different fields. Whether you're looking for inspiration or just a good read, we've got you covered. Follow our blog for regular updates and join the conversation by leaving your comments and thoughts."
