How to add download timer button html code for blogger | ব্লগার সাইটে ডাউনলোড টাইমার বাটন যোগ করুণ

 

How to add download timer button for blogger
How to add download timer button for blogger

অনেক ডিজাইনের ডাউনলোড টাইমার বাটনের ফরমেট এই পোস্টের মধ্যে দেওয়া হয়েছে। ব্লগ সাইটের মধ্যে বিভিন্ন সময় বিভিন্ন ফাইল ডাউনলোড করার প্রয়োজন পড়ে, ভিজিটরদের জন্য ব্লগ পোস্টের ভিতরে তখন ডাউনলোড বাটন এড করার প্রয়োজন হয়, যাতে ক্লিক করার মাধ্যমে ভিজিটররা তাদের কাঙ্খিত ফাইলটি ডাউনলোড করতে পারে। মূলত ডাউনলোড বাটনে ক্লিক করার পরে যখন কাউন্ট ডাউন টাইমার পদ্ধতিতে ফাইলটি ডাউনলোড হয়, তাকে ডাউনলোড টাইমার বাটন বলা হয়ে থাকে।

ব্লগার সাইটে ডাউনলোড টাইমার বাটন যোগ করুণ | How to add download timer button html code for blogger

আমরা এই পোস্টের মাধ্যমে ডাউনলোড টাইমার বাটন সম্পর্কে বিস্তারিত বিষয় নিয়ে আলোচনা করব। আপনি যদি মনোযোগ দিয়ে এই আর্টিকেলটি পড়েন তাহলে অবশ্যই আপনার ব্লগ বা ওয়েবসাইটে আপনি বিভিন্ন ফরমেটের ডাউনলোড টাইমার বাটন যুক্ত করে কাজ করতে পারবেন।

টেবিল অফ কনটেন্টঃ   এ আর্টিকেলটির মধ্যে যা যা বিস্তারিত আলোচনা করা হয়েছেঃ

১. ডাউনলোড টাইমার বাটন কাকে বলে ?

২. ব্লগ বা ওয়েবসাইটের মধ্যে কিভাবে ডাউনলোড টাইমার বাটন এড করতে হয় ?

৩. ডাউনলোড টাইমার বাটন কিভাবে কাজ করে থাকে ?

৪. ব্লগ বা ওয়েবসাইটের মধ্যে ডাউনলোড টাইমার বাটন ব্যবহারের সুবিধা কি? 

৫. ব্লগ বা ওয়েবসাইটের মধ্যে ডাউনলোড নরমাল বাটন ব্যবহারের অসুবিধা কি? 

৬. ডাউনলোড টাইমার বাটন এড করার HTML,CSS,Java Script কোড সমূহ 

৭. ডাউনলোড টাইমার বাটন এর কোড সমূহ ডাউনলোড করুণ

৮. FAQs

৯. মন্তব্য

ডাউনলোড টাইমার বাটন কাকে বলে-What is Download Timer button ?

ডাউনলোড টাইমার বাটন হলো Html,CSS,JavaScript কোডের সমন্বয়ে গঠিত একটি ফাইল। যা কোডের মধ্যে নির্ধারিত সময় পর্যন্ত সময় গণনা করে ডাউনলোড লিংক শো করে থাকে। সাধারণভাবে বলা যায় যে, কোন ফাইল ডাউনলোড করার জন্য যখন ডাউনলোড বাটনে ক্লিক করার পর তা কিছু সময় পর কাউন্টডাউন টাইমার পদ্ধতিতে ডাউনলোড লিংক শো করে তাই তাকে ডাউনলোড টাইমার বাটন বলা হয়ে থাকে।  

এই কোডের মাধ্যমে আপনি আপনার পছন্দ অনুযায়ী সময় নির্ধারণ করে দিতে পারবেন। যখন একজন ভিজিটর কোন ফাইল ডাউনলোড করার জন্য ডাউনলোড বাটনে ক্লিক করবে তখন এটি কাজ করে থাকে।

