How To Add Automatic Table Of Contents Plugin in Blogger ?

நண்பர்கள் அனைவருக்கும் வணக்கம், இந்த பதிவில் பிளாக்கரில் உங்களின் இடுக்கைகளுக்கு எவ்வாறு தானியங்கி உள்ளடக்கங்களின் அட்டவணை (Automatic Table Of Contents) உருவாக்கவது என பார்க்கப்போகிறோம். அதற்க்கு முன், Table Of Contents என்றால் என்ன ? மற்றும் Table Of Contents-ஆல் என்ன பயன் ? என்பதனை பார்க்கலாம்.

How To Add Automatic Table Of Contents Plugin in Blogger ?

Table Of Contents என்றால் என்ன (Definition) ?

இணையதளப் பதிவுகளில், Table Of Contents என்பது ஒரு குறிப்பிட்ட பதிவிற்கு வரும் பார்வையாளருக்கு, அப்பதிவில் நீங்கள் கூறியுள்ள உள்ளடக்கத்தின் தலைப்புகளை அப்பதிவின் ஆரம்பத்திலேயே தெரிவிப்பதாகவும். இதன் மூலம் அப்பர்வையாளர் தனக்கு வேண்டிய விவரங்கள் பற்றி இந்த பதிவில் கூறப்பட்டுள்ளதா என்பதனை அப்பதிவின் ஆரம்பத்திலேயே தெரிந்துகொள்ள முடியும்.

Table Of Contents-ஆல் என்ன பயன் (Usage) ?

இணையதளப் பதிவுகளில், Table Of Contents இரு முக்கிய நோக்கங்களுக்கு உதவியாக உள்ளது. அவை,

• உங்கள் இணையதளத்தில் ஒரு குறிப்பிட்ட பதிவிற்கு வரும் பார்வையாளருக்கு, அக்குறிப்பிட்ட பதிவில் நீங்கள் உள்ளடக்கியுள்ளவற்றின் தலைப்புகளை அப்பதிவின் ஆரம்பத்திலேயே தெரிவிக்கிறது.
• மேலும், அப்பதிவில் உள்ள உள்ளடக்கங்களில், தங்களுக்கு வேண்டிய பகுதிக்கு எளிதாக செல்ல வழிவகைச் செய்கிறது.

Automatic Table Of Contents-யை பிளாக்கரில் பதிவுகளில் சேர்ப்பது எப்படி ?

இப்போது இந்த Automatic Table Of Contents-யை பிளாக்கரில் எவ்வாறு உருவாக்குவது என பார்ப்போம்

Automatic Table Of Contents-யை உருவாக்குவதற்கான எளிய படிகள்

Blogger Theme Section

1. முதலில் உங்கள் பிளாக்கரில் Theme Section-க்கு செல்லுங்கள்.
2. பின், அதிலுள்ள Edit HTML என்பதனை அழுத்துங்கள்.

Finding </head> In Blogger Theme's HTML

3. இப்போது திரையில் தோன்றுவவற்றுள் </head> என்பதனை கண்டறியுங்கள்.
4. கீழே கொடுக்கப்பட்டுள்ள Code Snippet-இல் உள்ளவற்றை Copy செய்து </head> என்பதற்கு மேலுள்ள வரியில் Paste செய்து கொள்ளுங்கள்.
Automatic Table Of Contents Plugin For Blogger
<style>
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css);
.cht-toc {
    display: flex;
    width: 100%;
    clear: both;
    margin: 1em 0;
}
.cht-toc .tocarea-inner,
.cht-toc a.tocarea-title {
    position: relative;
    background-color: #f6f6f6;
    color: #344955;
    display: flex;
    border-radius: 4px;
}
.cht-toc .tocarea-inner {
    max-width: 100%;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6em;
}
.cht-toc a.tocarea-title {
    height: 38px;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    margin: 0;
    text-decoration: none;
}
.cht-toc .tocarea-title:after {
    content: "\f022";
    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 0 25px;
}
.cht-toc .tocarea li a {
    text-decoration: none;
}
.cht-toc .tocarea li a:hover,
.cht-toc a.tocarea-title:hover {
    text-decoration: underline;
}
.cht-toc .tocarea {
    display: block;
    padding: 8px 20px !important;
    margin: 0;
}
.cht-toc .tocarea ol {
    padding: 0 0 0 15px;
}
.cht-toc .tocarea li {
    font-size: 14px;
    margin: 7px 0;
}
.tocarea-title.ex:after {
    font-weight: 900;
}
</style>
Markup

