தனவாகவே உருவாக கூடிய Table of Content எப்படி blogger-இல் add செய்வது என்பதை இந்த இடுகையில் காணலாம். மொத்தமாக மூன்று படிகள் உண்டு. ஒவ்வொன்றும் கீழே கொடுக்கப்பட்டுள்ளது.
அணைத்து படிகளையும் சரியாக செய்தவுடன், "PREVIEW" கொடுத்து Table OF Contents சரியாகஇருக்கிறதா என்பதை உறுதி செய்து Publish செய்யவும். [no_toc]
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 செய்யவும். [no_toc]