Split post

হ্যালো ব্লগার্স! আজকে আপনাদের জন্য নিয়ে আসলাম একটি গুরুত্বপূর্ণ ব্লগার উইজেট টেবিল অফ কন্টেন্ট বা TOC Widget. বেশ কয়েকটি স্টেপ ফলো করে আপনারা খুব সহজেই আপনার ব্লগার থিমে এই উইজেট/প্লাগিনটি ইনস্টল করতে পারবেন। এবং এটি ব্যবহার করাও খুব সহজ। তাহলে আর দেরি না করে চলুন দেখানো যাক এটি দেখতে কেমন হবে, সুবিধা-অসুবিধা এবং ইন্সটল প্রসেস।

দেখতে কেমন?

নিচে আমার ডিজাইন করা এই টেবিল অফ কন্টেটের একটি স্ক্রিনশট যুক্ত করে দিলাম। আপনারা চাইলে কাষ্টম সিএসএস ব্যবহার করে লুক চেঞ্জ করতে পারবেন।

সুবিধা ও অসুবিধা

এই টেবিল অফ কন্টেন্ট উইজেট ব্যবহার করে আপনি বেশ কিছু সুবিধা পাবেন। ওয়ার্ডপ্রেস ইউজাররাও টেবিল অফ কন্টেন্ট প্লাগিন ব্যবহার করে এই সুবিধা ভোগ করতে পারেন। তবে ব্লগারে এমন কোনো রেডিমেড প্লাগিন নেই তাই আমরা যারা ব্লগার ইউজ করি তাদের প্রয়োজন মতো কাষ্টম টেবিল অফ কন্টেন্ট তৈরি করে নিতে হয়। তো, আমার প্রয়োজন মতো আমি এই উইজেটটি কোড করেছি। অসুবিধা বলতে আমার কাছে তেমন কোনো অসুবিধা নজরে পড়েনি, যদি আপনাদের ব্যবহারের সময় কোনো অসুবিধা লক্ষ করেন তাহলে কমেন্টে জানাবেন আমি সেই অনুযায়ী কোড মোডিফাই করে আপডেট করে দিবো আশা করি। সুবিধার কথা বলতে এটি মাত্র অল্প কয়েক লাইন জাভাস্ক্রিপ্ট কোড দিয়ে তৈরি, যা সরাসরি মূল থিমে থাকবে তাই আপনাদের সাইটের লোডিং স্পিডে কোনো প্রভাব ফেলবে না। এই টেবিল অফ কন্টেন্ট উইজেটটি বাংলা ব্লগেও সাপোর্ট করবে, এবং এর সিরিয়ালও বাংলা সংখ্যায়। ফলে দেখতে সুন্দর লাগবে আর সার্চ ইঞ্জিনেও বাড়তি সুবিধা পাবেন। তাছাড়া পাঠক আপনার পুরো পোষ্টের সম্পর্কে ভালো ধারণা পাবে এটি দেখে। কাজেই আপনি যদি প্রোফেশনাল ব্লগার হোন এবং মোটামুটি ভালো লেন্থের এসইও ফ্রেন্ডলি আর্টিকেল লিখেন তাহলে অবশ্যই টেবিল অফ কন্টেট উইজেট ব্যবহার করবেন।

ফিচার সমূহ

একনজরে এই উইজেটটিতে আমি যেসব ফিচার যুক্ত করেছি তা আপনাদের দেখাচ্ছি, আপনাদের যদি আরও কোনো আইডিয়া থাকে অবশ্যই কমেন্টে জানাবেন।

