How to create Auto Generating "Table of Contents" ? | Using JavaScript | Blogger Series

  தனவாகவே உருவாக கூடிய Table of Content எப்படி blogger-இல் add செய்வது என்பதை இந்த இடுகையில் காணலாம். மொத்தமாக மூன்று படிகள் உண்டு. ஒவ்வொன்றும் கீழே கொடுக்கப்பட்டுள்ளது.

table of contents script

Step 1: Add CSS

  Blogger-க்கு சென்று, Theme option-ஐ திறக்கவும். பின்பு, Customize-ஐ click செய்யவும். அங்கு, Advanced option-க்கு சென்று Add CSS, கட்டத்தில் கீழ் இருக்கும் Code-ஐ paste செய்யவும்.
#ToC{
   font-family: Arial, Helvetica, sans-serif;
   color:Black;
   background-color: #ffffff;
   border-radius: 10px;
   width: 40%;
   border: 1px solid Black;
   padding: 10px;
   margin: 10px;
   float:right;
}

Step 2: Add Division Tag

  CSS-ஐ உள்ளிட்ட பிறகு, Content-க்கு சென்று, HTML view இல், content ஆரம்பம் மற்றும் முடிவு என இரண்டு இடத்திலும் <div> மற்றும் </div> add செய்யவும். எப்படி செய்யவேண்டும் என்பதை தெளிவாக அறிந்துகொள்ள, கீழ் இருக்கும் விடியோவை பார்க்கவும்.

Step 3: Add Script

  இப்பொழுது content இன் இறுதியில் இருக்கும் </div> க்கு மேல், கீழ் இருக்கும் script code-ஐ paste செய்யவும்.
<script>
    toc = document.getElementById("ToC");
    tocHeader = document.createElement("h2");
    tocHeader.innerText="Table of contents";
    toc.appendChild(tocHeader);
    tocList = document.createElement("ul");      
    headers = document.getElementsByTagName("h2");  
    for (i = 0; i < headers.length; i++){     
      name = "h"+i;
      headers[i].id=name;     
      tocListItem = document.createElement("li");
      tocEntry = document.createElement("a");
      tocEntry.setAttribute("href","#"+name);
      tocEntry.innerText=headers[i].innerText;
      tocListItem.appendChild(tocEntry);
      tocList.appendChild(tocListItem);
    }
    toc.appendChild(tocList);
</script>

Step 4: Add TOC generator Code

  இறுதியாக, கீழ் இருக்கும் சிறிய TOC generate செய்ய உதவும் codeஐ copy செய்து, எந்த இடத்தில் table of contents வேண்டுமோ அங்கு paste செய்யவும்.
<div id="ToC"></div>

  அணைத்து படிகளையும் சரியாக செய்தவுடன், "PREVIEW" கொடுத்து Table OF Contents சரியாகஇருக்கிறதா என்பதை உறுதி செய்து Publish செய்யவும்.

Related Posts