How To Add Table Of Content In Blogger (In Just 5 Easy Steps) ~ Loot Zone

Table Of Content For Blogger

table of content, blogger table of contents, table of content in blogger, how to add table of contents in blogger, table of contents for blogger

Add a Table Of Content In Blogger blog post to simplify your post structure and user-friendy. Table of Content in Blogger blog post makes it easy to read the post for the reader.

Hello, welcome to Lootzone, in this article I will show you how to add a table of content in Blogger. Adding a table of content in WordPress is very easy using some plugin. But it’s very difficult to add a table of content in Blogger as Blogger does not support Plugin.

Here, Today I will guide you step by step to add a table of content in Blogger. Before adding this to your blog you should know some benefits of having a table of content (TOC) in Blogger blog post.

Benefits of Table Of Content

Google always loves well detailed and well-structured blog posts and pages. And by adding a table of content in Blogger blog posts, you make your blog post well structured and user-friendly. add a table of content in blogger to get a better result. And if you add a TOC in your blog post, it will be structured and reader-friendly. Google may display jump to links in the Search Result Page, it’s very beneficial for webmasters and it can increase your CTR.

Step 1-: First login to your Blogger Blog in which you want to add a table of contents. Then click on Theme and go to edit HTML.

Click any where in the html and press ctrl+f then paste </head> in the search box and enter when, you locate the </head> then paste the below-given code just above the </head> (As Shown In Below Image).

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

Also Read-:Top 5 Adsense Alternative

Step 2-: Again Crtl+f and Search ]]></b:skin> code and paste the below-given code just above.(As Shown In Below Image)

.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-: It’s a very easy step. Find <data:post.body/> code in your theme and replace with this new code. If your theme has this code more than one time then you have to replace all with the new code.

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

Step 4-: You have to add this HTML code on the blog post, in which you want to show table of contents. You have to add this code to every single post/pages you want to show a table of contents.

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

    </div>

Go to blog post and click on Edit then click on HTML. Add this below-given code where you want to show the TOC.

Step 5: Paste this code at the button of the blog post.

<script>mbtTOC();</script>

Step 6: If you want to change the colour of any elements, then you can easily change it in simple steps. Find the default style and colour of these all code and change as per your choice. You can Change Font, Font Colour and Font Style.