Blogger Mein Table Of Contents Kaise Banate Hain | Add Table Of Content In Blogger 2023

Table of content blogger mein kaise lagaye agar nhi jante to aaj ka yha article aap ke liye hai aaj ki iss article mein ham janenge ki blogger mein table of content kaise banate hain

नमस्कार मित्रों!
Aapka swagat hai hamare aaj ki iss blogpost mein aaj ham janenge ki tablet of content kaise banaye jisse ki hamare post ki jada chance Hojaye ki vha google mein rank karne lage to chaliye fir aaj ka blogpost start karte hain

Tablet Of Content Kya Hota Hai?

Jo table of contents hota hai jissko ki ham (TOC) bhi kahte hai iska use karne se Hamara jo blogpost hota hai vha professional lgta hai aur jo viewer hote hain unko jo heading padhna hota hai uska idea bhi Mil jata hai jisse ki vha uss heading par click kra ke uss par redirect ho jate hai aur aasni se usko padha bhi pate hain to iss liye aapko apne article mein Table of content ka use Krna chahiye.

Table Of Content Ke Kya Fayda Hain ?

Vaise to table of content (TOC) ko use Krne ka Bhaut sara fyada hai jinme se ham kuchh point ke upar bta karenge
- Help In Ranking Your Article In Google
- Attract Audience To Read Your Blogpost

- Greates Visibility In Your Article

1- Help In Ranking Your Article In Google.

Jab aap apne article mein table of content ka use karte hai aur agar aapka table of content google index ya phir ham kha skte hai ki Analysis kra ke google ke search result mein dikhane lgta hai na to aapka article google mein rank karne lgta hai aur aapke website par organic traffic milne lgta hai ab mein aapko ek photo ka example dekhata hun jisse ki aap badi aasni se smjh jayege jo mein khna chahta hun

2- Attract Audience To Read Your Blogpost.

Agar aapne apne article mein table of content ka use Kiya hai right way se to aapke article par jo viewer aate hai ya phir ham kha skte hai jo audience aate hai unko isse bhaut zada fyada milta hai kaise bta rha hun, Dekho jab Table of content lga rhta hai usski madad se jo viewer hota hai usko jo point padhna hota hai vha uss par click kra ke padh leta hai aur jab (TOC) lga hota hai na to audience ko roughly idea mil jata hai ki usko iss blogpost mein kya kya dekhne ko milega.

3- Greates Visibility In Your Article.

Ye to aap ko manana padega ki Aapke post mein table of content space to consume krta hai aur aapke article mein ek alag visibility provide krta hai.

Table Of Content Kaise Lagaya Jayega?

To ab mujhe nhi lgta ki aapko aur kuchh batane ki jarurat hai table of content ke baare mein issliye ab mein aapko batane ja rha hun ki blogger mein table of content kaise add karenge, Mein aapko 2 Method Share Karuga aur dono method 100% work krta hai, 

Pahle Method ka use Karne se aapka table of content kuchh iss tarike se show hoga

Dusra Method ka use karne se aapka table of content kuchh iss tarah ka show hoga

Ab aapko decide Krna hai aapko kausa method use Krna hai table of content lagane ke liye .

Method Number 1

- Mein kuchh steps aapko bta rha hun aapko just vhi step follow Krna hai, Aur jo ye steps mein aapko share kra rha hun vha Mobile ke liye hai agar aap [Pc/ Laptop] use karte hai to mein aapko bta dun sab step same rhega but kuchh minimal change rahega.

Step 1 - Apna blogger dashboard open kra lo phir apko 3rd line par click Krna hai then aapko Theme wala option select kra lena hai aur vha par apko customize ka option show hoga just uske niche aapko arrow ka milega to aapko uss par click krna hai, Fir aapko vha se apne themes ka Backup lelena hai backup wale option par by chance jab ham code mein kuch change kare aur vha lga na paye to hamare pass hamare themes ka Backup to rhega.

Step 2 - Jha par apko Backup ka option mila tha just uske niche aapko Edit Html ka option show horha hoga to aapko uss par click krna hai but usse pahle aapko iss site ko desktop site pe open krna hai phir aapko Edit Html par click krna hai.
*Note- Aapko Ek Keyboard Download Krna Hai Jiska Ki Naam Hacker Keyboard Hai Iss Video Par Click Kra Ke Jaan Lo Kis Tarah Se Download Kiya Jayega Aur Use.

