How to Create A Table Of Content On Blogger? - কিভাবে ব্লগারে কন্টেন্ট এর টেবিল তৈরি করবেন?

আসসালামু আলাইকুম, আমি আজকে যে বিষয়টি নিয়ে আলোচনা করব সেই বিষয়টি হচ্ছে কিভাবে আপনি আপনার ব্লগ ওয়েবসাইটে Table of Content অর্থাৎ কন্টেন্ট এর টেবিল তৈরি করবেন। 

তো কন্টেন্ট শুরু করার আগে এই Table of Content সম্পর্কে বিস্তারিত আলোচনা করি। 

Table of Contents কি?

আপনি অনেক সাইটে পোষ্টের উপরে এই উক্ত কন্টেন্ট এর একটি টেবিল থাকে। যেখানে পোষ্টে থাকা সবগুলো টপিক এর নাম থাকে আপনি যেই টপিকটি পড়তে ইচ্ছুক সেই টপিকটিতে ক্লিক করলেই সাথে সাথে আপনাকে সেই টপিকটির কাছে নিয়ে যাওয়া হয়। 

ব্যবহারের সুবিধা

আপনি যদি আপনার ওয়েবসাইটে আপনার কন্টেন্ট এর একটি টেবিল তৈরি করে দেন তাহলে একজন ভিজিটর খুব সহজেই বুঝতে পারবে যে আপনার তৈরি পোষ্টে কোন কোন টপিক নিয়ে আলোচনা করা হয়েছে।  এবং ভিজিটর যে টপিক টি খুজতেছে সেই টপিকটি যদি আপনার সেই পোষ্টে থাকে তাহলে ভিজিটর একটু সময় লাগলেও আপনার পোষ্টটি গুরুত্ব সহকারে পড়বে। 

এছাড়াও আস্তে আস্তে যখন আপনার সাইটের ট্রাফিক বাড়বে তখন গুগুল বুঝবে আপনার সাইটের পোষ্টটি আসলেই গুরুত্বপূর্ণ ফলে গুগুল আপনার সাইটের সেই পোষ্টটিকে উপরের দিকে নিয়ে যাবে অর্থাৎ আপনার সেই পোষ্টটি খুব সহজেই গুগুলে রেংক হয়ে যাবে। এবার আসা যাক মূল কথায়। 

মূলকথাঃ

এখন প্রশ্ন হচ্ছে আপনি কিভাবে আপনার ব্লগ ওয়েবসাইটে এই কন্টেন্ট টেবিল তৈরি করবেন। সেই বিষয়ে বিস্তারিত নিচে আলোচনা করব এবং পোষ্টের শেষে একটি ভিডিও দিয়ে রেখেছি আপনি যদি এই পোষ্টটি পড়ে কিছু না বুঝেন তাহলে আপনি পোষ্টের শেষে থাকা ভিডিওটি দেখে নিতে পারেন।

তাহলে চলুন শুরু করি আজকের মূল্যবান টপিক How to Create A Table Of Content On Blogger?

ধাপ ১:-

প্রথমে আপনি আপনার ব্লগ ওয়েবসাইটে প্রবেশ করুন এবং Login করুন। 

এবার বাম পাশে থাকা ৩ দাগ ওলা মেনো বাটনে ক্লিক করুন। 

এবার এই মেনো অপশনের নিচের দিকে থাকা Theme নামে যে অপশনটি আছে সেখানে ক্লিক করুন।

এবার আপনি আপনার স্কিনে থাকা অনেকগুলো অপশনের মধ্যে আপনি আপনার সাইটে ব্যাবহার করা থিমটির পাশে Customised নামে একটি অপশন আছে? এর পাশেই ছোট্ট একটি মেনো বাটন আছে এবার আপনি সেখানে ক্লিক করুন।

এবার আপনি যে মেনো অপশন দেখতে পাচ্ছেন সেই অপশনগুলো থেকে Edit HTML নামে যে অপশনটি আছে সেখানে ক্লিক করুন।

