কিভাবে টেবিল অফ কন্টেন্ট (TOC) ব্লগারে যোগ করতে হয়? । How to add Table of Content in Blogger

Table of Content:

কিভাবে blogger এ Table of Content যোগ করতে হয়?

১। প্রথমে ব্লগারে log in কর।

২। এবার "template" or "Theme" অপশানটা সিলেক্ট কর এবং "Customize" অপশান থেকে "Edit HTML" অপশানটাতে ক্লিক কর।

৩। এবার Ctrl + F কি চাপ দিতে হবে এবং সেখানে একটা search অপশান আসবে। সার্চ অপশানে </head> এই লেখাটা লিখে সার্চ করতে হবে এবং </head> ট্যাগের উপরে নিচের script লেখাটাএড করে দিতে হবে।

<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>

ভালভাবে বুঝতে নিচের চিত্রটি দেখ

৪। এখন একই ভাবে ]]></b:skin> এই লেখাটা সার্চ করতে হবে এবং ]]></b:skin> এর উপরে নিচের CSS লেখাটা এড করতে হবে

.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}

আরো ভালভাবে বোঝার জন্য নিচের চিত্রটি দেখ

৫। সর্বশেষে একইভাবে <data:post.body/> এই লেখাটা সার্চ করে বের করে বের করতে হবে এবং <data:post.body/> এর পরিবর্তে নিচের লেখাটা পেষ্ট করে দিতে হবে। Note: <data:post.body/> এই লেখাটা দুই জায়গায় বা ক্ষেত্র বিশেষ আরো বেশি জায়গায় লেখা থাকতে পারে। যত জায়গায় লেখা থাকবে সব জায়গায় <data:post.body/> এই লেখার পরিবর্তে নিচের লেখাটা পেষ্ট করে দিতে হবে।

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

ভালভাবে বোঝার জন্য নিচের চিত্রটা দেখ

৬। আমাদের HTML এডিটিং করার কাজ শেষ। এবার আমাদেরকে HTML ফাইলটা সেইভ করে বের হয়ে আসতে হবে।

কিভাবে Table of Content কে ব্লগে show করাতে হবে?

১। যাতে করে Table of Content সিস্টেমটি তোমার post or article এ এড হয় সেজন্য প্রথমে তোমাকে Compose view থেকে HTML View মোডে switch করতে হবে। (Step 1)

২। এখন পুরা HTML ফাইলটাকে এলাইনমেন্ট করতে হবে। এলাইনমেন্ট করতে তিনদাগ মেনুতে চাপ দিতে হবে। (Step 2)

৩। এবার একেবারের প্রথম paragraph অথবা Heading (<h2>) এর উপরে নিচের কোডটি লিখতে হবে

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

ভালভাবে বোঝার জন্য নিচের চিত্রটি দেখ

কিভাবে Table of Content ব্লগে activate করতে হবে?

১। Table of Content plugin activate করতে নিচের script code টি সবার শেষে পেষ্ট করে দিতে হবে।

<script>mbtTOC();</script>

২। এখন আর্টিকেলটি post করে দিলেই BOOM!

ভালভাবে বোঝার জন্য নিচের চিত্রটি দেখ

সেট আপ করার ভিডিও