ব্লগ বা ওয়েবসাইটের মধ্যে কিভাবে ডাউনলোড টাইমার বাটন এড করতে হয় - How to Add Download timer button on blogsite?

ব্লগ সাইট বা ওয়েবসাইটের মধ্যে ডাউনলোড টাইমার বাটন এড করতে হলে আপনাকে অবশ্যই html,css,javascript ব্যবহার করতে হবে। ব্লগার সাইটে ডাউনলোড টাইমার বাটন এড করার জন্য আপনাকে প্রথমে ব্লগারের ড্যাশবোর্ডে যেতে হবে। এখন আপনি যদি কোন পোস্টের মধ্যে ডাউনলোড  টাইমার বাটন এড করতে চান সেই পোস্টের এডিট অপশনে যেতে হবে। এরপর আপনাকে এইচটিএমএল ভিউতে ক্লিক করতে হবে। তারপর আপনার ডাউনলোড বাটনের কাঙ্ক্ষিত স জাভাস্ক্রিপ্ট ফাইলটি ওখানে পেস্ট করতে হবে।

ডাউনলোড টাইমার বাটন কিভাবে কাজ করে থাকে ? How to Work Download Timer button?

আপনি যখন আপনার ব্লগ পোস্টের মধ্যে জাভাস্ক্রিপ্ট ডাউনলোড টাইমার বাটনের ফাইলটি পেস্ট করবেন তখন অটোমেটিকভাবে ডাউনলোড টাইমার বাটনটি সেট হয়ে যাবে। এবং যখন ভিজিটররা আপনার ওয়েবসাইটের ব্লগ পোস্টের মধ্যে প্রবেশ করবে তখন ডাউনলোড বাটনে ক্লিক করার পরেই কাউন্ট ডাউন টাইমিং শুরু হয়ে যাবে এবং নির্ধারিত সময় শেষ হওয়ার পর ফাইলটির ডাউনলোড লিংক শো করবে। এবং তারপর ভিজিটররা ফাইলটি ডাউনলোড করতে সক্ষম হবে।

আরো পড়ুনঃ  How to make Code Box On any website blogpost

ব্লগ বা ওয়েবসাইটের মধ্যে ডাউনলোড টাইমার বাটন ব্যবহারের সুবিধা কি? What is Advantages Of Download timer button?

আপনার যদি একটি ব্লগ সাইট থেকে থাকে, আর যদি সেই সাইটের মধ্যে অনেক ফাইল ডাউনলোড করার থাকে তাহলে অবশ্যই আপনাকেও আপনার সাইটের মধ্যে  ডাউনলোড টাইমার বাটন ব্যবহার করা উচিত। 

কারণ আপনি যখন আপনার ব্লগ সাইটের মধ্যে ডাউনলোড টাইমার বাটন এড করবেন তখন ভিজিটররা আপনার সাইটে আসার পর কোন ফাইল ডাউনলোড করতে হলে তাদেরকে নির্ধারিত সময় পর্যন্ত অপেক্ষা করতে হবে।  আর এতে করে আপনার সাইটের পোস্টের বাউন্স রেট কমে যাবে। 

যা আপনার সাইটের রেংকিং এর ক্ষেত্রে বিরাট কার্যকরী ভূমিকা পালন করে থাকে। আর ব্লগ সাইটের এর মধ্যে কাউন্টডাউন টাইমার ব্যবহার করার ফলে প্রত্যেক ভিজিটরকে আপনার ওয়েব পেজের মধ্যে বেশিক্ষণ সময় দিতে হয় যার ফলে আপনার এডসেন্সের আয় বাড়াতে সাহায্য করে। আপনার সাইটের ইম্প্রেশন বাড়ে এবং এড গুলিতে ক্লিক করার সম্ভাবনা বেড়ে যায়।

ব্লগ বা ওয়েবসাইটের মধ্যে ডাউনলোড নরমাল বাটন ব্যবহারের অসুবিধা কি? What is Disadvantages of use Normal button?

