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

 আপনি কি চান আপনার 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 যুক্ত করা এখন আর কঠিন কিছু নয়।