Timer download button blogger

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

Download button html code for blogger|How to add download timer button in Blogger

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

Table of Contents: This article discusses in detail:

1. ডাউনলোড টাইমার বোতাম কি?
2. কিভাবে একটি ব্লগ বা ওয়েবসাইটে একটি ডাউনলোড টাইমার বোতাম যোগ করবেন?
3. একটি ডাউনলোড টাইমার বোতাম কিভাবে কাজ করে?
4. একটি ব্লগ বা ওয়েবসাইটে ডাউনলোড টাইমার বোতাম ব্যবহার করার সুবিধা কি কি?
5. ব্লগ বা ওয়েবসাইটে একটি সাধারণ ডাউনলোড বোতাম ব্যবহার করার অসুবিধাগুলি কী কী?
6. একটি ডাউনলোড টাইমার বোতাম যোগ করতে HTML, CSS, Java Script কোড
7. ডাউনলোড টাইমার বোতামের কোডগুলি ডাউনলোড করুন৷
8. ব্লগারে ডাউনলোড টাইমার বোতাম কীভাবে যুক্ত করবেন সে সম্পর্কে প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
9. মন্তব্য: ডাউনলোড বোতাম html css

Read More: How to make Code Box On any website blogpost

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

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

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

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

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

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

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

What is Advantages Of Download timer button?ডাউনলোড টাইমার বোতামের সুবিধা কী?

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

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

যা আপনার সাইটের র‌্যাঙ্কিংয়ে বিশাল ভূমিকা পালন করে। এবং ব্লগ সাইটে একটি কাউন্টডাউন টাইমার ব্যবহার করে, প্রতিটি ভিজিটরকে আপনার ওয়েব পেজে আরও বেশি সময় ব্যয় করতে হবে, যা আপনার অ্যাডসেন্স আয় বাড়াতে সাহায্য করে। আপনার সাইটের ইম্প্রেশন বৃদ্ধি পায় এবং বিজ্ঞাপনে ক্লিক করার সম্ভাবনা বৃদ্ধি পায়।

What is Disadvantages of use Normal button? সাধারণ বোতাম ব্যবহারের অসুবিধা কি?

প্রায় প্রতিটি ব্লগ সাইটেই কোন না কোন পোস্ট বা নিবন্ধে ডাউনলোড লিঙ্ক থাকে। এবং যখন ভিজিটররা ফাইল ডাউনলোড করার জন্য আপনার সাইটে প্রবেশ করে এবং ফাইলটি ডাউনলোড হওয়ার সাথে সাথে আপনার পৃষ্ঠাটি ছেড়ে চলে যায়, এটি আপনার সাইটের র‍্যাঙ্কিং-এ নেতিবাচক প্রভাব ফেলে।

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

Some Codes For Download timer button? ডাউনলোড টাইমার বোতামের জন্য কিছু কোড?

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

No# 01 Code:

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

No# 02 Code:

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

No# 03 Code:

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

No# 04 Code:

<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 button html code for blogger (Download Here) | ব্লগারের জন্য ডাউনলোড বোতাম এইচটিএমএল কোড (এখানে ডাউনলোড করুন)

Download File

Click the Button Below to Download the File.

Download Now

FAQs-Download button html code for blogger

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

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

প্রশ্ন: ডাউনলোড টাইমার বোতামটি কি ব্লগার সাইটে ব্যবহার করা যেতে পারে?

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

প্রশ্ন: ডাউনলোড টাইমার বোতাম ব্যবহার করার জন্য আমার কি কোড দরকার?

উত্তর: ডাউনলোড টাইমার বোতামটি HTML, CSS এবং JavaScript কোডের মাধ্যমে ব্যবহার করতে হবে।

Comment:

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

আপনি একটি সমাধান সঙ্গে প্রদান করা হবে. ব্লগার ব্লগ স্পট সম্পর্কে বিস্তারিত তথ্যের জন্য সর্বদা আমাদের সাইটে যান। এবং ব্লগার সম্পর্কিত যেকোন সমস্যার জন্য এই সাইটের আমাদের সাথে যোগাযোগ করুন পেজে যোগাযোগ করুন।

এই সাইটের সমস্ত পোস্ট ইন্টারনেট গবেষণা এবং অভিজ্ঞতার আলোকে করা হয়েছে, যদি কোন ভুল হয়, দয়া করে আমাকে ক্ষমা করুন.

এবং যারা এই নিবন্ধটি মনোযোগ সহকারে পড়েছেন তারা অবশ্যই এখন থেকে যেকোনো ব্লগার সাইটে ডাউনলোড টাইমার বাটন যোগ করতে পারবেন।

Key Words: How to add countdown timer button in Blogger post,Download button HTML code for Blogger,Blogger script download,Download button with timer,Timer button HTML,Countdown timer for Blogger,Downloading button,Download button create

Read More: How to make Code Box On any website blogpost

ডাউনলোড টাইমার বাটন কিভাবে সেট করতে হয় | How to add download timer button in Blogger

Download button html code for blogger|How to add download timer button in Blogger

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

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

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

What is Disadvantages of use Normal button? সাধারণ বোতাম ব্যবহারের অসুবিধা কি?

Some Codes For Download timer button? ডাউনলোড টাইমার বোতামের জন্য কিছু কোড?

Download button html code for blogger (Download Here) | ব্লগারের জন্য ডাউনলোড বোতাম এইচটিএমএল কোড (এখানে ডাউনলোড করুন)

FAQs-Download button html code for blogger

Comment:

BongoBad.com

একটি মন্তব্য পোস্ট করুন

ব্লগারে কাস্টম ফ্রন্টস কিভাবে সেট করবো | How To Use Custom Google Fonts in Blogger

ব্লগারে কাস্টম ডোমেইন কিভাবে সেটাপ করতে হয় | How to set up a custom domain on a Blogger website

এসইও ফ্রেন্ডলি ব্লগ পোস্ট কিভাবে লিখতে হয় | How to write SEO Friendly blog post on blogger

যোগাযোগ ফর্ম