প্রায় প্রত্যেক ব্লগ সাইটের মধ্যেই কোন না কোন পোস্টে বা আর্টিকেল এর মধ্যে ডাউনলোড লিংক দেয়া থাকে। আর ভিজিটররা যখন আপনার সাইটে ফাইলটি ডাউনলোড করার জন্য প্রবেশ করে, এবং ফাইলটি ডাউনলোড হওয়ার সাথে সাথে আপনার পেজ থেকে বেরিয়ে যায় তাহলে আপনার সাইটের রেংকিং এর ক্ষেত্রে বিরূপ প্রভাব পড়ে। 

সাইটের পেইজ ভিউ কমে যায়, সাইটের বাউন্স রেট অত্যাধিক পরিমাণে বেড়ে যায়। যার ফলে আপনার এডসেন্সে ইনকামের পথে বিরূপ প্রভাব ফেলে। এবং ধীরে ধীরে আপনার সাইট রেংকিং পিছনে পড়ে যায়। যা একজন ব্লগারের জন্য কোনভাবেই কাম্য নয়। তাই আপনার সাইটের সফলতার জন্য  অবশ্যই আপনার ফাইল ডাউনলোড করার ক্ষেত্রে ডাউনলোড নরমাল বাটন ব্যবহার না করে ডাউনলোড টাইমার বাটন ব্যবহার করা উচিত।

ডাউনলোড টাইমার বাটন এড করার HTML,CSS,Java Script কোড সমূহ - Some Codes For Download timer button?

আমরা এই আর্টিকেলের মধ্যে ডাউনলোড টাইমার বাটন ব্যবহারের জন্য অনেকগুলো কোড দিয়েছি। যা ব্যবহার করে আপনি আপনার সাইটের মধ্যে কাজ করতে পারবেন।

১নং কোডঃ 
<div class="download-container">
  <a href="#" class="download-btn">Download files <i class="fas fa-download"></i></a>
  <div class="countdown"></div>
  <div class="pleaseWait-text">Please wait ...</div>
  <div class="manualDownload-text">
    If the download didn't start automatically, <a href="#" class="manualDownload-link" target="_top">click here</a>
  </div>
</div>
২নং কোডঃ
<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>Generating Download Link...</b><br />
<a class='button' href="#####Insert Link#####" target="_blank" id="download_link" style="display: none;">Download Now</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>
৩নং কোডঃ
<div class='download-box'
     data-link='#####Insert Link#####'
     data-image='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MJfJjegO4N7txAwyFBfNJMEUNLV4aaADlXmR8ZdOspFNqbx2UR2GsRW_g4rtdpAf39rvwooMe1n1IHD_7eP32nKqpkq8tnZ_HwWAhuLVfDWQv045PLMCa_-LXccLUkeiG7dPp7YycZ2nQj2uY2QqeQm-QsbARoQfaj_4EkEl3DrEB3Soc0ZPAO1tUQ/s160-rw-e30/fd_logo.webp'
     data-timeout='30'
     data-name='Example Image'
     data-category='Image'
     data-size='879KB'
     data-resolution='1980x1080'></div>



