Hello Guys, Welcome to ASThemesWorld. On today's article we are going to learn How to Add Download Timer Button in Blogger. Adding a Download Button with Countdown Timer is very beneficial to maintain the bounce rate as well as it also increase user engagement in a blog. This further leads to increase overall earnings of your blog.

नमस्कार दोस्तों, ASThemesWorld में आपका स्वागत है। आज के इस लेख में हम ब्लॉगर में डाउनलोड टाइमर बटन कैसे जोड़ें सीखने जा रहे हैं। काउंटडाउन टाइमर के साथ डाउनलोड बटन जोड़ना बाउंस दर को बनाए रखने के साथ-साथ ब्लॉग में उपयोगकर्ता की व्यस्तता को भी बढ़ाने के लिए बहुत फायदेमंद है। इससे आपके ब्लॉग की कुल कमाई में और वृद्धि होती है।

What are the Benefits of Download Timer Button?

This widget will help you to reduce the bounce rate which will have a positive impact on SEO of your blog.
This widget also helps you to increase your earnings from the blog.

यह विजेट आपको बाउंस दर को कम करने में मदद करेगा जिसका आपके ब्लॉग के SEO पर सकारात्मक प्रभाव पड़ेगा।
यह विजेट आपको ब्लॉग से अपनी कमाई बढ़ाने में भी मदद करता है।

Download Timer Button Demo

How to Add Download Timer Button?

To add download timer button in blogger you need to add some codes to your theme. Those codes have to be added in three steps. We will add CSS code in the first step, JavaScript in the second and HTML codes in the third step. All the three steps are explained very well so follow those steps carefully because if there is a slight error then the Download Timer Button will not work. This widget is my modification of the widget that has been shared by Wendy Code.

ब्लॉगर में डाउनलोड टाइमर बटन जोड़ने के लिए आपको अपनी थीम में कुछ कोड जोड़ने होंगे। उन कोड को तीन चरणों में जोड़ा जाना है। हम पहले चरण में CSS कोड, दूसरे चरण में JavaScript और तीसरे चरण में HTML कोड जोड़ेंगे। तीनों चरणों को बहुत अच्छी तरह से समझाया गया है इसलिए उन चरणों का ध्यानपूर्वक पालन करें क्योंकि अगर थोड़ी सी भी त्रुटि हुई तो डाउनलोड टाइमर बटन काम नहीं करेगा।

Step 1. Adding CSS Codes

Search for the code ]]></b:skin> and paste the following code just above it.

कोड ]]></b:skin> को खोजें और उसके ठीक ऊपर निम्न कोड पेस्ट करें।

.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}

If you want to add the Dark Mode effect on Download Timer Button then add the following CSS codes also.

यदि आप डाउनलोड टाइमर बटन पर डार्क मोड प्रभाव जोड़ना चाहते हैं तो निम्नलिखित CSS कोड भी जोड़ें।

.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)}

If the Dark Mode class in your template is different from darkMode, the dark mode effect will not work, so replace it with your template's dark mode class.

अगर आपके टेम्प्लेट में डार्क मोड क्लास darkMode से अलग है, तो डार्क मोड इफेक्ट काम नहीं करेगा, इसलिए इसे अपने टेम्प्लेट के डार्क मोड क्लास से बदलें।

If you are using Median Ui, Fletro Pro and iMagz theme then you don't need to add whole CSS code just add below CSS code.

यदि आप Median Ui, Fletro Pro और iMagz थीम का उपयोग कर रहे हैं तो आपको संपूर्ण CSS कोड जोड़ने की आवश्यकता नहीं है, बस नीचे दिए गए CSS कोड जोड़ें

.asTargetLink{display:none}
ascolor{color:#214ECF;font-size:1.5em;font-weight:bold}

Step 2. Adding JavaScript

Copy and paste the following HTML codes just above to </body> tag.

नीचे दिए गए HTML कोड्स को कॉपी करके </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>

Number 10 in the code above is the time parameter (seconds) that the destination link is displayed for, you can change it to be faster or slower. You can also customize the display time text by changing the 'Please wait','second'.

ऊपर दिए गए कोड में नंबर 10 समय पैरामीटर (सेकंड) है जिसके लिए गंतव्य लिंक प्रदर्शित होता है, आप इसे तेज या धीमा होने के लिए बदल सकते हैं। आप 'Please wait', 'second.' को बदलकर प्रदर्शन समय पाठ को अनुकूलित भी कर सकते हैं।

Step 3. Adding HTML Codes

Now paste the following codes in post/page where you want to add Download Timer Button.

अब निम्नलिखित कोड को पोस्ट/पेज में पेस्ट करें जहां आप डाउनलोड टाइमर बटन जोड़ना चाहते हैं।

<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'>Put_Link_Here</div>

Another Method

This method is easier than first method and also not divided into many steps. There is just only one step. Copy the following codes and paste these codes in post/page where you want to add Download Timer Button.

यह विधि पहली विधि की तुलना में आसान है और कई चरणों में विभाजित नहीं है। बस एक ही कदम है। निम्नलिखित कोड को कॉपी करें और इन कोड को पोस्ट/पेज में पेस्ट करें जहां आप डाउनलोड टाइमर बटन जोड़ना चाहते हैं।

<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'>/</div>
<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>
<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}}
.darkMode .downloadInfo{background-color:#252526; border:0}
.darkMode .downloadInfo .fileType{background-color:#1e1e1e)}
ascolor{color: #214ECF;font-size: 1.5em;font-weight:bold;}
</style>

If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

यदि कोड काम नहीं करता है या आपको किसी त्रुटि/समस्या का सामना करना पड़ा है तो कृपया दिए गए डाउनलोड बटन से स्रोत कोड फ़ाइलें डाउनलोड करें।

Click To Download

You May Like These :

At this point, your download timer button has been completely added, if you follow all the steps correctly we can guarantee that the download timer button is working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.

आपका डाउनलोड टाइमर बटन पूरी तरह से जोड़ दिया गया है, यदि आप सभी चरणों का सही ढंग से पालन करते हैं तो हम गारंटी दे सकते हैं कि डाउनलोड टाइमर बटन ठीक से काम कर रहा है। यदि ऐसे प्रश्न या खंड हैं जो समझ में नहीं आते हैं, तो कृपया दिए गए टिप्पणी कॉलम के माध्यम से प्रश्न लिखें।

MORE INFORMATION

How to Add Download Timer in Blogger