How to add table of content in Blogger?In easy Steps

How to add a table of content in Blogger? In easy Steps

Automatic Table Of Content setup for blogger/Blogspot.

Today I will explain an easy way how to add an automatic table of contents in a blogger? website, There are 3 ways available to add a table of contents in a blogger blog, The first one is editing your post HTML & adding an anchor tag for jumping to content. But this method is too time-consuming as you have to edit HTML for every post so bloggers don’t afford this way as there are lots of other things to do.

The second way is installing widgets from third-party websites, but I suggest you not to use this method as sometimes the third party websites close their business and then the widget gets broken and again we need to start from the beginning.

The last method & Best method to add automatic TOC in blogger is by adding some CSS and JavaScript codes in the theme template of your blogger blog. by implementing this method you need not do too much HTML editing so will save lots of time here, So let's see how we gonna do it step by step.

How to Add an automatic table of contents in blogger?

Step 1: Go to blogger>Theme>Edit HTML.

Step 2 : Add below CSS code before ]]></b:skin>

After clicking Edit html > press CTRL+F & find this code ]]></b:skin> & Paste below CSS code just before it as shown in image after this code.

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

Step 3: Add below JavaScript code before closing head tag = </head>

<!-- Table of contents Javascript start--> <script type='text/javascript'> //<![CDATA[ //*************TOC plugin by MyBloggerTricks.com 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> <!-- Table of contents Javascript end -->

Step 3: Now Find <data:post.body/> & Replace this code with below code.

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

Note:- You will find this code 2 or 3 times in your blogger HTML replace each with above code as shown in below image.

That’s all done with Blogger HTML editor Now next work is with Post Html editor you need to add these 2 shortcodes one at the top and another at bottom of the post.

How to add Table Of Content in Blogger Post?

Step-4  Adding 2 shortcodes in Blogger Post HTML.

Add Below Code at the top of every posting page before the 1st Main heading. 

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

& Below code at the End of the post.

<script>mbtTOC();</script>