How To Add Table Of Contents In Blogger

Suppose you have written a long post article on your blog, covering vast subtopics - then it might become very difficult for anyone to scroll down to find any particular topic. Especially if there came through search engines they might be in hurry for exact one thing they're looking and you're offering them whole lot of text they don't care about.

Here 'Table of Contents' come handily. Table of Contents index the main subtopics and make anyone to navigate easily in your blog post.

If you're on WordPress, there are many plugins available for that. But in case of Blogger (or BlogSpot whatever you call it) you need to look out for external widgets.

You must have tried many tutorials before this, if those didn't worked for you, then this one is very simple, easily to implement and will work for sure!

Implementing Table Of Contents To Blogger

Follow the steps below to implement TOC to Blogger -

1. Sign in with Blogger and go to 'Theme'.
2. Click on the arrow at 'customize' and select Edit HTML.
3. Find <data:post.body/> and place the following code after it.(To find you can use Ctrl+F)

4. <!--TOC By CSS-MAGZ-->
   <b:if cond='data:blog.pageType == "item"'>
   <!-- all item pages -->
   <script>/*<![CDATA[ */
   	var el = document.createElement("ol");
   	el.id = "m";
   	var z = 0 ; //insert Table of Contents after how many paragraphs
   	var targetElem = "h2"; //Deafult element to target
   function insertAfter(referenceNode, newNode) {
     referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
   }	var postBody = document.getElementById("Blog1");
   	var fPara  = postBody.getElementsByTagName("p");
   	var el1 = document.createElement("div");
   	el1.innerHTML="<button class='toggle' onclick='listToggle();'>Table Of Contents (Show/Hide)</button>";
   	try{insertAfter(fPara[z], el1);}catch(e){
   	console.log("CSSMAGZ_TableOfContents: Document Doesn't Contain paragraphs!Trying for div");
   	insertAfter(postBody.getElementsByTagName("div")[z], el1);
   	}
   	var Elements = postBody.getElementsByTagName(targetElem);
   for(i = 0; i < Elements.length; i++)           
   {
   Elements[i].setAttribute("id", "heading"+i);
   el.innerHTML += "<li class='tgl'><a class='clink' href='#heading"+i+"'>"+Elements[i].textContent+"</a></li>";
   insertAfter(el1, el);
   };
   "undefined"!=typeof document&&function(e,t){var n=e.createElement("style");if(e.getElementsByTagName("head")[0].appendChild(n),n.styleSheet)n.styleSheet.disabled||(n.styleSheet.cssText=t);else try{n.innerHTML=t}catch(e){n.innerText=t}}
   (document,"div .toggle{padding:.5em;background:#696969;border:none;color:#fff;font-weight:700;margin:.3em;}div .toggle:hover{border:.1px solid #000}#m{font-family:sans-serif;margin:0;margin-bottom:10px;background:#faebd7;padding:.3em;border:1px solid #faebd7;animation-name:fade;animation-duration:.3s}@keyframes fade{from{opacity:0}to{opacity:1}}.clink{text-decoration:none;color:##2c44ca}.clink:hover{text-decoration:underline;}div ol li,div ul li{padding:15px 0 0;margin:0 0 0 30px}");
   function listToggle() {
   var tgl = document.getElementById('m');
   if (tgl.style.display === 'none') {tgl.style.display = 'block';} else {tgl.style.display = 'none';}}
   /*]]> */
   </script>
   </b:if>
   

5. Click on save to save the HTML.
6. Open some 2-3 existing posts on your blog to make sure TOC properly added to your blog.

After successful implementation, you'll see something like below. (View Demo)

Links are primarily blue in color, but can change according to your theme styles. Links are having underline effect on hover. You can also toggle TOC by clicking the (show/hide).

Note: If you have multiple <data:post.body/> tags, put the above code after all the tags.

How this Table Of Contents(TOC) work?

Just one piece of code in your HTML, and it will add TOC to all the blog posts. How does this work?

First of all, the script will find for all h2 tags(heading tags) in your blog post. Then it will assign a unique id to them and at the same time if will make a ordered list <ol> and append child elements to it.

The special thing about this TOC script is it will find the first <p> tag (first paragraph) and add TOC after it. If you want to set this to second paragraph or third, you can make sufficient changes as explained below.

Making Changes In Table OF Contents

You can check out this project on GitHub. Its open source and you can make any changes to it and use in your blog.

You'll find var ptag = 0; in that script. If you make it var ptag = 1; TOC will be added after 2nd paragraph (here 0 means first paragraph, 1 means 2nd and so on).

Once you made changes, minify and add it to Blogger Theme's HTML as shown above.

If you want you can make changes to CSS styles as well.

This is all for now, I hope this will help you. In case if you encounter with any problem, just comment down below and I'll be there to help you.

• Tweet
• Share
• Share
• Share
• Share