আসসালামুয়ালাইকুম বন্ধুরা আশাকরি ভালোই আছেন ।
আমরা যারা wordpress ব্যবহার করি তারা খুব সহজে free প্লাগিন দিয়ে পোস্টের জন্যে table of content বা TOC এ্যাড করতে পারি। কিন্তু ব্লগার এর ক্ষেত্রে বিষয় টা এমন সহজ না। কারণ, ব্লগার এ আপনে কোনো built in প্লাগিন ব্যবহার করতে পারবেন না , বা blogger এ সেই সিস্টেম নেই।
তাই আজকে আমি দেখাবো কিভাবে ব্লগার এর ব্লগ সাইটে পোস্টে TOC যোগ করবেন।
কাজ শুরু করার আগে কিছু প্রশ্ন উত্তর জেনে নেই।
জানলে স্কিপ করুন।
TOC কী?
TOC বা Table of Contents মানে হলো “সূচিপত্র”। এটা একটি তালিকা, যেখানে একটি লেখা বা ব্লগ পোস্টে থাকা গুরুত্বপূর্ণ শিরোনাম বা অংশগুলোর নাম সাজানো থাকে। যেমন বইয়ের শুরুতে সূচিপত্র থাকে, তেমনই একটি ব্লগ পোস্টে TOC থাকলে পাঠক আগে থেকেই বুঝতে পারে — এই লেখায় কোন কোন বিষয় আলোচনা করা হয়েছে।
TOC কেনো প্রয়োজন?
TOC পাঠকের জন্য লেখাটি পড়া আরও সহজ করে তোলে। ধরো, তুমি একটা বড় পোস্ট পড়ছো, এখন তুমি চাইছো শুধু একটি নির্দিষ্ট অংশ পড়তে। TOC থাকলে তুমি সরাসরি ওই অংশে চলে যেতে পারো। এতে সময় বাঁচে, ধৈর্য বাড়ে, আর লেখাটি আরও গুছিয়ে ও প্রফেশনাল দেখায়।
আরও ভালো দিক হলো, TOC গুগলের চোখেও ভালো ,কারণ এটা ওয়েবসাইটের কনটেন্ট স্ট্রাকচার পরিষ্কার করে তোলে। ফলে SEO তে সহায়তা করে এবং পেজ র্যাংক বাড়ে।
কি ভাবে toc যোগ করবেন
প্রথমে blogger.com এর যে সাইটে toc যোগ করতে চান সেই সাইটে প্রবেশ করুন।
তারপর মেনু থেকে নিচের ছবির মতো theme অপশন এ ক্লিক করুন
তারপর আবার নিচের ছবির মত আইকন টিতে ক্লিক করে Edit HTML এ ক্লিক করুন।
Blogger theme এডিটর অপশন ওপেন হলে body ক্লোজিং ট্যাগ খুঁজে, সেই body ক্লোজিং ট্যাগের আগে নিচের লিংক থেকে কপি করা code টি paste করে theme আপডেট করে নিন।
এখান থেকে কোড কপি করুন
After copied remove extra /script
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
const postBody = document.querySelector(".post-body");
if (!postBody) return;
const headings = postBody.querySelectorAll("h2, h3, h4");
if (headings.length === 0) return;
const tocWrapper = document.createElement("div");
tocWrapper.className = "toc-wrapper max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-xl p-4 mb-6 border dark:border-gray-700";
tocWrapper.innerHTML = `
`;
postBody.insertBefore(tocWrapper, postBody.firstChild);
const tocList = tocWrapper.querySelector("ul");
let count = 1;
headings.forEach((heading, index) => {
if (!heading.id) {
heading.id = `heading-${index + 1}`;
}
const tagName = heading.tagName.toLowerCase();
const indent = tagName === "h3" ? "ml-4" : tagName === "h4" ? "ml-8" : "";
const number = `${count}.`;
const listItem = document.createElement("li");
listItem.className = `${indent}`;
listItem.innerHTML = `${number} ${heading.innerText}`;
tocList.appendChild(listItem);
count++;
});
document.getElementById("toggleToc").addEventListener("click", () => {
const toc = document.getElementById("tocContent");
toc.classList.toggle("hidden");
});
// Smooth scroll
tocList.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();
const target = document.getElementById(this.getAttribute("href").substring(1));
if (target) {
window.scrollTo({
top: target.offsetTop - 80,
behavior: "smooth"
});
}
});
});
// Optional: ScrollSpy
window.addEventListener("scroll", () => {
let scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
headings.forEach((heading, i) => {
if (heading.offsetTop - 100 a.classList.remove("font-bold", "text-blue-600"));
tocList.querySelectorAll("a")[i].classList.add("font-bold", "text-blue-600");
}
});
});
});
//]]>
*script>
Remove * mark
এই পর্যন্ত হয়ে গেলে আপনার কাজ সম্পুর্ণ।
এবার আসুন জেনে নেওয়া যাক এই
TOC টি কি ভাবে কাজ করবে এবং এর ফিচারগুলি কি কি
1. স্বয়ংক্রিয় Heading Detection
এই টোক সিস্টেমটি স্বয়ংক্রিয়ভাবে পোস্টের ভিতরের <h2>, <h3>, এবং <h4> হেডিংগুলো চিনে নেয় এবং একটি টেবিল অফ কনটেন্টস তৈরি করে। এতে করে ম্যানুয়ালি কিছু করার দরকার পড়ে না।
2. রেসপনসিভ ডিজাইন
টোক সিস্টেমটি মোবাইল ও ডেস্কটপ উভয় ডিভাইসে সুন্দরভাবে কাজ করে। মোবাইলে এটি অ্যাকর্ডিয়ন বা ফ্লোটিং বাটনের মতো, আর ডেস্কটপে সাইডবার হিসেবে দেখায়।
3. টগলযোগ্য (Collapsible)
একটি “সূচিপত্র দেখুন” বাটন আছে যেটিতে ক্লিক করলে টোক অংশটি খুলবে বা বন্ধ হবে। এটি ব্যবহারকারীদের পছন্দ অনুযায়ী কনটেন্ট হাইড/শো করতে সুবিধা দেয়।
4. স্মুথ স্ক্রলিং
টোকের কোনো আইটেমে ক্লিক করলে সংশ্লিষ্ট হেডিংয়ে স্ক্রল হয় স্মুথ অ্যানিমেশনের মাধ্যমে, যা ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করে।
5. ScrollSpy হাইলাইট
যখন আপনি কোনো সেকশনে স্ক্রল করেন, তখন টোকের সেই অংশটি হাইলাইট হয়ে বোঝায় যে আপনি এখন কোন অংশ পড়ছেন। এটি নেভিগেশন সহজ করে তোলে।
6. ডার্ক মোড সাপোর্ট
যদি আপনার ব্লগে ডার্ক মোড চালু থাকে, তাহলে টোক ডিজাইন অটো সেই মোডে ফিট হয়ে যাবে Tailwind CSS এর dark: ক্লাস ব্যবহার করে।
7. SEO ফ্রেন্ডলি অ্যাংকর লিংক
সব হেডিংয়ের জন্য ইউনিক id ব্যবহার করা হয়, যাতে করে টোকের লিংকগুলো SEO ফ্রেন্ডলি হয় এবং Google সহজে কনটেন্ট বুঝতে পারে।
8. অ্যানিমেটেড ট্রানজিশন
টোকের বিভিন্ন অংশে ক্লিক বা শো/হাইড করার সময় Tailwind CSS-এর ট্রানজিশন ক্লাস দিয়ে সুন্দর অ্যানিমেশন দেখানো হয়।
9. হেডিং নাম্বারিং (ঐচ্ছিক)
প্রতিটি হেডিং নাম্বার সহ প্রদর্শন করা যায়, যেমনঃ 1.0, 1.1 ইত্যাদি, যা কনটেন্টকে আরও গুছানো করে তোলে।
10. সহজ ইনস্টলেশন
এই কোডটি Blogger থিমে কেবল </body> এর আগে পেস্ট করলেই কাজ করবে। আলাদা কোনো স্ক্রিপ্ট ইনস্টল বা প্লাগইন দরকার নেই।
11. পোস্ট নির্দিষ্ট নিয়ন্ত্রণ
যদি আপনি চান কোনো নির্দিষ্ট পোস্টে টোক না দেখাতে, তাহলে আপনি post-toc ক্লাসটি বাদ দিয়ে দিতে পারেন। এর মাধ্যমে আপনি কাস্টম কন্ট্রোল পাবেন।
Demo SS
এই ছিলো আমার আজকের blogger toc নিয়ে পোস্ট।
📌 বন্ধুকে নিয়ে সেরা ক্যাপশন খুঁজছেন?
তাহলে এখনই দেখে নিন আমাদের বিশেষভাবে তৈরি করা বন্ধু নিয়ে বাংলা ক্যাপশন কালেকশন —
যেখানে মজার, আবেগঘন আর ইনস্টাগ্রাম-ফ্রেন্ডলি সব ক্যাপশন একসাথে পাবেন!
তো বন্ধুরা আজকের মতো এখানেই পোস্টটি শেষ করতেছি, ভালো থাকবেন সুস্থ থাকবেন, আর কোথাও বুঝতে সমস্যা হলে কমেন্টে জানাবেন।