How to Create Table of Content Widget With Multi-Level List in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article About A JavaScript Widget of Table of Contents. It's looks a very beuatiful widget for blogger. It can increase Blogger SEO. TOC Plugin V 2.0 is the upgraded version of the TOC Script we released last week. It is much more dynamic in its functionalities and feature compared to the previous one. It is a Unique Script that auto-generates a TOC from the heading tag Like (H1,H2,H3,H4,H5,H6) of the page and adds anchor links to each nested list item.



I recommend the previous version for those bloggers who do not write in-depth content with headings tags of the lower level i.e. (h3,h4,h5). But if you do use multi-level subheadings in your content then V2.0 best suits you. This new version supports both a flat list or multi-level list of headings tags.

Here is The Pic of Original Widget Formate



Why to be Use a TOC?

For webmasters and bloggers who write lengthy articles and divide the article in several sub-sections, the readers may find it difficult reading such longs posts without a friendly navigation. The only solution to better present long, lengthy articles is displaying a "Table of Contents."

TOC is one such feature that you often see on Wikipedia Pages to provide easy navigation for long Articles. WikiPedia loves adding a TOC because it helps the readers to jump from one section to another section easily.

A TOC gives a basic summary to search engines of what your article is all about. The another links inside a TOC offers an added benefit to your SEO efforts. Google loves anchor links and especially when these links are meaningful and provide better navigation and understanding of your blog content. The Contents list generated using TOC plugin is SEO friendly. Anchor links inside it are easily crawled and indexed by search robots.

Features of TOC Plugin

This new version has some additional features as listed below.


  • Coded in pure JavaScript
  • Supports Nested heading tags
  • Numbered Navigation with counters
  • Finds headings tags from H2-H6 automatically
  • Adds unique ID to each content section automatically
  • Adds unique ID to each list of anchor links inside TOC 
  • Supports both Flat list and Multilevel List
  • Show/Hide Option Available
  • Compressed script
  • Lightweight and fast
  • SEO Friendly
  • Easily Customized
  • Mobile Responsive
Using JavaScript Regular Expressions

A regular expression, as you may know is a sequence of characters that forms a search patters. To search for heading tags, we will need to first create a RegExp or search pattern. 

In HTML a heading title will have the following structure.

<h2>Your Sub Heading Text</h2>
Where <h2> is the optening tag and </2> is the closing tag. This headline tag could also contain attributes or nested tags such as.

<h2 id="xyz">Your Sub Heading Text With a <a href="#">Hyperlink</a></h2>
In order to perform a perfect search I cam up with the following search pattern after many trials and errors.

/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi
The pattern above divided into three important groups as discussed below.

1st Group: ([\d])                    \d matches a digit (equal to [0-9])

2nd Group: (.*?)                    .*? matches any character between opening and closing tags.

3rd Group: ([\d])                    \d matches again a digit or single character (equal to [0-9])


Using String Replace ( ) Method

Once a match is found, the replace method passes these three groups as values to a function with four parameters.

.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(Newheading,opening,Title,closing)
I hope the colors may better help you in understanding how the RegExp groups refer to which parameter.


Final Part Programming the CSS Counters

The final part was styling the numbered list, assigning a unique index number to each list item. The default look of the TOC ordered list without CSS styling looks like this.



Which of course does not build a nested relationship between the link at all and is not good UI.

However after assigning different CSS classes to each ordered list, I was able to transform the look of TOC to something more user friendly:

.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}


The alpha-numeric and Roman values does help in better understanding the relationship between parent and child items. But what if you want only numbers? Something exactly similar to WikiPedia TOC? For that CSS counters came in hand!


Nested Numbering of List Items

CSS counters are simple "variables" maintained by CSS whose values can be incremented by CSS rules.

Using all these available properties I crafted the following styles.

.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}
Where section1, section2, section3 etc.  Represents CSS counters for the different list levels. In other words they represent the heading tags from H2-H5. 

The result was a beautiful interface with nested numbered list as shown below:



Table of Content Widget Installation Guide

TOC Plugin can easily be installed on any platform. Whether it is a wordpress site, Blogspot blog or a simple HTML page. The installation guide consists of three main steps.


  1. Add the JS script and CSS code above </head> tag
  2. Enclosed the content section with ID "post-toc"
  3. Add the container Div and the calling function to the page where you wish to display the TOC.
Most Blogspot users refer to this plugin as a Table of Contents Widget while in fat it is just a script that needs to be added inside the template and post editor. So using the word widget would be incorrect here, so lets just call it a TOC plugin in short.

Follow these easy step.

 1. Login to Your Blogger Blogspot account.
 2. Backup your Blogger Template before occur any bad issue.
 3. Click "Edit HTML" 
 4. Just above </head> tag paste the following source links

<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>
 5. Next Search ]]></b:skin> and just above it paste the following CSS code.

/*####TOC Plugin V2.0 by GetWebinfo####*/
.mbtTOC2{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%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; 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:#0080ff; 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:#289728; 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}
*/
Make These Custom Changes if You want

To Change background color of container box edit #FFFFE0

To Change border color of the box edit #F7F0B8

To change font color of the headline text edit #707037

To change anchor link color edit #0080FF

To Change link hover color edit #289728

 6. Finally search for <data:post.body/> and replace it with the code below

You will find this code two or more times inside your template, so replace all its instance with the code below especially the second occurrence. TOC plugin will not work if you replace <data:post.body/> just once.

<div id="post-toc"><data:post.body/></div>
 7. Now finally Just Save Your Blogger Template and You can all done!


How to Show TOC inside a Post or Page?

Step 01

Add TOC to only those blog posts which are long and lengthy in length with several subheadings. Adding it to a blog post with just three or less headings does not make sense.

In Post writing layout click on HTML mode of blogger editor and then paste the following HTML code just before the first heading.

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

Finally its time to invoke the plugin so that it could auto-generate a TOC on page load, To do this paste the following JS code at the bottom of your blogger editor where your blogger post ends.

<script>mbtTOC2();</script>
Publish your Post and you can see it in action!

I Hope this article is really helpful for you if you like this article so please share it on social media with your friends. Thanks for Reading !!!!!!!!!!

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.


No comments:

Post a Comment