Add Automatic Table Content on Your Blogger Website

Ads by Eonads

টেবিল কনটেন্ট কেনো প্রয়োজন

টেবিল কনটেন্ট আমাদের কনটেন্ট গুলোকে সাজিয়ে রাখে। আমরা যখন বড় কোনো পোষ্ট লিখি তখন তার বেশ কিছু অংশ থাকে। এই অংশ গুলোকে টেবিল কনটেন্ট সূচীপত্র আকারে সাজিয়ে রাখে। তাই ভিজিটরেরা খুব সহজে তার কাঙ্খিত অংশ গুলোকে পড়ে নিতে পারে, অথবা জেনে নিতে পারে আপনি কোন কোন বিষয়ে পোস্ট লিখেছেন বা আপনার পোষ্টে কি কি বিষয় উল্লেখ করেছেন। এটি Google search console এর জন্য বেশ উপকারি, অর্থাৎ টেবিল কনটেন্ট ব্যাবহার করলে আপনার পোষ্ট Google-এ rank করার সম্ভবনা সবচেয়ে বেশি থাকে।

টেবিল কনটেন্ট কিভাবে যুক্ত করবেন

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

১ম ধাপ

প্রথমে নিচের কোডটি copy করুন তারপর আপনার ব্লগারের theme সেকশনে গিয়ে edit html এ ক্লিক করুন। তারপর স্কল করে একদম নিচের দিকে এসে </body> এর উপরে কোডটি past করুন

<script async='async'> var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>➡️Table of Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}</script>

২য় ধাপ

নিচের কোডটি copy করুন তারপর ctrl + f এ ক্লিক করে </b:skin সার্চ করুন তারপর </b:skin এর উপরে কোডটি past করুন এবং Save করুন

/* TOC */ .table-of-contents{flex:auto;background:#f1c4c4;font-size:14px;padding:11px;border-radius:10px;margin:8px 0 30px 0} .table-of-contents li{margin:0 0 0.25em 0} .table-of-contents a{color:#2a5365} .table-of-contents h4{margin:0;cursor:pointer} .dark .table-of-contents{background:#222;}

৩য় ধাপ

নিচের কোডটি copy করুন তারপর পোষ্টের যেইখানে টেবিল কনটেন্ট দেখাতে চান সেইখানে কোডটি past করুন, আর যেই বিষয় গুলোকে টেবিলে দেখাতে চান সেইগুলোকে header এর মধ্যে যেমনঃ h2, h3, h4 and h5 এর মধ্যে লিখুন এবং আপডেট করুন

<div class="toc-pro"></div>

preview

সমস্যা এবং সমাধান

আপনারা ছোট্ট একটা সমস্যা লক্ষ করছেন যে YOU MAY LIKE এইটা অতিরিক্ত আসছে আপনি যদি কোডিং সম্পর্কে ভালো বোঝেন অথবা থিমের ব্যাকাপ রেখে ২ টি ধাপে কাজটি করতে পারেন।

১ম ধাপ

আপনার যে কোনো একটি পোস্ট view করে করে পোষ্টের div class অথবা div id টি দেখে নিন

এখানে আমরা পোষ্টের class post-body দেখতে পাচ্ছি আপনারা যেটি দেখতে পাবেন সেটি কপি করুন

২য় ধাপ

ব্লগারের theme সেকশনে গিয়ে edit html এ ক্লিক করুন। তারপর স্কল করে একদম নিচের দিকে এসে </body> এর উপরে আপনার past করা javaScript এর মধ্যে article এর জায়গায় কোডটি past করুন যেহেতু এটি class তাই এর আগে ডট দিন, আইডি হলে # দিবেন তারপরং Save করুন

preview

এখন দেখতে পাচ্ছেন অতিরিক্ত অপশন টি আর নেই অর্থাৎ সমস্যাটি সমাধান হয়েছে এবং আমরা সফলভাবে automatic table content যুক্ত করতে পেরেছি।