<style>
  .dld-container {
  --box-color: #08102b;
  --box-bg: #fffdfc;
  --box-bg-alt: rgba(0, 0, 0, .08);
  --font-family: inherit;
  --svg-color: #fffdfc;
  --button-bg: #482dff;
}
.darkMode .dld-container {
  --box-color: #fffdfc;
  --box-bg: #2d2d30;
  --box-bg-alt: #252526;
  --button-bg: #e91e63;
}
.dld-container{-webkit-tap-highlight-color:transparent;box-sizing:border-box;position:relative;display:flex;flex-direction:column;max-width:480px;margin:30px 0;color:var(--box-color);font-family:var(--font-family);transition:margin .6s;-webkit-transition:margin .6s}
.dld-container svg{width:22px;height:22px;fill:currentColor}
.dld-box,.dld-image{position:relative;display:flex}
.dld-container svg.line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2}
.dld-box{z-index:2;background:var(--box-bg);width:100%;padding:15px;flex-direction:row;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.dld-image{flex-shrink:0;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:var(--box-bg-alt);border-radius:6px;transition:.4s;-webkit-transition:.4s}
.dld-image[style*=background-image]{width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)}
.dld-image:not([style*=background-image])::before{content:attr(data-placeholder);opacity:.7}svg.dld-svg{width:calc(100% + 12px);height:calc(100% + 12px);position:absolute;top:-6px;bottom:-6px;right:-6px;left:-6px;opacity:0;stroke-width:1.5;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);transition:.5s;-webkit-transition:.5s}
.dld-image[style*=background-image] .dld-svg{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px}.dld-svg .b{fill:none;stroke:var(--box-bg-alt)}
.dld-svg .c{fill:none;stroke:var(--button-bg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:.5s;-webkit-transition:.5s}
.dld-info{flex-grow:1;width:calc(100% - 115px)}
.dld-info>*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dld-bottom,.dld-button{position:absolute;display:flex}
.dld-info>::before{content:attr(data-name) ': ';text-transform:capitalize;opacity:.8}
.dld-info>::after{content:attr(data-value)}
.dld-button{background:var(--button-bg);width:40px;height:40px;bottom:-20px;right:20px;outline:0;border:none;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:.3s;-webkit-transition:.3s;cursor:pointer}
.dld-button:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)}
.dld-button svg.line{width:24px;height:24px;stroke:var(--svg-color)}
.dld-download{visibility:visible;opacity:1}
.dld-container.alt .dld-download,.dld-retry{visibility:hidden;opacity:0;bottom:-40px}
.dld-bottom{z-index:1;bottom:0;right:0;align-items:center;justify-content:center;height:60px;width:100%;padding-top:20px;font-size:14px;background:var(--box-bg);border-radius:0 0 10px 10px;transition:.6s;-webkit-transition:.6s}
.dld-bottom>* span{color:var(--button-bg);font-size:18px;font-weight:600}
.dld-container.alt{margin:30px 0 70px}
.dld-container.alt .dld-image{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%}
.dld-container.alt .dld-svg{opacity:1}
.dld-container.retry .dld-retry{visibility:visible;opacity:1;bottom:-20px}
.dld-container.alt .dld-bottom{bottom:-40px;background:var(--box-bg-alt);box-shadow:0 0 35px rgba(0,0,0,.09)}
  
</style>



<script type='module'>/*<![CDATA[*/
(({selector:a,messages:{startingDownload:b,pleaseWait:c}})=>{const d=a=>("string"==typeof a?a:a+"").replace(/&/g,"&amp;").replace(/'/g,"&#39;").replace(/"/g,"&#34;"),e=document.querySelectorAll(a);e.forEach(e=>{e.classList.add("dld-container"),e.innerHTML=`<div class='dld-box'><div class='dld-image'${e.dataset.image?` style='${d(`background-image: url(${e.dataset.image})`)}'`:""} data-placeholder='${e.dataset.placeholder||".ext"}'><svg class='dld-svg' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92' /><circle class='c dld-progress' cx='17' cy='17' r='15.92' /></svg></div><div class='dld-info'>${(Object.keys(e.dataset).reduce((b,a)=>(["link","image","placeholder","target","timeout"].includes(a)||(!b&&(b=[]),b.push([a,e.dataset[a]])),b),null)||[["Info","No information provided"]]).map(([a,b])=>`<span data-name='${d(a)}' data-value='${d(b)}'></span>`).join("")}</div><button class='dld-button dld-download'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button><button class='dld-button dld-retry'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button></div><div class='dld-bottom'></div>`;const f=e.dataset.link||"#",g=e.dataset.target,[h,i,j,k]=[".dld-download",".dld-retry",".dld-bottom",".dld-progress"].map(a=>e.querySelector(a));h.addEventListener("click",()=>{e.classList.add("alt");let a=+(e.dataset.timeout||10);(Number.isNaN(a)||!Number.isFinite(a))&&(a=10);const d=a;j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`;const h=setInterval(()=>{a-=1,j.innerHTML=`<span>${b.replace(/%d/g,a)}</span>`,k.style.strokeDashoffset=Math.floor(100*(a/d));0>=a&&(clearInterval(h),j.innerHTML=c,g?window.open(f,g):window.location.href=f,i.onclick=()=>{g?window.open(f,g):window.location.href=f},setTimeout(()=>{e.classList.remove("alt"),e.classList.add("retry")},4e3))},1e3)})})})({
  selector: ".download-box",
  messages: {
    startingDownload: "Starting Download in <span>%d</span> seconds",
    pleaseWait: "Please wait..."
  }
});
/*]]>*/</script>
৪নং কোডঃ
<div style="text-align: center;"><a class="button" id="Count_Time">Show Content</a> </div>
 <div id="Stop_Timer" target="_blank">
  
   <!-- Add your content here to show after the timer finish -->