এবার আপনি কন্ট্রোল + F চাপুন এবং সার্চ অংশে <hade> লেখাটি লিখে ইন্টার প্রেস করুন। (মোবাইল হলে খুঁজে বের করুন এই লেখাটি আপনার থিমের ১ থেকে ১৫ নম্বর লাইনের ভিতরে থাকবে)

এবার আপনি আপনার মাউস দ্বারা এই <hade> এর শেষে ক্লিক করুন এবং ইন্টার চাপুন (মোবাইল হলে পোস্টের শেষে থাকা ভিডিওটি দেখুন) এবং নিচে থাকা css কোড টি প্রেস করুন।

Css Code

<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>

ধাপ -২

এখন আবার আগের মতো কন্ট্রোল + F চাপুন এবং সার্চ অংশে ]]><b:skin> লেখাটি লিখে ইন্টার প্রেস করুন। (মোবাইল হলে খুঁজে বের করুন এই লেখাটি আপনার থিমের ১০০০ থেকে ১৫০০ নম্বর লাইনের ভিতরে থাকবে)

এবার আপনি আপনার মাউস দ্বারা এই ]]><b:skin> এর শুরুতে ক্লিক করুন এবং দুইবার ইন্টার চাপুন (মোবাইল হলে পোস্টের শেষে থাকা ভিডিওটি দেখুন) এবং নিচে থাকা css কোড টি প্রেস করুন।

Css Code

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}

ধাপ -৩

এখন আবার আগের মতো কন্ট্রোল + F চাপুন এবং সার্চ অংশে <data:post.body/> লেখাটি লিখে ইন্টার প্রেস করুন। (মোবাইল হলে খুঁজে বের করুন এই লেখাটি আপনার থিমের ২০০০ থেকে ৩৫০০ নম্বর লাইনের ভিতরে থাকবে) 

এবার আপনি আপনার মাউস দ্বারা এই <data:post.body/> কোডটি মার্ক করুন এবং এটি রিমুভ করুন(মোবাইল হলে পোস্টের শেষে থাকা ভিডিওটি দেখুন) এবং নিচে থাকা css কোড টি প্রেস করুন।

Css Code

<div id="post-toc"><data:post.body/></div>

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

আসল কাজঃ

এতক্ষণ তো বাহিরের কাজ কমপ্লিট করেছেন এবার ভেতরের কাজটিও কমপ্লিট করুন। 

ধাপ - ১

আপনি আপনার পোস্টের যেই যায়গায় এই কন্টেন্ট এর টেবিলটি বসাতে চান সেখানে নিচে থাকা css code টি বসিয়ে দিন (প্রতিটি পোষ্টে বসাতে হবে) (অবশ্যই HTML ভিউ করে নিবেন আর না বুঝলে ভিডিওটি দেখুন)

Css Code

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="mbtTOC"></ol> 
    </div>

ধাপ - ২

এবার আপনি আপনার পোস্টের একদম শেষে (প্রতিটি পোষ্টে বসাতে হবে) (অবশ্যই HTML ভিউ করে নিবেন আর না বুঝলে ভিডিওটি দেখুন) নিচে থাকা css code টি বসিয়ে দিন।

Css Code

<script>mbtTOC();</script>

কি অসাধারণ চমক, তাইনা কাজ কমপ্লিট হলে এবার আপনি আপনার সাইটটিতে প্রবেশ করে একটি পোষ্ট ওপেন করুন এবং দেখুন টেবিল অফ কন্টেন্ট এর চমক। 

শেষকথাঃ আমি যতটুকু পেরেছি আপনাকে বোঝানোর চেষ্টা করেছি কিন্তু কতটুকু বুঝাতে সক্ষম হয়েছি জানিনা। 

এতক্ষণ সাথে থাকার জন্য অসংখ্য ধন্যবাদ।