Finding </body> In Blogger Theme's HTML

5. அதன் பின் அதில் </body> என்பதனை கண்டறிந்து அதற்கு மேலுள்ள வரியில் கீழே கொடுக்கப்பட்டுள்ள Code Snippet-இல் உள்ளவற்றை Copy செய்து Paste செய்து கொள்ளுங்கள்.
Automatic Table Of Contents Plugin For Blogger
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
/*! Automatic Table Of Contents For Blogger
    version: 1.0.0
    Created By Creators Help Tamil - https://bit.ly/YT-CreatorsHelpTamil
    Author: Siva (Creators Help Tamil)
    Plugins Used - Table of Contents | v0.4.0 - https://github.com/ndabas/toc
*/
/* Plugin Scripts Start */
!function(t){"use strict";var n=function(n){return this.each(function(){var e,i,a=t(this),o=a.data(),c=[a],r=this.tagName,d=0;e=t.extend({content:"body",headings:"h1,h2,h3,h4,h5"},{content:o.toc||void 0,headings:o.tocHeadings||void 0},n),i=e.headings.split(","),t(e.content).find(e.headings).attr("id",function(n,e){return e||function(t){0===t.length&&(t="?");for(var n=t.replace(/\s+/g,"_"),e="",i=1;null!==document.getElementById(n+e);)e="_"+i++;return n+e}(t(this).text())}).each(function(){var n=t(this),e=t.map(i,function(t,e){return n.is(t)?e:void 0})[0];if(e>d){var a=c[0].children("li:last")[0];a&&c.unshift(t("<"+r+"/>").appendTo(a))}else c.splice(0,Math.min(d-e,Math.max(c.length-1,0)));t("<li/>").appendTo(c[0]).append(t("<a/>").text(n.text()).attr("href","#"+n.attr("id"))),d=e})})},e=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn.toc=e,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery);
/* Plugin Scripts End */
/* cht-toc Setup Scripts Start */
var opcl = 1; /* default actions : 1 for show & 0 for hide */
var stcht = document.querySelector("strike");
if (stcht && stcht.textContent == "cht-toc") {
    stcht.outerHTML = '<div class="cht-toc"><div class="tocarea-inner"><a href="javascript:tococ();" class="tocarea-title" role="button" title="Table of Contents">Table Of Contents [ Hide ]</a><ol class="tocarea"></ol></div></div>';
}
var autotoc = document.querySelector(".cht-toc .tocarea");
var toctit = document.querySelector(".cht-toc .tocarea-title");
autotoc.setAttribute("data-toc", ".post-body");
octoc();
function octoc() {
    if (opcl == 1) {
        autotoc.style.display = "block";
        toctit.setAttribute("class", "tocarea-title ex");
        opcl = 0;
        toctit.textContent = "Table Of Contents [ Hide ]";
    } else {
        autotoc.style.display = "none";
        opcl = 1;
        toctit.textContent = "Table Of Contents [ Show ]";
        toctit.setAttribute("class", "tocarea-title");
    }
}
function tococ() {
    octoc();
}
/* cht-toc Setup Scripts End */
//]]>
</script>
Markup
6. மேலுள்ள Code Snippet-இல் நான் Highlight செய்துள்ள 1 என்பது நீங்கள் மாற்றக்கூடிய மதிப்பாகும். அதற்கான ஏற்புடைய மதிப்புகள் கீழுள்ள புகைப்படம் மற்றும் அட்டவணையில் கொடுக்கப்பட்டுள்ளது

Blogger - Automatic Table Of Content Plugin Customizations
Values	Default View	When User Click
0	Hidden	Show
1	Show	Hide

How To Strike Through Text ?

7. அவ்வளவுதான், தற்போது உங்கள் இடுகைகளில், உங்களுக்கு எந்த இடத்தில் Table Of Contents வேண்டுமோ அங்கு cht-toc என தட்டச்சு செய்யுங்கள்.
   cht-toc என எவ்வாறு தட்டச்சு செய்யவேண்டும் என்பதனை கீழுள்ள புகைப்படத்தில் கொடுத்துள்ளேன்.

விளக்கக் காணொளி

இந்த பதிவில் கொடுக்கப்பட்டுள்ளவற்றை செய்முறை விளக்கங்களுடன் நமது யூடியூப் சேனலில் உள்ள இந்த காணொளியில் கொடுத்துள்ளேன். காணொளியை பார்த்து விவரங்களை அறிந்து கொள்ளுங்கள்

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