Blogger Countdown Download Page Setup (15 Seconds Auto Download Button)

Blogger Countdown Download Page Setup (15 Seconds Auto Download Button)

অনেক Blogger ইউজার চান এমন একটি ডাউনলোড পেজ, যেখানে ইউজার কিছু সেকেন্ড অপেক্ষা করার পর ডাউনলোড বাটন দেখাবে বা অটো ডাউনলোড শুরু হবে।

Countdown Download Page

এই পোস্টে আমি দেখাবো আমাদের ShopnerBD.Com সাইটের মতো Countdown Download Link Setup – সম্পূর্ণ HTML + CSS + JavaScript ব্যবহার করে, কোনো প্লাগইন ছাড়া।

Table of Contents

1. Countdown Download Page এর সুবিধা
2. Download Countdown এর মাধ্যমে কি ঘটবে?
3. কিভাবে Countdown Download সিস্টেম সেট করবেন?
4. SEO টিপস
5. Tutorial

›› Driving Licence Application I Driving license fee 2024 - ড্রাইভিং লাইসেন্স আবেদন | ড্রাইভিং লাইসেন্স করতে কি কি লাগে | ড্রাইভিং লাইসেন্স ফি ২০২৪

››আনসার ব্যাটালিয়ন আইন, ২০২৩ (সুযোগ-সুবিধা, দায়িত্ব ও কার্যাবলি, এখতিয়ার ও ক্ষমতা, কাঠামো, বৈশিষ্ট্য ও পরিবর্তন)

››FIFA World Cup 2026 – Complete Match Schedule (Bangladesh Time পূর্ণাঙ্গ সময় সূচি)

Countdown Download Page এর সুবিধা:

✔ ১৫ সেকেন্ড কাউন্টডাউন

✔ Auto ডাউনলোড শুরু

✔ ডাউনলোড বাটন দেখানো হবে টাইমার শেষ হলে

✔ Mobile responsive

✔ SEO & AdSense friendly

✔ Blogger-এ সহজে ব্যবহারযোগ্য

Download Countdown এর মাধ্যমে কি ঘটবে?:

1️⃣ ভিজিটর পেজে প্রবেশ করবে

2️⃣ ১৫ সেকেন্ডের কাউন্টডাউন শুরু হবে

3️⃣ টাইমার শেষ হলে

4️⃣ ডাউনলোড বাটন দেখানো হবে

5️⃣ Auto file download শুরু হবে

এইভাবে তুমি সহজেই Blogger Countdown Download Page তৈরি করতে পারবে, যা professional, fast এবং SEO-friendly।

এটি software, PDF, ZIP সকল ধরনের ফাইলের জন্য ব্যবহারযোগ্য।

Demo

Countdown Download Page

Countdown Download Page

কিভাবে Countdown Download সিস্টেম সেট করবেন:

নিচের নির্দেশনাগুলো অনুসরণ করুন।

» (Blogger Post)

আপনার পোস্টের ভেতরে বসান যেখানে আপনি ডাউনলোড বাটন দেখাতে চান।

  <a href="YOUR_FILE_LINK" class="shopnerbd-dl">
  ⬇ Download Now
</a>


  

গুরুত্বপূর্ণ নোট:

কোডের ভেতরের "YOUR_FILE_LINK" জায়গায় আপনার ডাউনলোট ফাইলের URL বসাতে হবে।

» নিচের CSS কোডটা আপনার পোস্টের একদম শেষে রাখুন।

  <style>
.shopnerbd-dl{
  display:inline-block;
  padding:14px 34px;
  background:#0d6efd;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-size:16px;
}
</style>
  

»(Create a New Page) নতুন একটি পেজ তৈরি করুন এটার নাম দিন “Download Page”

এই পেজের ভেতরে নিচের কোডগুলো এক এক করে Html, Javascript, CSS বসিয়ে দিন।

  <h2 style="text-align:center">Your download is being prepared</h2>

<div class="circle">
  <span id="time">15</span>
</div>

<p id="waitText" style="text-align:center;font-weight:bold;">
  Please wait…
</p>

<!-- 🔴 AdSense Banner Place -->
<div class="adbox">
  ShopnerBD
</div>

<div id="btnBox" style="display:none;text-align:center;">
  <a id="finalBtn" class="btn" rel="nofollow">Download Now</a>
</div>
  

এখানের ShopnerBD লেখা জায়গায় আপনার Adsense এর Script দিতে পারেন। <!-- 🔴 AdSense Banner Place --> <div class="adbox"> ShopnerBD </div>

»Javascript

  <script>
// block direct access
if(document.referrer === ""){
  window.location.href = "/";
}

// get download link from URL
let params = new URLSearchParams(window.location.search);
let downloadLink = params.get("link");
if(!downloadLink){
  window.location.href = "/";
}
</script>

<script>
let total = 15;
let t = total;
let circle = document.querySelector('.circle');

let timer = setInterval(function(){
  document.getElementById('time').innerText = t;
  circle.style.background = `conic-gradient(#0d6efd ${((total-t)/total)*360}deg,#e9ecef 0deg)`;
  t--;

  if(t < 0){
    clearInterval(timer);

    // change text
    document.getElementById('waitText').innerText =
      'Please click below to download';

    // show button
    document.getElementById('finalBtn').href = downloadLink;
    document.getElementById('btnBox').style.display = 'block';

    // auto download start
    setTimeout(function(){
      window.location.href = downloadLink;
    },500);
  }
},1000);
</script>

  

»CSS

  <style>
.circle{
  width:130px;
  height:130px;
  margin:20px auto;
  border-radius:50%;
  background:conic-gradient(#0d6efd 0deg,#e9ecef 0deg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:bold;
}
.btn{
  display:inline-block;
  padding:14px 36px;
  background:#0d6efd;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-size:16px;
}
.adbox{
  margin:25px auto;
  max-width:336px;
  min-height:280px;
  text-align:center;
}
</style>
  

SEO টিপস:

✔ Page title-এ Countdown Download keyword রাখো

✔ H2/H3 heading ব্যবহার করো

✔ Image-এর ALT text দাও

✔ Page speed optimize রাখো

✔ Mobile-friendly রাখো

 

FAQ:

প্রশ্ন ১: এটা Blogger-এ কাজ করবে কি?

উত্তর: হ্যাঁ, সম্পূর্ণ compatible।

প্রশ্ন ২: AdSense safe কি?

উত্তর: Manual click safe। Auto download ব্যবহার করলে সতর্কতা প্রয়োজন।

প্রশ্ন ৩: Countdown time পরিবর্তন করা যাবে কি?

উত্তর: হ্যাঁ, JavaScript-এ time = 15 পরিবর্তন করে সেট করতে পারো।

Tag:

Blogger Tips

Download Page

Countdown Timer

JavaScript

SEO Blogger