1. ইনস্টল প্রসেস এবং ব্যবহার খুবই সোজা, যারা কোডিং পারেন না আশা করা যায় তারাও এই পোষ্ট অনুসরণ করে খুব সহজে ইনস্টল ও ব্যবহার করতে পারবেন।
2. এই উইজেট বা প্লাগিনটি ভ্যানিলা জাভাস্ক্রিপ্টে লিখা অর্থাৎ কোনো ফ্রেমওয়ার্ক ছাড়াই তৈরি করা হয়েছে তাই জেকুয়েরি বা এক্সট্রা কোনো ফ্রেমওয়ার্ক ব্যবহার করতে হবে না। আর এছাড়াও এতে কোনো রকমের এক্সটারনাল স্ক্রিপ্টও যুক্ত করা লাগছে না। আর আগেই বলেছি মাত্র অল্প কয়েক লাইনের কোড দিয়ে তৈরি তাও মিনিমাইজ করে দিচ্ছি আপনাদের জন্য, তাই আশা করি লোডিং স্পিডে কোনো রকম প্রভাব ফেলবে না।
3. যেহুতু এই প্লাগিন আপনার আর্টিকেলের গুরুত্বপূর্ণ অংশগুলোকে অটোমেটিক হাইপারলিংক করে তাই, সার্চ ইঞ্জিনকে আপনার পেজের কন্টেটের সম্পর্কে ভালো ধারণা দিতে সক্ষম।
4. আপনার বাংলা ব্লগে এটি ব্যবহার করতে পারবেন। এতে কন্টেন্ট লিষ্টটি বাংলায় নাম্বার করা রয়েছে, এমনকি এতে নেস্টেড লিষ্টও তৈরি করতে পারবেন।

এসইও এডভান্টেজ

ব্লগার টেবিল অফ কন্টেন্ট প্লাগিনের সবচেয়ে বড় এডভান্টেজ এর এসইওতে প্রভাব। তবে এই সুবিধা পেতে আপনাকে এসইও ফ্রেন্ডলি আর্টিকেল কিভাবে লিখতে হয় সেটাও জানতে হবে। উদাহরণস্বরূপ আমার এই পোষ্টটিকেই ধরুন, এই পোষ্টের শুরুতে পোষ্টে কি আছে তার ধারণা দিলাম, তারপর আমার এই পোষ্ট থেকে আপনি কি পাচ্ছেন তা দেখালাম। এরপরের ভাগে আমি ফিচার্স, ব্যবহার ইত্যাদি ভাগে ভাগে দেখাচ্ছি এবং প্রত্যেক ভাগেই আলাদা করে সাব হেডিং/টাইটেল ব্যবহার করেছি। ফলে সার্চ ইঞ্জিনে র‍্যাংকিং পেজে রিচ স্নিপেটের নিচে এই সাব সেকশন গুলোও উল্লেখ হবে। যেমন নিচের ইমেজটিতে দেখুন,



মোবাইল ও পিসিতে সিলেক্টেড কিওয়ার্ডের জন্য আমার রেজাল্টের নিচে টাইটেলের সাথে রিলেটেড পোষ্টের সেকশন সরাসরি হাইপার লিংক হচ্ছে।

কিভাবে কাজ করে?

আমার এই প্লাগিনে যে অটোমেটিক টেবিল অফ কন্টেন্ট জেনারেট হয় তা চাইলে আপনি ম্যানুয়ালিও কোনো জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া তৈরি করতে পারবেন। মূলত এই জাভাস্ক্রিপ্ট প্লাগিন পোষ্টে থাকা সকল হেডিং ট্যাগ খুঁজে বের করে তাতে হেডিং ট্যাগ থেকে কিওয়ার্ড নিয়ে তা ডম ম্যানিপুলেশন (DOM Manupulation) এর সাহায্যে হেডিং ট্যাগ গুলোতে আইডি যুক্ত করে। ফলে আপনি এইচটিএমএল হাইপারলিংক ব্যবহার করে সরাসরি ঐ আইডিতে জাম্প করতে পারবেন। যেমন নিচের উদাহরণটিতে আমি করেছি-



এইখানে যে জাম্প টু কন্টেট টাইপের সেকশন তৈরি করা হয়েছে তা অটোমেটিক্যালি তৈরি করা যাচ্ছে এই জাভাস্ক্রিপ্ট প্লাগিনের সাহায্যে।

ইনস্টল প্রক্রিয়া

সবার আগে আপনার ব্লগার থিমটির একটি ব্যাকআপ নিয়ে নিন। কিভাবে ব্লগার থিম ইনস্টল/রিস্টোর করবেন, ব্যাকআপ নিবেন তা নিয়ে এই ব্লগে ইতিমধ্যে পোষ্ট করা হয়েছে চাইলে ব্লগার বিভাগ থেকে দেখে আসতে পারেন।

