How to add Table of contents in Blogger

 

How to add Table of contents in Blogger

How to add Table of contents in Blogger

Hello dear visitors! Today we will see how to create a table of content on Blogger. A table of contents is a very useful system for a website. This allows a visitor to see a summary of the post. At a glance, you can see what is being talked about in content or article in the Table of Content.

How does Table of Content work?

We usually keep the main topics or main topics heading in our articles through the HTML tags. Table of Content is created based on those tags. A point table will be created in each post with those ASTML tags. Today we will look at how to use the Table of Content.

How to use Table of contents in Blogger

To use Table of Content we need to add some HTML, CSS, and JavaScript code to our website. Let's see how to add a table of content website.

Note: Backup your template first

Login to your google account and go to the blogger dashboard.

Then click edit HTML from template section

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

<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>

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

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

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

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

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

How to show Table of contents in the post?

In order to activate TOC in your Blog post or article, while writing a new post switch to "HTML" mode and then paste the below code just after the first paragraph or before your first heading tag.

<div class="mbtTOC"> 

    <button onclick="mbtToggle()">Contents</button> 

    <ol id="mbtTOC"></ol> 

    </div>

Activating Table of contents in a blog post

To active, the Table of contents plugin pastes the below Javascript code after the end of your post.

Hit the Publish Button and Boom! TOC has been generated successfully


<script>mbtTOC();</script>


how to add an automatic table of contents in google blogger

how to add table of contents in blogger post,how to add table of content in blogger,how to add automatic table of contents in blogger,table of contents,how to add automatic table of contents in google blogger,table of contents widget for blogger,table of contents for blogger,table of contents for blog,table of contents for website,how to add table in blogger post,table of content,how to create automatic table of contents in blogger post,

Next Post Previous Post
No Comment

You cannot comment with a link / URL. If you need backlinks then you can Contact with us

Add Comment
comment url