How to Add Table of Contents in Blogger/Blogspot Posts

How to Add Table of Contents in Blogger/Blogspot Posts

How to Add Table of Contents in Blogger/Blogspot Posts: Hello friends welcome back to our Website CyberStream. Here I post articles about Blogging, SEO, and Tech. I hope you guys loved our previous articles. Today in this article I will teach you How to Table of Contents in Blogger Posts.

How to Table of Contents in Blogger Posts
How to Table of Contents in Blogger Posts

What is a Table of Content?

In simple words, you can see in every textbook or ebook you will see the Table of Contents. It guides us on what are we going to read and the sub-topics in it. Let us take an example by Checking in this Article. There you will get the main topic and the sub-topics in it. It helps us in finding the topics we want to read or easy to pick the topic we left at some point.

Pros of Table of Contents?

Did you know guys? We can also add the Table of Contents in Blogger Posts. As we all know that today every blogger tries to write very long to rank on Search Engines. And due to the Table of Contents, their Audience can read easily read the topics they want.

The Table of Contents helps in many ways like it magnifies SEO. It organizes data orderly and intensifies user readability. It makes your Blogger Blog look attractive and User Friendly.

How to Add Table of Contents in Blogger Posts

Here I will tell you to step by step what to do for adding a Table of Contents in Blogger Posts.

  1. First of all Login to your Blogger Blog in which you want to add a Table of Content.
  2. Then go to Theme Section and Click on Edit HTML.
  3. Now you will come to your Theme Coding Section where you can Edit your theme as your will.
  4. Click on any Random line of Code and Press Control + F. The Popup will show up where you have to find </head>.
  5. When you will find the </head>. Copy the Code given Below and Paste it Above it(</head>).
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


<script type='text/javascript'>              

//<![CDATA[                      

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>

6. Now Search the below given code after pasting above one on its place.

]]></b:skin>

7. After finding the above code Paste the Below given code above it.

.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;}

8. Now you have to search the Below Given Code.

<data:post.body/>
NOTE:- This Code can be seen at multiple places in some themes so you have to replace the below given Code.

9. Now Replace the Below given Code everywhere you see the above searched one.

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

10. It is Done, Now simply Click on Save Theme.

Note: Theme Coding Settings are one time and its Done. Whereas to make it Visible in Posts You have to Paste the Below Codes in Every post.

11. Goto the Post and View it as HTML where you want to show the Table of Contents.

12. Copy the Given Code Below and Paste it Where you want to Show the Table of Contents.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>

13. At last Copy the Below Given Code and Paste it at the end of your Post.

<script>mbtTOC();</script>

So, that’s it for today guys, Hope this article “How to Add Table of Contents in Blogger/Blogspot Posts” was helpful to you. If you are still facing any issue don’t hesitate to Contact Us.

Thank You

Bhat Muzamil

Bhat Muzamil is the Founder of CyberStream.in website who is a young Tech Blogger and Computer Science Student from Kashmir India. He loves Blogging and he is currently working on CyberStream.in .

3 thoughts on “How to Add Table of Contents in Blogger/Blogspot Posts

Leave a Reply

Your email address will not be published. Required fields are marked *