Step 3 - Then vha par sara html code open hojayega aapko uss code mein ek baar click krna hai aur fir aapka keywords show hojayega aap hacker enable kra ke rkhna hai ab aapko Ctrl + f par press krna hai aur vha par aapko search krna hai </body> then enter pe press kra ke search kra dena hai ab jha per </body> hoga vha show hojayega to aapko mein ek code provided kra rha hun uss code ko aapko just </body> ke upar paste kra dena hai.

<b:if cond="data:view.isPost"> <style> html{scroll-behavior:smooth;overflow-x:hidden} .pS details summary{list-style:none;outline:none} .pS details summary::-webkit-details-marker{display:none} details.k2Toc{padding: 10px 15px;background: #f3f3f3;color: black;font-weight: 600;margin: 10px 0px; border:2px solid; border-radius: 5px;box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;} details.k2Toc summary{display:flex;justify-content:space-between;align-items:baseline} details.k2Toc summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer} details.k2Toc[open] summary::after{content:attr(data-hide)} details.toc a:hover{text-decoration: none; color: #fe6c6c;}details.toc a:active{text-decoration: none; color: #fe6c6c;}details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit} details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count} details.toc ol ol ol ol{display:none} details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px} details.toc li li:first-child{margin-top:5px} details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end} details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count} details.toc li a{flex:1 0 calc(100% - 23px)} details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')} details.toc li li a{flex:1 0 calc(100% - 28px)} details.toc li li li::before{flex:0 0 45px} details.toc li li li a{flex:1 0 calc(100% - 45px)} details.toc .toc >ol{margin-top:1em} details.toc .toc >ol >li >ol{flex:0 0 calc(100% - 23px)} details.toc .toc >ol >li >ol ol{flex:0 0 calc(100% - 45px)} details.toc .toc >ol >li >ol ol ol{flex:0 0 calc(100% - 35px)} </style> <script>/*<![CDATA[*/ /* Table of Contents */ class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement = document.createElement("div"); }; getMostImportantHeadingLevel() { let mostImportantHeadingLevel = 6; for (let i = 0; i < this.headingElements.length; i++) { let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel; } return mostImportantHeadingLevel; }; static generateId(headingElement) { return headingElement.textContent.replace(/\s+/g, "_"); }; static getHeadingLevel(headingElement) { switch (headingElement.tagName.toLowerCase()) { case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1; } }; generateToc() { let currentLevel = this.getMostImportantHeadingLevel() - 1, currentElement = this.tocElement; for (let i = 0; i < this.headingElements.length; i++) { let headingElement = this.headingElements[i], headingLevel = TableOfContents.getHeadingLevel(headingElement), headingLevelDifference = headingLevel - currentLevel, linkElement = document.createElement("a"); if (!headingElement.id) { headingElement.id = TableOfContents.generateId(headingElement); } linkElement.href = `#${headingElement.id}`; linkElement.textContent = headingElement.textContent; if (headingLevelDifference > 0) { for (let j = 0; j < headingLevelDifference; j++) { let listElement = document.createElement("ol"), listItemElement = document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement = listItemElement; } currentElement.appendChild(linkElement); } else { for (let j = 0; j < -headingLevelDifference; j++) { currentElement = currentElement.parentNode.parentNode; } let listItemElement = document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement = listItemElement; } currentLevel = headingLevel; } this.toElement.appendChild(this.tocElement.firstChild); } } /*]]>*/</script> <script>document.addEventListener('DOMContentLoaded', () => new TableOfContents({ from: document.querySelector('#post-body'), to: document.querySelector('#toContent') }).generateToc() );</script> </b:if>

Step 4 - Code paste krne ke bad aapko save par click kra ke code ko save kra dena hai aur destop site ko off bhi kra dena hai, Ab apko post wale option par jana hai aur jiss post mein aapko table of content use krna hai uss post ko open kra lena hai jha se aapke article ka phale heading start hota hai uss just upar aapko ek code paste krna hai aur apka table of content lg jayega jha pe apko table of content add krna hai vha par apko kuchh Number type krna for example- 5678

Step 5 - Ab aapko Pencil ✏️ wale option par click krna aur Composed View option par click kra dena hai ab aap dekhenge ki apke samne html code show ho rha hoga to aapko vha par ke bare press krna hai jisse ki keyboard open hojayega ab aapko Ctrl+f search krna hai aur search wale option mein aapko vhi numbers likhna hai jo abhi apne likha tha 5678 then search par click kra dena hai ab jha par ye likha hoga vha open hojayega to apko usko cut krna hai aur ek code mein aapko derha hun usko vha par paste kra dena hai

<details class="k2Toc toc"> <summary data-hide="Hide all" data-show="Show all">Table of Contents</summary> <div class="toc" id="toContent"></div> </details>   

Step 6 - Code paste krne ke bad aapko save par click krna hai aur phir aapko apne Article ko Published ya Update kra dena hai aur aap dekhenge ki aapka tablet of content lg chuka hoga

Method Number 2 -

Jo mein steps follow karunga vhi step aapko bhi follow krna hai aur jo steps mein shar kra rha hun yha Mobile ke liye hai agar aap [Pc/Laptop] ka use karte hain to kuchh minimal change hai aap usko dekha lijiyega.

Step 1 - Apko apne blogger dashboard ko open krna hai aur 3rd line par press krake Themes par click karna hai ab aapke samne Customize ka option show hoga uske just niche arrow ka option milega to aapko uss par click karna hai aur apne Themes ka Backup lelena hai, Backup lene ke bad apko Edit Html par click karna hai but usse pahle aapko destop site ko enable kra lena hai
*Note- Aapko Ek Keyboard Download Krna Hai Jiska Ki Naam Hacker Keyboard Hai Iss Video Par Click Kra Ke Jaan Lo Kis Tarah Se Download Kiya Jayega Aur Use.

Step 2 - Edit Html par click karne ke bad aapko html code show hone lagega to aapko ek baar code mein press krna hai then apka keyboard open hojayega aur aapko hacker keyboard ko enable kra lena hai phir aapko press krna hai </body> then search par click kra dena hai jha par ye hoga aapko show hojayega to uske just niche apko mein code provide kra rha hun vhi paste kra dena hai

<script async='async'> var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>➡️Table of Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}</script>

  

