How to Add Table of Content in Blogger

Hey, readers today we discuss how to add table of content in blogger manually without any issue because TOC (Table of Content) plays a big role in SEO. Blogger does not support any plugins like WordPress. But before we get started we give you quick overview about Table of Content.

What is TOC (Table of Content)?

Table of Content (TOC) is the list of topics in articles with topic names and topic links if some one click on particular topic links he/she directly jump to that topic automatically it usually found before the title in articles it plays a big role in SEO.

Table of Content SEO Benefits

Table of Content Plays a very big role in Seo. if you add Table of Content in articles it looks more structured google always recommend detailed articles first on top so adding TOC helps google to get detailed information about your articles.

Also Read :- How to use google question hub to create quality content .

Enhance User Experience

Table of Content (TOC) helps you to enhance user experience & user experience is too much important in a blogging career according to a survey good user experience boost your articles google rankings and adding TOC will help user to directly jump on any topic in article.

How to Add Table of Content in Blogger?

Table of Content is very much important you easily add TOC in wordpress with simple plugins but there is no plugin for Blogger so it is not easy to add Table of Content in Blogger but today we tell you a great method to add TOC in blogger manually.

Step 1 :- First Login into Blogger with your google account then go to them editor. Click on Edit Html button.

Find Closing Head Tag </head> and paste the below code above the closing head tag.

<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[           
//*************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>

Step 2 :- Now find ]]</b:skin> tag and paste the following CSS Code above ]]</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;
                    }

Step 3 :- Now Find <data:post.body/> in your blogger theme then replace it with below code. if you find more than one <data:post.body/> tags replace all of them.

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

Step 4 :- Now we discuss how to add Table of Content (TOC) in articles it is too simple to add TOC in Blogger without any plugin.First copy the below html code and paste the html code above the first heading we recommend you to paste the html code in your article first paragraph.

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

Last Step :- This is the last step to add TOC in your Blogger post and most important read this carefully now copy the below code at the bottom of every post where you want to shoe Table of Content.

<script>mbtTOC();</script>

All set now you are ready to add Table of Content in your Blogger Posts.

How to Design Blogger Posts Table of Content.

Designing Table of Content in Blogger is too much easy task you can design your Table of Content with simple CSS code. Simply copy the below CSS code & paste it in your Blogger Theme.

/* Starting of TOC Css Codes */
.mb-toc {
    border: 2px solid #ddd;
    background: #ececec;
    padding: 5px 20px 20px;
    margin: 40px 0;
    font-size: 18px;
    overflow: hidden;
    border-radius: 5px;
}

.mb-toc h2 {
    margin: 10px 20px;
    font-size: 30px;
}

.mb-toc ul {
    margin: 0;
    list-style: none;
    float: left;
    width: 100%;
}

.mb-toc ul ul li a {
    padding-left: 45px;
}

.mb-toc ul ul li {
    background: none;
}

.mb-toc li {
    list-style-type: none;
    position: relative;
    margin: 0;
    cursor: pointer;
    background: #f7f7f7;
    float: left;
    width: 100%;
}

.mb-toc li:nth-child(odd) {
    background: #fff !important;
    overflow: hidden;
    clear: both;
}

.mb-toc li:nth-child(odd) li:nth-child(odd) {
    background: none;
}

.mb-toc li:nth-child(even) {
    background: #f7f7f7 !important;
    overflow: hidden;
    clear: both;
}

.mb-toc li:nth-child(even) li:nth-child(odd) {
    background: none;
}

.mb-toc ul>li:hover>a {
    background: #fffcd1;
}

.mb-toc li a {
    color: inherit;
    padding: 8px 0 8px 25px;
    float: left;
    border-bottom: 1px solid #ddd;
    width: 100%;
	text-decoration: none;
}
/* Ending of TOC css Code */ 

To Paste CSS Code Login in your Blogger then go to Layout and then Theme Designer.

Open, Theme Designer then click on advance & Add CSS then Paste above CSS Code in Add CSS section.

Step 3 :- Now, copy the below html code and paste it in blog posts where you want to Add Table of Content.

<div id="toc" class="mb-toc">
 <h2>Table Of Contents</h2>
 <ul>
        <li><a href="#headingid1">1. Your heading text </a></li>
        <li><a href="#headingid2">2. Your heading text</a></li>
        <li><a href="#headingid3">3. Your heading text</a></li>
	<li><a href="#headingid4">4. Your heading text</a></li>
        <li><a href="#headingid5">5. Your heading text</a></li>
</ul>
</div>

Now, setup the heading names in the html code whenever you want to add Table of Content in Articles that’s it now you are ready to add a Stylish Table of Content in your Blogger Articles.

Also Read :-Why WordPress is worldwide popular platform .

Conclusion

In this article, we discuss how to add Table of Content in Blogger with simple steps simply copy & paste the HTML & CSS Codes in Theme or Articles. Because TOC makes your blogger website SEO Friendly or google always prefer detailed articles on the top of google.

That’s it for today i hope you guys found this article useful if you really like this article share it with your friends & follow our blog to get in touch with us till then Stay Safe Stay Home.

1 thought on “How to Add Table of Content in Blogger”

Leave a Reply

%d bloggers like this: