यदि आप अपनी वेबसाइट पर कोई कोड फ़ाइलें डाउनलोड करने के लिए दे कर रहे हैं, तो यह काउंटडाउन टाइमर आपके वेबसाइट की Bounce Rate कम करने और Revenue बढ़ाने में भी आपकी बहुत मदद करेगा।
जैसा कि आपने कई बार देखा होगा कुछ sites फ़ाइलें डाउनलोड करने से पहले एक Countdown Timer दिखाती हैं, इसके बाद टाइमर खत्म होने से पहले users को एक विशेष समय के लिए इंतजार करना पड़ता है, इसके बाद जब Timer खत्म हो जाता है तो users लिंक से फ़ाइलें डाउनलोड कर सकते हैं।
तो आज हम इस पोस्ट में , ब्लॉगर में Countdown Timer बनाने जा रहे हैं। जिसका इस्तेमाल आप अपनी site में bounce rate कम करने और Revenue बढ़ाने के लिए कर सकते हैं।
Pros
- यह bounce rate को कम करेगा
- यह आपके revenue में वृद्धि करेगा
- टाइमर खत्म होने तक users को डाउनलोड लिंक का इंतजार करना होगा
- इसमें लोडिंग SVG एनीमेशन है
- हम कोई भी कोड, लिंक या सामग्री जोड़ सकते हैं जो टाइमर खत्म होने के बाद दिखाई देगी ! Demo चाहिए? नीचे क्लिक करें।
This is a dummy text which shows after timer finishes. here your can add Buttons, text etc anything which you have to show after timer finish
How to add Countdown Timer in website
Step 1: सबसे पहले Blogger Dashboard. में लॉग इन करें
Step 2: ब्लॉगर डैशबोर्ड में Theme पर, क्लिक करें
Step 3: 'कस्टमाइज़' बटन के बगल में arrow आइकन पर क्लिक करें.
Step 4: Edit HTML पर क्लिक करें, आपको Editing Page पर redirect कर दिया जाएगा।
Step 5: अब ]]></b:skin> कोड सर्च करें और इसके ठीक ऊपर यह CSS कोड पेस्ट करें।
Countdown timer HTML Codes
Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center}
Step 6: अब निम्नलिखित जावास्क्रिप्ट को </body> के ठीक ऊपर जोड़ें अगर आपको यह नहीं मिलता है, तो शायद यह ऐसा हो </body>.
<script>/*<![CDATA[*/
var counter = 9; // Add time here in seconds
var id,downloadButton=document.getElementById("element-show"),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>Please wait <span>"+counter.toString()+"</span> seconds</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> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;
/*]]>*/ </script>
Step 7: Save आइकन पर क्लिक करके Changes को save कर दे
Step 8: ऊपर के सारे steps करने के बाद ! countdown download box जोड़ने के लिए HTML View से अपने ब्लॉग पोस्ट में यह HTML कोड paste करे।
<div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
<div id="element-show" target="_blank">
<!-- Add your content here to show after the timer finish -->
This is a dummy text which shows after timer finishes. here your can add Buttons, text etc anything which you have to show after timer finish<p/>
<a class="button" href="#" >Tutorial</a>
</div>
How to add a Countdown Timer in blogger
यदि आप इस Countdown timer का उपयोग केवल 1-2 पोस्ट में कर रहे हैं, तो आप Only नीचे दिए गए कोड को कॉपी कर सकते हैं और थीम XML में जोड़ने के बजाय ,सीधे अपने पोस्ट के HTML view में जोड़ सकते हैं,
<div style="text-align: center;"><button class="button" id="Cnt-Timer-TD">Show Content</button> </div>
<div id="element-show" target="_blank">
<!-- Add your content here to show after the timer finish -->
This is a dummy text which shows after timer finishes. here your can add Buttons, text etc anything which you have to show after timer finish<p/>
<a class="button" href="" >Tutorial</a>
</div>
<script>/*<![CDATA[*/
var counter = 9; // Add time here in seconds
var id,downloadButton=document.getElementById("element-show"),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>Please wait <span>"+counter.toString()+"</span> seconds</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> Generating... Please Wait!</Cnt-Timer></center>"},1e3)}newElement.innerHTML="<span></span>",downloadButton.parentNode.replaceChild(newElement,downloadButton);var clickbtn=document.getElementById("Cnt-Timer-TD");clickbtn.onclick=startDownload;
/*]]>*/ </script>
<style>
Cnt-Timer{font-family:var(--fontB);font-size:13px;opacity:.8;display:inline-flex;align-items:center}
</style>
Conclusion
इस post में मैंने How to add countdown timer in blogger के बारे में बताया है। जिसका इस्तेमाल वेबसाइट में bounce rate कम करने और revenue बढ़ाने में कर सकते हैं।