এবার ব্লগার ড্যাশবোর্ড Theme থেকে EDIT HTML মুডে যান, সেখানে আপনার থিমে </head> এর পূর্বে নিচের বক্স হতে জাভাস্ক্রিপ্ট কোডটি কপি-পেষ্ট করুন।

<script type='text/javascript'>
//<![CDATA[

// Table Of Contents By SR
function tlbdTOC() {
  var a = 1,
    b = 0,
    c = "";
 (document.getElementById("grab-toc").innerHTML = document.getElementById("grab-toc").innerHTML.replace(/<h([\d]).*?>(\n.*?|.*?)<\/h([\d]).*?>/gi,
	function (d, e, f, g) {
   return e != g ? d : (e > a ? (c += new Array(e - a + 1).join("<ol class='point" + a + "'>")) : e < a && (c += new Array(a - e + 1).join("</ol></li>")), (b += 1),
   (c += '<li><a href="#' +
              f.replace(/[]/gi, " ").trim().replace(/\s/g, "_") + '" title="' + f + '">' + f + "</a>"),
   (a = parseInt(e)), "<h" + e + " id='" +
              f.replace(/[]/gi, " ").trim().replace(/\s/g, "_") + "'>" + f + "</h" + g + ">");
   }
 )),
 a && (c += new Array(a + 1).join("</ol>")),
 (document.getElementById("post-TOC").innerHTML += c);
}
//]]>
</script>

এবার ]]></b:skin> বা </style> এর পূর্বে নিচের বক্স হতে সিএসএস কোডগুলো কপি-পেষ্ট করুন

* {
  scroll-behavior: smooth;
}

.toc-wrap {
  padding: 12px;
  margin: 15px;
  max-width: 380px;
  background: #14694580;
  border: 2px dashed #167555;
  border-radius: 4px;
}
.toc-wrap ol {
  list-style-type: bengali;
  margin: 0 0 0 30px;
}
.toc-wrap li {
  border-left: 1px dotted red;
  line-height: 2em;
}
.toc-wrap li:before {
  width: 1.8em;
  height: 0.9em;
  vertical-align: top;
  border-bottom: 1px dotted red;
  content: "";
  display: inline-block;
}
.toc-wrap li:last-child {
  border-left: none;
}
.toc-wrap li:last-child:before {
  border-left: 1px dotted red;
}
.toc-h {
  font-size: 18px;
  border-bottom: 1px dotted blue;
}
.toc-h:before {
  content: " \2261";
  font-weight: bold;
  display: inline-block;
  height: 16px;
  margin: 0 10px 0 0;
  color: blue;
}

এখন আপনার থিমে <data:post.body/> এই কোডটি খুজে বের করুন। এটি এক বা একাধিকবার থাকতে পারে, তার সাথে নিচের কোডডটি রিপ্লেস করুন

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

এবার আপনার থিমের একদম নিচে </body> এর পূর্বে নিচের বক্স হতে জাভাস্ক্রিপ্ট কোডটি কপি-পেষ্ট করুন।

<script>tlbdTOC();</script>

আশাকরি আপনি সফলভালে স্ক্রিপ্টটি ইনস্টল করতে পেরেছেন। এবার সবশেষে আপনার পোষ্টের যেখানে টেবিল অফ কন্টেন্ট দেখাতে চান সেখানে নিচের বক্স হতে HTML মার্কআপটি বসান। ভালো হয় যদি আপনি প্রথম প্যারা এর পর কোডটি বসান। যেসকল পোষ্টে টেবিল অফ কন্টেন্টের প্রয়োজন নেই সেসব পোষ্টে মার্কআপটি বসানোর দরকার নেই।

<span class='toc-h'>এই পোষ্টে থাকছে</span>
<div id='post-TOC'>

পোস্টটি কেমন লেগেছে তা কমেন্ট করে জানাবেন। আপনাদের লিখা টিউটোরিয়াল আমাদের ব্লগে পাবলিশ করতে আমাদের ফেসবুক পেজে যোগাযোগ করুন। এছাড়াও যুক্ত থাকতে পারেন আমাদের টেলিগ্রাম চ্যানেলে। সাথে থাকুন টেক লিজন বিডির