Table of Contents Script | Blog tips in tamil - i Know Tamil

Post a Comment

HIGHLIGHTS:HTML & CSS Code for table of contents, Blogging tips, Site development

உங்க பதிவை படிக்க வரும் வாசகர்களுக்கு, உங்களோட வலைத்தளம் ரொம்பவே உபயோகமா இருக்கிறது மட்டுமில்லாமல் அதை படிக்கவும் ரொம்ப வசதியாக இருக்கணும். அதற்காக, உருவாக்குனதுதான் "Table of Content". இதை, நீங்க விக்கிப்பீடியாவில் கூட பார்த்து இருக்கலாம்.

table of contents tamil

Table of content என்றால் என்ன?

நீங்கள் மிகப்பெரிய ஒரு பதிவை எழுதும்போது அதை தனித்தனியான தலைப்புகளில் எழுதி இருந்தீங்கன்னா, அந்த ஒவ்வொரு தலைப்பிற்கும், பதிவின் ஆரம்பத்திலையே ஒரு சின்ன கட்டத்துக்குள் அடக்கி, அதற்கான ஒரு Navigation (Shortcut) ஆக தரலாம். இதுக்கு பெயர்தான், Table of Contents.

TOCன் முக்கியத்துவம்

1. வாசகர்கள், எளிதாக உங்கள் பதிவை படிக்கவும், பார்க்கவும் முடியும்.
2. கூகுள் சர்ச் கன்சோலால், உங்களின் பதிவை ரொம்பவே புரிந்துகொள்ள முடியும். நீங்கள் தொடர்ந்து Table of contents பயன்படுத்தி எழுதும்போது உங்களுடைய பதிவுகள் Rank உயர்வதற்கு வாய்ப்புகள் இருக்கு.

TOC உருவாக்கும் முறை

Step 1

கீழே உள்ள CSS Codeஐ, உங்களின் Theme இல் சேர்க்கவும். Go to Theme --> Customize --> Advanced Tab --> Add Css --> இப்பொழுது Codeஐ, copy செய்து, அங்கு இருக்கும் இடத்தில paste செய்யவும் --> கீழே உள்ள Saveஐ கொடுக்கவும்.

#toc_container {     background: #f9f9f9 none repeat scroll 0 0;     border: 1px solid #aaa;     display: table;     font-size: 95%;     margin-bottom: 1em;     padding: 20px;     width: auto; }
.toc_title {     font-weight: 700;     text-align: center; }
#toc_container li, #toc_container ul, #toc_container ul li{     list-style: outside none none !important; } {codeBox}
Step 2

நீங்க எழுதுற பதிவோட Introductionக்கு அப்புறமா, கீழே இருக்க codeஐ paste செய்யவும். பின், அதில் இருக்கும் "Headings1, Heading2, Heading3.." இவற்றை, நீங்கள் என்ன தலைப்பு கொண்டு எழுதவிர்களோ, அதை அங்கு எழுதணும். நீங்க எத்தனை தலைப்புகள் வேண்டமானாலும் எழுதிக்கலாம்.

<div id="toc_container"> <p class="toc_title">Contents</p> <ul class="toc_list">   <li><a href="ID1">Heading1</a></li> <li><a href="ID2">Heading2</a></li> <li><a href="ID3">Heading3</a></li> </ul> </div>{codeBox}
Step 3

இப்போ உங்களோட தலைப்புகளுக்கு "ID" சேர்க்கணும். இரண்டாவது Stepஇல் ஒவ்வொரு தலைப்புக்கும் என்ன ID select பண்ணி இருக்கீங்களோ, அதையே இதுக்கும் செலக்ட் பண்ணனும். அப்பதான் அந்த தலைப்புகளை Click பண்ணும் போது, அதற்க்கு ஈடான பகுதிக்கு ஸ்கிரோல் ஆகும்.

மேற்கண்ட அனைத்து விவரங்களும், ஒரு வீடியோ பதிவாக "i Know Tamil" யூடியுப் பக்கத்தில் இருக்கிறது. உங்களுக்கு தேவை இருந்தால் பார்த்துக்கொள்ளலாம். நன்றி!

Related Posts

Post a Comment