Step 3 - Code paste krne ke bad aapko fir se aapko search krna hai ]]></b:skin> aur jha par ye code likha hoga uske just upar aapko yha code paste kra dena hai

/* TOC */ .table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0} .table-of-contents li{margin:0 0 0.25em 0} .table-of-contents a{color:#2a5365} .table-of-contents h4{margin:0;cursor:pointer}

Step 4 - Itna code edit karne ke bad ab aapko save par click kra ke code ko save kra dena hai aur save krne ke bad apko desktop site bhi off kra dena hai ab apko apna vha post open krna hai jisme apko table of content lgna hai Post ko open kra lo aur jha se aapka pahle heading start hota hai usse pahle aapko table of content lgna hai to jha par aapko table of content lgna ho vha par aapko kuchh number likhna padega for example- 4567

Step 5 - Number likhne ke bad apko Pencil ✏️ wale option par click krna hai aur Composed View select kra lena hai ab aap ke samne html code show ho rha hoga to aapko ussi code mein click krna hai aur hacker keyboard ka use lekra enter karna hai Ctrl+f aur phir jo number aapne likha tha vhi likh kra search krna hai aur jha par number hoga aapke samne show hojayega to usko cut kra ke mein jo code provide kra rha hun usko paste kra dena hai

<div class='toc-pro'></div>

Step 6 - Code ko paste krne ke bad article ko Published ya Update karna hai aur apka table of content lg chuka hoga

Inn 2 Methods ka use kra ke aap table of content lga skte hai aur agar ab bhi kuchh doubt ho to iss video ko ek baar visit kar lo sara problem solve hojayega.

Conclusion

Aaj ki article mein hamne jana ki blogger mein table of content kaise add kiya jata hai agar article aapko informative lga ho to apne blogger wale dosto ke sath jarur share karen aur agar kuchh doubt ho to comment box mein puch skte hai😇

•Table of contents kaise lagaya jayega?
•Table of contents ke kya fayde hain?
•Tablet Of Content Kya Hota Hai?

Faq

What is TOC in blogging?

TOC is known as table of content in blogging filed it increases audience experience.

Should I add table of contents to a blog post?

Yes, You can add table if content to a blog post in wordpress using plugin and in blogger with the help of code.

Is TOC good for Seo?

Yes, TOC is good for Seo because when we add table of content in blog then it increases the keywords density in right way and audience get better experience.

Why is a TOC useful?

Go to Link