Add Stylish Automatic Table of Content in Blogger Website। Realwebinfo

Hope you all are conscious that, Google Blogger or Blogspot does no longer enable plugins like WordPress, However, with the assist of this publish you can effortlessly create a light-weight Automatic Table of Content for your weblog post. So In this post, I will show step via step technique to deploy TOC for your weblog put up and pages.


Add Stylish Automatic Table of Content in Blogger Website


Add a Automatic Table Of Content In Blogger weblog submit to simplify your put up shape and user-friendly. Table of Content in Blogger weblog publish makes it effortless to examine the put up for the reader.


Hello, welcome to Realwebinfo, in this post We will exhibit you how to add a desk of content material in Blogger. Adding a Automatic Table of Content material in WordPress is very handy the usage of some plugin. But it’s very challenging to add a desk of content material in Blogger as Blogger does no longer help Plugin.


Add Stylish Automatic Table of Content in Blogger Website. 


Automatic Table of Contents or TOC is a small piece of content material in a tabular layout which is generally considered earlier than the first section of a put up or article. It down the lists of all headings or sub-headings of your posts or article in a table.


What is Automatic Table of Contents?


Automatic Table of Contents approves us to prepare all the headings and subheadings tags from your blog-post mechanically barring manually characterizing the heading tags and makes it into a fantastic desk for your target audience to navigate.


Whenever you go to Wikipedia, you locate TOC on every and each article you read, right! Doesn’t it make us easy to discover the article and hop at once into that unique passage or point?


Obviously, it does, and its due to the fact Wikipedia mechanically selects the heading labels and prepares Table of Contents out of it.


Benefits of Table Of Content (TOC) for SEO


Google usually loves properly precise and well-structured weblog posts and pages. And with the aid of including a desk of content material in Blogger weblog posts, you make your weblog publish nicely structured and user-friendly. add a desk of content material in blogger to get a higher result.


And if you add a TOC in your weblog post, it will be structured and reader-friendly. Google can also show leap to hyperlinks in the Search Result Page, it’s very really helpful for site owners and it can make bigger your CTR.


When you are writing long-form content material round 2000 to 3000 phrases with more than one headings and subheadings, it will hard for the person to higher recognize the shape of the article.


As you recognize the interest span of readers is very low and if they observed a long-form article then they will soar lower back and decide upon a short-form article the place the answer is given precisely. But if you grant a desk of content material at the establishing of the weblog post, they will bounce to the area and get the facts they need.


There are countless search engine optimization advantages of having a table of content material on the website. It helps search engine bots to higher apprehend the article and it will show wealthy snippets in search results.


Improve User Experience


According to lookup by means of NN Group, greater than 79% of whole net readers are scanners who solely examine the essential factors of a webpage. We additionally love to study well-detailed articles.


User trip is a very necessary factor to get greater ranking in SERP (Search Result Page). User trip is a very essential section of a weblog to rank faster. And a desk of content material will assist you to enhance the person ride of your blog. 


Benefits of the adding the Table of Contents


As you comprehend that TOC seems simply above the begin of your posts simply after the first para. Your target audience can actually take up a few traces on the pinnacle web page of your total post.


Must read for information


Therefore, a well-planned Table of Content can adversely assist in:

  • Giving a expert seem to your submit or article.

  • Arranging factors of your publish or article in a systematic way.

  • Managing your audience’s expectations, due to the fact that it offers a high-level view of your posts or article.

  • Providing a roadmap for your target audience to effortlessly navigate your entire submit or article.


How to Add automatic table of contents in blogger?


Step 1: First take the backup of your theme as for precaution, incase anything wrong, than could be restore the backup 


Add Stylish Automatic Table of Content in Blogger Website


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


Add Stylish Automatic Table of Content in Blogger Website


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

Add Stylish Automatic Table of Content in Blogger Website



Clicking on edit html > press CTRL+F & find this </head> & Paste this html code just above it as shown in image.

