Blogger এ Table Of Contents (TOC) কিভাবে বসাতে পারবেন। বিস্তারিত জানুন..

 Table Of Contents (TOC) Blogger Post এ কিভাবে বসাবেন

    About Table Of Contents

    আপনি যদি ফ্রি Blogger ব্যবহার করে থাকেন এবং আপনি জানেন না যে কিভাবে Table Of Contents (TOC) বসাতে হয়। তাহলে আজকের এই প্রতিবেদনে আপনি Table Of Contents সম্পর্কে বিস্তারিত জানতে পারবেন। আমাদের মধ্যে ‌অনেকেই নতুন নতুন ব্লোগিং শুরু করে দুঃচিন্তায় পড়ে যায়, যে Table Of Contents,কি, Blogger Post এ Table Of Contents কিভাবে যুক্ত করবো, আসলে এ সব খুবই গুরুত্বপূর্ণ বিষয় একটা নতুন ব্লোগারের জন্য। আপনি যদি WordPress ব্যবহার করেন তাহলে এখানে খুব সহজেই Table Of Contents বসাতে পারবেন। কিন্তু Blogger এ html code এর সাহায্যে টেবিল অফ কনটেন্ট তৈরি করতে হবে। 
    Table of contents সর্বপ্রথম ব্যবহার করে ছিলেন “Pliny the Elder author” বই পড়ার সুবিধার্থে, তার পর এটা ব্লোগ পোস্ট এ ব্যবহার করা শুরু হয়। এটা ব্যবহার করার উদ্দেশ্য ছিল যারা পোস্টটি পড়বে তাদের সুবিধার্থে, কারন অনেক সময় দেখা যায় একটা পোস্ট ১০০০-৩০০০ হাজার সংখ্যার হয়ে থাকে কিন্তু পুরো পোস্টটি পড়া হয়তো সম্ভব নয়, সেই সময় Table Of Contents এর দ্বারা নির্দিষ্ট বিষয় টুকু পড়তে পারবেন। 

    Table of contents কি?

    আপনি যখন একটা ব্লোগ পোস্ট লেখেন এবং যত গুলো Headings ব্যবহার করেন, এই ব্যবহারিত সকল Headings গুলোর উপর ভিত্তি করে সর্ট লিঙ্ক তৈরি হয়। আপনি ইচ্ছে মতো একটা ব্লোগ পোস্ট এর যে কোনো অংশ পড়তে পারবেন। Table Of Contents এর সাহায্য নিয়ে। এছাড়া TOC ব্যবহার করলে Google এ আপনার পোস্ট খুব তারাতারি রেঙ্ক করে। এবং User Experience খুবই ভালো হয়।

    Blogger এ Table Of Contents (TOC) কিভাবে ব্যবহার করবেন?

    ব্লোগারে Table Of Contents add করার জন্য কিছু স্টেপ ফলো করতে হবে, যা নীচে দেখান হয়েছে…
    1. Go to Blogger Dashboard
    2. Go to Theme Option
    3. Select Edit HTML
    4. Add Code Between <Head> Section
    5. Add Code Above ]]></b:skin> Section
    6. Replace <data:post.body/> code
    7. Add Code in Post
    8. Add Code End of The Post

    Step-1: Go To Blogger Dashboard

    সর্বপ্রথমে ব্রাউজার ওপেন করুন এবং ব্লোগার সার্চ করে, ইমেল আইডি এবং পাসওয়ার্ড দিয়ে লগইন করে নিন।

    Table_Of_Contents(TOC)

    Step-2: Go To Theme

    এখন আপনাকে থিম এ ক্লিক করতে হবে।

    Table_Of_Contents(TOC)

    Step-3: Select Edit HTML

    এখানে Edit HTML এ ক্লিক করতে হবে। তার আগে Backup নিয়ে রাখবেন, যদি ভুল বসত কোনো সমস্যা হয় তখন Backup কাজে লাগবে।
    Table_Of_Contents(TOC)

    Step-4: Add Code Between <Head> Section

    এখানে আপনি প্রথমে সার্চ করুন <head> অথবা Ctrl+f press করলে সার্চ বক্স খুলবে এখানে <head> বসিয়ে ইন্টার প্রেস করুন। এবং নীচের এই Code Paste করেদিন <head> এর পর।

    Table_Of_Contents

    Copy & Paste:
    <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>

    Step-5: Add Code Above ]]></b:skin> Section

    এখন আপনি সার্চ করুন ]]></b:skin> এবং নীচের এই Code টী Paste করুন।
    Copy & Paste: 
    .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}

    Step-6: Replace <data:post.body/> code

    এখন আপনি সার্চ করুন <data:post.body/> এবং যত বার এই কোড় আছে ততবার নীচের কোড় এর থাকে Replacement করে নিন। কোড় নীচে
    Copy & Paste:
    <div id=”post-toc”><data:post.body/></div>

    Step-7: Add Code in Post

    এখন নীচের এই Code টি আপনার Blog Post এ Paste করতে হবে। (আপনার Blog Post টিকে html view এ করতে হবে)
    Copy & Paste: 
    <div class=”mbtTOC”> 
        <button onclick=”mbtToggle()”>Contents</button> 
        <ol id=”mbtTOC”></ol> 
        </div>

    Step-8: Add Code End of The Post

    এটি হল সর্বশেষ Step, নীচের এই Code টি আপনার Blog Post এর সবচেয়ে নীচে Paste করতে হবে।
    Copy & Paste:
    <script>mbtTOC();</script>
    Post By Santosh Barman www.canbebangali.com

    Leave a Comment