Click here to Skip to main content
15,305,819 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I want to add a table of contents plugin to my blogger website. I have tired of manually typing for each article. can anyone help me?
I want to add TOC automatically.

What I have tried:

Yes, I have tired of manually typing the table of contents for each article.
Posted
Updated 1-Apr-22 2:43am

1 solution

1. Log into your Blogger

2. Select "Template or Theme" and click on "Three Dots" then Click on "EDIT HTML".

3. Now search for the </head> and paste the below script just above the </head> tag.

JavaScript
<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>


4. Now search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line

CSS
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}

5. Lastly search for the <data:post.body/> , there can be more than one <data:post.body/> tag , Replace all of them with below code.

HTML
<div id="post-toc"><data:post.body/></div>


6. The coding part ends here, Click on "SAVE" and you are all done!

-------------------------
To Show TOC in Blog Post:

Write a new post in HTML mode and execute the below code:

HTML
<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="mbtTOC"></ol> 
    </div>

To activate TOC, execute the below code:

JavaScript
<script>mbtTOC();</script>

----------------------------
Hope this helps!
   
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900