<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>
<script type=’text/javascript’> 
//<![CDATA[ 
//*************TOC Plugin V2.0 by MyBloggerTricks.com 
function mbtTOC2(){var a=1,b=0,c=””;document.getElementById(“post-toc”).innerHTML=document.getElementById(“post-toc”).innerHTML.replace(/<h([d]).*?>(.*?)</h([d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join(“<ol class=’point”+a+”‘>”):e<a&&(c+=new Array(a-e+1).join(“</ol></li>”)),b+=1,c+='<li><a href=”#point’+b+'”>’+f+”</a>”,a=parseInt(e),”<h”+e+” id=’point”+b+”‘>”+f+”</h”+g+”>”)}),a&&(c+=new Array(a+1).join(“</ol>”)),document.getElementById(“mbtTOC2”).innerHTML+=c}function mbtToggle2(){var a=document.getElementById(“mbtTOC2”),b=document.getElementById(“Tog”);”none”===a.style.display?(a.style.display=”block”,b.innerHTML=”hide”):(a.style.display=”none”,b.innerHTML=”show”)} 
//]]> 
</script>


Step 4 : Add below html code before this tag ]]></b:skin>

Add Stylish Automatic Table of Content in Blogger Website

Clicking on edit html > press CTRL+F & find this code ]]></b:skin> & Paste this html code just above it as shown in image.


/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
 font-family:Oswald, arial;
 display: block;width: 70%;
 }
 
 .mbtTOC2 button{
 background:#ACDEFB;
 font-family:oswald, arial; font-size:22px;
 position:relative;
 outline:none;
 border:none;
 color:#2E2E2E;
 padding:0 0 0 15px;
 }
 
 .mbtTOC2 button a {
 color:#FF0313;
 padding:0px 2px;
 cursor:pointer;
 } 
 
.mbtTOC2 button a:hover{
 text-decoration:underline; 
 } 
 
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
 }

.mbtTOC2 li{margin:10px 0;  } 

.mbtTOC2 li a {
color:#EA1414;
 text-decoration:none;
 font-size:18px;
 text-transform:capitalize;
 } 
 
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
 
.mbtTOC2 li li a{
 color:#040404;
 font-size:15px;
 }


.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) “.” counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) “.”counter(section2) “.” counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) “.”counter(section2) “.”counter(section3) “.” counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) “.”counter(section2) “.”counter(section3) “.” counter(section4)”.” counter(section5);counter-increment:section5}
/* 
.point2 {list-style-type:lower-alpha} 
.point3 {list-style-type:lower-roman} 
.point4 {list-style-type:disc} 
*/


Step 5: Now Find <data:post.body/> code and replace this code with below code.

Add Stylish Automatic Table of Content in Blogger Website

You will find this code 2 or 3 times in your blogger html its vary on the theme coding. Replace each code with above code as shown in below image.

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

Now all work done with Blogger HTML editor, Next step is add these two short html codes with each and every post manually one at top and another at bottom of post.


Step 6: Adding this short codes in html view of Blogger Post.

Add Stylish Automatic Table of Content in Blogger Website

Add Below Code at the top of post page/before 1st heading/before any paragraph as per your choice.

<div class=”mbtTOC2″> 
<button>Contents <span>[<a onclick=”mbtToggle2()”  id=”Tog”>hide</a>]</span></button> 
<div id=”mbtTOC2″></div> 
</div>


Step 7: Paste this html code at the End of post.

Add Stylish Automatic Table of Content in Blogger Website

<script>mbtTOC2();</script>
Now all the task has been done related to the adding automatic table of content in your blogger website.

In the end

Through this article, we have tried to give you complete information about “Add Stylish Automatic Table of Content in Blogger Website“, We sincerely hope that this information will prove very useful for you if you have any information related to this article. If there is a suggestion, then you can reach us through the comment box. You must share this information on your friends and social media. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *