Table of content plugin is a special SEO optimization tool for bloggers and site owners, which will help the visitors to give a quick look at your post or article and it also helps you with a high ranking in Google Search engine for your post or article as Table of Contents highlight your whole post.
As a demo, you can look at the Table of Contents shown in this post.
If your blog post is too long, it is necessary to add a Table of Contents in it. If you don't add a table of Content, then visitors who newly Visit your blog impressed by the title of your post shown in the search Engine result will skip your post instead of going through lengthy post. And will search for a related post on the Internet. Therefore, to increase SEO performance, it is necessary to add a table of content to your blogger blog.
The Table is automatically generated
After adding these codes, save your theme. If theme saving show update fail then reload page and do all steps carefully and save after every step.
If your headings has already numbered then replace 'ol' with 'ul' in the above script. You can also change the word 'Table of Contents' with any word you like.
<script>mbtTOC();</script>
Look at the screenshot.
As a demo, you can look at the Table of Contents shown in this post.
What is the Table of Contents?
How TOC Plugin Works?
TOC automatically generates a unique identity for every heading used under a post or article and gathers them to a paragraph in the form of a Table. When a reader reads your post or article he / she can easily go through with all the headings or subheadings under your long post or article and will easily move towards headings he or she wants to read instead of the full Article.
T able
At very long posts TOC just does not help only the users or readers of your blog, but it also helps in increasing the ranking and improves CTR (Click-Through Rates) and by this, you will get dramatic improvements in SEO of your blog.
Where should Table of Contents appear in the blog post?
You should place the Table of Contents after the first paragraph of your post or after the introduction your post which helps the readers to navigate easily to the particular point of your post.Process to Install TOC Plugin and Activate it in Blogger Post
This automatic TOC plugin has two processes to add an automatic Table of Contents in your blogger post. The first process is to install TOC plugin into your blogger them html and in the second process you will learn how to activate this plugin on your blogger desired post where you want to show Table of Content in the post.
How to Install TOC Plugin In Blogger Theme
Step1 : Edit Blogger Theme HTML
Login to your blogger and go to the Dash-board of your blogger and then click on the Themes. It will open a new page. At the right corner of this page, you will see three dots, click on these dots and then Edit HTML.
Step2 : Paste TOC Plugin Code Above </head> Tag
Now in theme HTML press Ctrl + F button of your keyboard and type </head> in the search box to find closing head tag </head> and copy and paste the code given below above the closing head tag </head>. Same as the screenshot given below:
<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>
Note:
Above code will work for h2 headings, if your post contains h3 headings then replace h2 with h3 where h2 is highlighted in above code.
In blogger h2 stands for headings and h3 stands for subheadings.
Step3: Paste TOC CSS Code Above ]]></b:skin> Tag
Now again type ] b : skin ] 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;}
Step4: Replace <data:post.body/> tag
Now again press CTRL+F button and find <data:post.body/> tag and replace with the given code below. If you find <data:post.body/> code more then 1 time then replace all with the give code below:<div id="post-toc"><data:post.body/></div>
How To Add Table of Contents in a Particular Post
Now go to the post in which you want to add Table of Contents. Edit your post as HTML and Copy the code given below and paste it in the post after first paragraph or where you want to show Table of Contents.
Code:
<div class="mbtTOC">
<button onclick="mbtToggle()">Table of Contents</button>
<ol id="mbtTOC"></ol>
</div>
<button onclick="mbtToggle()">Table of Contents</button>
<ol id="mbtTOC"></ol>
</div>
Activate TOC Plugin
It is final step. In this step we are going to activate TOC plugin in our post. To activate TOC plugin copy the give code below and paste it at end of your post HTML. Now hit enter button and check out, How your Table of Contents Look.<script>mbtTOC();</script>
Look at the screenshot.
How To customize Your TOC Plugin
You can customize TOC Plugin according to your wish with the help of CCS code (Step3 of this post). To customize TOC Plugin Look the steps given below.
- To change the background color of the TOC edit #ffffe0 at line no. 3.
- To change the boarder color of the TOC box edit #f7f0b8 at line no. 1.
- To change the border thickness of TOC box edit 5px at line no. 1.
- To change the font color of the TOC headline text edit #707037 at line no. 20.
- To change the anchor link color edit #0080ff at line no. 14
- To change the font size of anchor link edit 15 px at line no. 20.
- To change the font size of the TOC headline text edit 20 px at line no. 23.
- To change the size of the TOC box change width edit 70% inline 9.
Features of TOC Plugin
There are many features of TOC plugin Like:
- SEO Friendly
- Mobile and Desktop Responsive
- Do not increase page loading time
- Fast Loading
- Toggle button
- Show in the Location you choose
- Add unique id in each heading
I hope you will appreciate this topic and will enjoy benefits of TOC.
If you have any problem or question or suggestion, comment us now. We are always here to help you. Sorry for bad English.
Your Feedback's are important for us. Thanks
