ব্লগ পোস্টে Table of Contents যোগ করুন

একটি সাজানো গোছানো ব্লগে সহজে নেভিগেশন করতে টেবিল অফ কনটেন্ট (Table of Contents) গুরুত্বপূর্ন ভূমিকা পালন করে। আজকের এই আর্টিকেলে আমরা জানবো কিভাবে ব্লগার ও ওয়ার্ডপ্রেস সাইটে Table of Contents যোগ করতে হয়।

Table of Contents যোগ করুন

Table of Contents কি?

মূলত এটি হলো একটি টেবিল, যেখানে কনটেন্টগুলো সাজানো থাকে। এই টেবিলের মাধ্যমেই জানা যায় আর্টিকেলটা কি কি নিয়ে বা এক নজরে আর্টিকেলগুলোর মেইন টপিকগুলো সম্পর্কে জানা যায়। এছাড়াও দ্রুত টপিক এ যেতে সরাসরি সেই টপিকে নিয়ে যায় এই Table of Contents একটি ক্লিকের মাধ্যমেই।

Table of Contents এর সুবিধা

  • ব্লগের ভিজিটর সহজে কনটেন্ট ভিজিট করতে পারে
  • ব্লগপোস্টের মেইন টপিকগুলো সম্পর্কে ধারণা পাওয়া যায়
  • স্ক্রল না করে নির্দিষ্ট টপিকে এক ক্লিকেই যাওয়া যায়

আমরা মানুষ যেমন সাজানো গোছানো ও সহজে নেভিগেশন করা যায় এমন সাইটে স্বাচ্ছন্দ্যবোধ করি তেমনি সার্চ ইঞ্জিন গুলোও। Table of Contents এর সবথেকে বড় সুবিধা হলো এটা ব্লগপোস্টকে এসইও ফ্রেন্ডলী (SEO Friendly) করে তুলে। এর মাধ্যমে গুগলসহ অন্যান্য সার্চ ইঞ্জিন পোস্টের মেইন টপিকগুলো ধরতে পারে যা পোস্ট রেঙ্ক (Rank) করার ক্ষেত্রে অত্যন্ত জরুরি।

Table of contents যোগ করুন

ওয়ার্ডপ্রেস সাইটে Table of Contents যোগ করার পদ্ধতি

বরাবরের মতোই ওয়ার্ডপ্রেসে কিছু যোগ করা যায় খুব সহজেই প্লাগইন ব্যাবহার করার মাধ্যমে। প্রথমে আপনার ওয়ার্ডপ্রেস সাইটের ড্যাশবোর্ডে গিয়ে সার্চ করুন CM Table of Contents

Table of Contents যোগ করুন

সিম্পলি এই প্লাগিনটি ইনস্টল করে একটিভ করুন। এবার পোস্ট লিখার সময় একটি ব্লক নিয়ে টেবিল অফ কনটেন্ট বসিয়ে দিন; আরকি যে জায়গায় টেবিল অফ কনটেন্ট রাখতে চান, প্রথম প্যারাগ্রাফের পরে রাখাই বেস্ট বলে আমি মনে করি।

ব্লগার সাইটে Table of Contents যোগ করার পদ্ধতি

ব্লগার সাইটে যেহেতু কাস্টম কোনো প্লাগইন ব্যবহারের সুবিধা নাই এজন্য কিছু সহজ কোডিং (Js, CSS) গুলো সঠিকভাবে বসিয়ে টেবিল অফ কনটেন্ট যোগ করতে পারবেন। তবে কোডিং এর আগে অবশ্যই আপনার ব্লগার টেমপ্লেটটি ব্যাকআপ করে রাখবেন। নিচের নির্দেশনাগুলো ফলো করুন:

  • প্রথমেই আপনার টেমপ্লেটের একদম নিচে চলে যান বা </body> লিখে সার্চ করুন। এবার নিচের জাভাস্ক্রিপ্ট কপি করে </body> এর পরে বসিয়ে দিন।
<script async='async' defer='defer'>
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h6 onclick='toc()'>&#9778; Table of Content</h6><ul style='display:none'>&quot;;$(&quot;article h2, article h3, article h4, article h5&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;article h2, article h3, article h4, article h5&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}
</script>

এবার ]]></b:skin> লিখে সার্চ করুন আর নিচের CSS গুলো কপি করে ]]></b:skin> এর আগে বসিয়ে দিন। 

.table-of-contents{flex:auto;width:300px;background:#eee;font-size:16px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h6{margin:0;cursor:pointer}
]]></b:skin> খুঁজে না পেলে টেমপ্লেটের CSS অপশনে বসিয়ে দিন উল্লেখিত CSS ।
  • টেমপ্লেটে কোড বসানোর কাজ শেষ। এবার টেমপ্লেটটি সেভ করুন।
  • এবার আপনি যে পোস্টে Table of Contents দেখাতে চান সেই পোস্টে গিয়ে বা পোস্ট লিখার সময় HTML mode এ গিয়ে কাঙ্ক্ষিত জায়গায় (প্রথম প্যারাগ্রাফের পর) নিজের কোডটি বসিয়ে দিন।
<div class='toc-pro'></div>

আর হ্যা, পোস্টটিতে অবশ্যই হেডিং থাকতে হবে অর্থাৎ হেডিং, ম্যাজর হেডিং, সাব হেডিং, মাইনর হেডিং এগুলো থাকতে হবে। এবার আপনার পোস্টটি দেখুন! পোস্টে একটি Table of Contents দেখাচ্ছে!!

এভাবেই মূলত ব্লগ পোস্টে Table of Contents যোগ করা যায়। আর্টিকেল সম্পর্কে কোনো সমস্যা, পরামর্শ বা জিজ্ঞাসা থাকলে কমেন্ট করুন আর আমাদের ফেসবুক পেইজে লাইক দিন, ইউটিউব চ্যানেলে সাবসক্রাইব করুন। আর সোশ্যাল মিডিয়ায় পোস্টটি শেয়ার করুন।

আরও দেখুন:

Article Top Ads

Ad Middle Article 1

Ad Middle Article 2

Ads Under Articles