Blogger পোস্টে স্বয়ংক্রিয় সূচিপত্র (Table of Contents) যুক্ত করুন।

Akter Molla
২২ জুন, ২০২৫

 আপনি কি চান আপনার Blogger পোস্টে হেডিংগুলো স্বয়ংক্রিয়ভাবে একটি সুন্দর সূচিপত্রে (TOC) রূপান্তরিত হোক? এবং সেই TOC যেন ভাঁজযোগ্য হয় — ব্যবহারকারী চাইলে দেখবে, না চাইলে লুকাবে?তাহলে এই পোস্টটি শুধু আপনার জন্য।

✅ কেন TOC ব্যবহার করবেন?

একটি টেবিল অফ কনটেন্টস (TOC) আপনার ব্লগপোস্টকে:

  • পরিষ্কার ও গঠনমূলক করে তোলে

  • SEO ফ্রেন্ডলি করে

  • ব্যবহারকারীর জন্য নেভিগেশন সহজ করে

  • Google Featured Snippet পেতে সাহায্য করে 

📌 এই TOC কীভাবে কাজ করবে?

  • এটি স্বয়ংক্রিয়ভাবে আপনার পোস্টের <h2> ও <h3> হেডিংগুলো খুঁজে বের করবে

  • প্রথম হেডিংয়ের পরেই একটি বোতামসহ TOC বসবে

  • বোতামে ক্লিক করে TOC খুলে বা লুকানো যাবে

🧩 ধাপ ১: CSS কোড যুক্ত করুন

  • Blogger ড্যাশবোর্ডে যান

  • Theme > Customize > Advanced > Add CSS ক্লিক করুন

  • নিচের CSS কোডটি কপি করে পেস্ট করুন:

.custom-toc {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 20px 0;
  border-radius: 8px;
}
.toc-toggle-btn {
  background-color: #007acc;
  color: #fff;
  padding: 10px 15px;
  font-size: 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}
.toc-content {
  display: none;
}
.toc-content.show {
  display: block;
}
.toc-content ul {
  list-style: none;
  padding-left: 0;
}
.toc-content li {
  margin: 6px 0;
}
.toc-content li.h2 {
  font-weight: bold;
}
.toc-content li.h3 {
  margin-left: 20px;
  font-style: italic;
}
.toc-content a {
  text-decoration: none;
  color: #007acc;
}
.toc-content a:hover {
  text-decoration: underline;
}

⚙️ ধাপ ২: JavaScript কোড যুক্ত করুন

এখন থিমে TOC জেনারেট করার স্ক্রিপ্ট বসাতে হবে।

  1. Blogger ড্যাশবোর্ড > Theme > Edit HTML

  2. স্ক্রল করে নিচের দিকে যান এবং </body> ট্যাগের ঠিক আগে নিচের কোডটি পেস্ট করুন:

<b:if cond='data:blog.pageType == "item"'>
  <script type="text/javascript">
    //<![CDATA[
    document.addEventListener("DOMContentLoaded", function () {
      const postBody = document.querySelector('.post-body');
      if (!postBody) return;

      const headings = postBody.querySelectorAll('h2, h3');
      if (headings.length < 2) return;

      let tocHtml = `
        <div class="custom-toc">
          <button class="toc-toggle-btn" onclick="this.nextElementSibling.classList.toggle('show');">
            📑 সূচিপত্র দেখুন / লুকান
          </button>
          <div class="toc-content">
            <ul>
      `;

      headings.forEach((heading, index) => {
        const tagName = heading.tagName.toLowerCase();
        const id = 'toc-heading-' + index;
        heading.id = id;
        tocHtml += `<li class="${tagName}"><a href="#${id}">${heading.innerText}</a></li>`;
      });

      tocHtml += `
            </ul>
          </div>
        </div>
      `;

      const firstHeading = postBody.querySelector('h2, h3');
      if (firstHeading) {
        const tocContainer = document.createElement('div');
        tocContainer.innerHTML = tocHtml;
        firstHeading.insertAdjacentElement('afterend', tocContainer);
      }
    });
    //]]>
  </script>
</b:if>

📝 কিভাবে টেস্ট করবেন?

  • নতুন পোস্ট লিখুন
  • একাধিক <h2> এবং <h3> হেডিং যুক্ত করুন যেমন:


<h2>ভূমিকা</h2>

<p>...কিছু লেখা...</p>

<h2>অধ্যায় ১</h2>

<h3>উপ অধ্যায় ১.১</h3>

<h3>উপ অধ্যায় ১.২</h3>

<h2>উপসংহার</h2>

  • পোস্টটি প্রিভিউ দিন
  • আপনি দেখবেন TOC প্রথম <h2> এর পরেই এসেছে এবং তা টগলযোগ্য

Blogger-এ ভাঁজযোগ্য TOC যুক্ত করা এখন আর কঠিন কিছু নয়।


Next Post Previous Post
No Comment
Add Comment
comment url