Ultimate Guide to add or Insert Table of Content to Your Blog

personBishnu Prasad Mahabhoi

11:38 PM

Hello Bloggers ! Very good news for all of you.Because today I am going to tell you how to add table of content to blogger. Question arises here is it necessary to to add table of content to blog? So my I honest answer will be yes and I am also recommending you ; not only to you I recommend all of you to add or insert table of content to your each and every blog post.

add table of content,TOC,table of content,blog,blogger,technical Bishnuji,

Let's give you a perfect example whenever you go to buy a new book then you may find table of content in each and every books. Actually table of content I give you a idea how many topics will be cover in that particular subject. We generally called TOC as a short form of Table of content.

I have also heard that if you are table of content it will also improve your page ranking and help you in Search engine optimization or SEO. Although everybody knows that content is King ! Here I want to add something more ; I want to say SEO is Emporer.

Take an example Wikipedia which is one of the the most popular website where you can also find table of content. If you want to make your blog look professional like other popular website. You must add TOC or Table of Content.

So Follow Me exactly to Add Table of content to your Awesome Blog.

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

Search ]]></b:skin>

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

Search For <data:post.body/>

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

Note : If you have more than one <data:post.body/> Then Replace all with <div id="post-toc"><data:post.body/></div>

Given Below Code will be used in last