How To Add Table of Contents in Blogger: A Step-by-Step Guide in 2024

Assalam-o-Alaikum! Welcome to our site All2Digitals: Humari site par aapko Technical Tips. blogging, SEO, aur content creation. Crypto Faucet Reviews Online Earnings. Aur CSS JavaScript Tools. Se Related bohat saare useful tips aur tricks milengi. To intezar kis baat ka chahiye aaj ki topic start karte Hain.

Table of Contents Kya Hai aur Kyun Zaroori Hai?

Table of Contents ek aisa section hota hai jo aapki post ke headings aur subheadings ko list ki shakal mein show karta hai. Yeh na sirf readers ke liye helpfull hota hai balki SEO ke liye bhi beneficial hai. Isse readers ko asani se pata chal jata hai ke aapki post mein kya kya covered hai aur woh directly apne required section tak ja sakte hain.

Blogger Mein Table of Contents (TOC) Add Karne Ka Tarika

Blogger par apne blog posts ko asani se navigate karne ke liye Table of Contents add karna zaruri hai. Yeh post aapko step-by-step guide karega:

Step 1: CSS Code Add Karein

1. Theme Editor Mein CSS Code Add Karein:

• Blogger dashboard mein login karein.
• Theme section mein jayein aur Edit HTML pe click karein.
• ]]></b:skin>  section dhundhein aur neeche diye gaye CSS code ko paste karein:

/* 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 h3 {
    margin: 0;
    cursor: pointer;
}

Step 2: JavaScript Code Add Karein

• </body> section dhundhein aur neeche diye gaye JavaScript code ko paste karein:

<script async='async'>
var head, newLine, el, title, link, ToC = "<nav class='table-of-contents' role='navigation'><h3 onclick='toc()'>&#10145;&#65039;Table of Contents</h3><ul style='display:none'>"; 
$("article h2, article h3, article h5").attr("id", function(arr) {
    return "point" + arr;
});
$("article h2, article h3, 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: Post HTML Mein TOC Div Add Karein:

• Apne blog post editor mein jayein aur HTML view select karein.
• Neeche diya gaya code add karein jahan aap TOC dikhana chahte hain:

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

Is tarike se, aap asani se apne blog posts mein Table of Contents add kar sakte hain jo aapke readers ko content navigate karne mein madad karega aur SEO ke liye bhi faidemand hoga.

SEO Tips

• Keywords: Apni post mein relevant keywords zaroor include karein, jaise ke "Blogger Table of Contents", "Blogger SEO Tips", "Table of Contents in Blogger".
• Headings: Proper headings aur subheadings ka istemal karein.
• Meta Description: Post ka meta description zaroor likhein jo ke 150-160 characters ka ho aur usme bhi aapke main keywords shamil hon.

About Our Blog

Hamara blog aapko har roz naye aur informative articles provide karta hai jo aapke digital life ko easy aur enjoyable banane mein madadgar hote hain. Humari koshish hoti hai ke hum aapko latest tips aur tricks ke sath update rakhein.

Agar aapko ye guide pasand aaye to humein comments mein zaroor batayein aur apne doston ke sath share karein. Hamare blog ko subscribe karna na bhoolein taake aapko har new article ki update milti rahe.

---

Umeed hai ye article aapke liye madadgar sabit hoga. Happy Blogging!