<p>Click the Button Below to Download the File.<p/> 
<a class="button" href="#####Insert Link#####" >Tutorial</a>

</div>

<style>
 Cnt-Timer{font-size:16px;opacity:.8;display:inline-flex;align-items:center}
 Cnt-Timer svg{width:20px; height:20px;}
</style>  
   <script>/*<![CDATA[*/
var counter = 9; // Add 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>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("Count_Time");clickbtn.onclick=startDownload;
/*]]>*/ </script>

ডাউনলোড টাইমার বাটন এর কোড সমূহ ডাউনলোড করুণ | (Download for )

Click the Button Below to Download the File.

Download Now

FAQs

প্রশ্নঃ ডাউনলোড টাইমার বাটন ব্যবহার করা কেন প্রয়োজন?? 
উত্তরঃ আপনার ওয়েবসাইটের বাউন্স রেট কমানোর জন্য ডাউনলোড টাইমার বাটন ব্যবহার করা প্রয়োজন। 


প্রশ্নঃ ব্লগার সাইটে কি ডাউনলোড টাইমার বাটন ব্যবহার করা যায়?  
উত্তরঃ অবশ্যই, ব্লগার সাইটে ডাউনলোড টাইমার বাটন ব্যবহার করা যায়। 


প্রশ্নঃ ডাউনলোড টাইমার বাটন ব্যবহার করতে কি কোডের প্রয়োজন লাগে? 
উত্তরঃ এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট কোড এর মাধ্যমে ডাউনলোড টাইমার বাটন ব্যবহার করতে হয়।

মন্তব্য

উপরোক্ত বিষয়াবলী ছাড়াও আরো কারণ রয়েছে ডাউনলোড টাইমার বাটন ব্যবহার করার জন্য। এই পোস্টের মধ্যে কয়েকটি কোড দেওয়া রয়েছে যেগুলো ব্যবহার করলে আপনি আপনার ব্লগ সাইটের মধ্যে ডাউনলোড টাইমার বাটন ব্যবহার করতে পারবেন। এছাড়াও আপনার ব্লগ সাইটের মধ্যে ডাউনলোড টাইমার বাটন ব্যবহার করতে কোন প্রকার সমস্যা হলে অবশ্যই এই পোষ্টের কমেন্টে জানাবেন। 


আপনাকে সলিউশন প্রদান করা হবে। ব্লগার ব্লগ স্পট সম্পর্কে বিস্তারিত তথ্যের জন্য আমাদের সাইটটি সবসময় ভিজিট করুন। এবং ব্লগার সম্পর্কিত যে কোন সমস্যার জন্য আমাদের এই সাইটের কন্টাক্ট আজ পেইজে যোগাযোগ করুন। 


এই সাইটের সকল পোস্ট সমূহ ইন্টারনেট ঘাটাঘাটি এবং অভিজ্ঞতার আলোকে করা হয়ে থাকে, ভুল ত্রুটি থাকলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। 
আর যারা এই আর্টিকেলটি সম্পূর্ণ মনোযোগ সহকারে পড়েছেন তারা অবশ্যই এখন থেকে যে কোন ব্লগার সাইটে ডাউনলোড টাইমার বাটন যোগ করতে পারবেন।

আরো পড়ুনঃ  How to make Code Box On any website blogpost

Tags:
Post a Comment (0)
Previous Post Next Post