In this article you'll find a complete guide on how to add automatic table of contents with shortcode in blogger. Its a lightweight and beautiful table of contents with minimal usage of CSS and JavaScript which doesn't affect your site's speed.
You can see table of contents of our site. This is what we are going to make:
{tocify} {$title=Table of Contents}
The basics of this method is simple i.e. few lines of HTML, CSS and JavaScript Code are integrated into the blogger template allowing us to use shortcode based table of contents in blogger.
Before entering into the steps let us understand the basic dynamics of Table of Contents
What is Table of Contents?
Basically, a table of content is a quick navigation link to the specific part or heading of an article. It helps users to quickly navigate the lengthy blog post or an article.
What are the benefits of Table of Contents?
When the article or blog post is lengthy (around 2000 to 3000 words) with multiple headings and sub-headings then it would be difficult for a reader to better understand the post.
Attention period of user is short for a lengthy post so if there is table of contents in the beginning of the post then it would be easier for a reader to grab the information they need resulting in lower bounce rate for a website.
Table of contents can help search engine's automated scripts(bots) to better identify and cateorize the article to feature it in rich snippets and search results.
How to Add Automatic Table of Contents?
Automatic table of content means you have to integrate some Javascript and CSS code into your Blogger Template and you have to insert a shortcode in the posts where you want the table of contents.
It automatically identifies headings, subheadings and present them in a beautiful way.
Many users are still using manual method for displaying table of contents in blogger thinking that automatic table of contents makes our webpage slow and stiff but this is just a misconception.
If there is optimization of javascript, css and html codes then it is far more better and efficient than manually doing.
Note: Before following the steps make sure your theme needs to support jQuery and Font Awesome Icons. Most of the newly built theme (such as Templateify themes) has support for them.
Steps
STEP-2: Find <head> or <head> by pressing Ctrl+F/Cmd+F and Paste the FontAwesome Code just below it:
FontAwesome Code
<!-- Font Awesome Free 5.15.1 --> <b:tag href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css' name='link' rel='stylesheet'/> <b:tag cond='data:blog.languageDirection == "rtl"' href='https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap' name='link' rel='stylesheet'/>
- <div class='post-body post-content'>
- <div class='post-body entry-content>
- <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
- <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
- <div class='postEntry' expr:id='"postID-" + data:post.id'>
For example:
To find out which line of code is used in your theme, simply open any one of the post in your curent theme, right click anywhere and click on inspect (Ctrl+Shift+I). After that look for div class as shown in the image below:
In this example we need to replace the highlighted div class with the one mentioned in beginning of step 3. Similar you can identify and replace in your theme too.
STEP-4: Search for ]]></b:skin> in your theme and paste the CSS Code just before it:
CSS Code
/* Tocify CSS*/ /*-- Automatic TOC by UPG.COM.NP --*/ .tocify-wrap{display:flex;width:100%;clear:both;margin:0} .tocify-inner{position:relative;max-width:100%;background-color:#F4F4F4;display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:#2F353B;line-height:1.6em;border:1px solid;border-color:#B1B1B1;border-radius:5px} a.tocify-title{position:relative;height:38px;font-size:16px;color:#23282C;font-weight:600;display:flex;align-items:center;justify-content:space-between;padding:0 15px;margin:0;border-radius:5px} a.tocify-title.is-expanded{border-bottom:1px solid;border-color:#ADADAD;border-radius:5px 5px 0 0} .tocify-title-text{display:flex} .tocify-title-text:before{content:"";width:1em;height:1em;stroke-width:0;display:inline-block;margin:0 6px 0 0;padding-top:18px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' ><path d='M5.953 25.312c0 1.719-1.344 2.688-2.969 2.688-0.984 0-1.984-0.328-2.688-1.031l0.891-1.375c0.422 0.391 1.062 0.703 1.656 0.703 0.547 0 1.125-0.266 1.125-0.891 0-0.875-1-0.922-1.641-0.875l-0.406-0.875c0.562-0.719 1.078-1.516 1.75-2.125v-0.016c-0.5 0-1.016 0.031-1.516 0.031v0.828h-1.656v-2.375h5.203v1.375l-1.484 1.797c1.047 0.25 1.734 1.062 1.734 2.141zM5.984 15.516v2.484h-5.656c-0.047-0.281-0.094-0.562-0.094-0.844 0-2.891 3.531-3.328 3.531-4.641 0-0.531-0.328-0.812-0.844-0.812-0.547 0-1 0.469-1.266 0.906l-1.328-0.922c0.516-1.078 1.578-1.687 2.766-1.687 1.453 0 2.703 0.859 2.703 2.406 0 2.312-3.391 2.828-3.437 4.047h1.984v-0.938h1.641zM28 20.5v3c0 0.266-0.234 0.5-0.5 0.5h-19c-0.281 0-0.5-0.234-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19c0.266 0 0.5 0.219 0.5 0.5zM6 6.453v1.547h-5.234v-1.547h1.672c0-1.266 0.016-2.531 0.016-3.797v-0.187h-0.031c-0.172 0.344-0.484 0.578-0.781 0.844l-1.109-1.188 2.125-1.984h1.656v6.312h1.687zM28 12.5v3c0 0.266-0.234 0.5-0.5 0.5h-19c-0.281 0-0.5-0.234-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19c0.266 0 0.5 0.219 0.5 0.5zM28 4.5v3c0 0.266-0.234 0.5-0.5 0.5h-19c-0.281 0-0.5-0.234-0.5-0.5v-3c0-0.266 0.219-0.5 0.5-0.5h19c0.266 0 0.5 0.234 0.5 0.5z'/></svg>") center/1em no-repeat} .rtl .tocify-title-text:after{margin:0 0 0 6px} .tocify-title:after{content:"";width:1em;height:1em;stroke-width:0;display:inline-block;margin:0 0 0 25px;padding-top:18px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' ><path d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'/></svg>") center/1em no-repeat} .rtl .tocify-title:after{margin:0 25px 0 0} .tocify-title.is-expanded:after{content:"";width:1em;height:1em;stroke-width:0;display:inline-block;padding-top:18px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' ><path d='M15.484 12.452c-0.436 0.446-1.043 0.481-1.576 0l-3.908-3.747-3.908 3.747c-0.533 0.481-1.141 0.446-1.574 0-0.436-0.445-0.408-1.197 0-1.615 0.406-0.418 4.695-4.502 4.695-4.502 0.217-0.223 0.502-0.335 0.787-0.335s0.57 0.112 0.789 0.335c0 0 4.287 4.084 4.695 4.502s0.436 1.17 0 1.615z'/></svg>") center/1em no-repeat} a.tocify-title:hover{text-decoration:none} #tocify{display:none;padding:8px 15px;margin:0} #tocify ol{padding:0 0 0 15px} .rtl #tocify ol{padding:0 15px 0 0} #tocify li{font-size:14px;margin:7px 0} #tocify li a{color:#1087FF} #tocify li a:hover{color:#2292FF;text-decoration:underline} @media (max-width: 350px) { .tocify-inner{min-width:100%} } .post-body li{margin:5px 0;padding:0} .post-body ol{counter-reset:ify;padding:0 0 0 15px;margin:10px 0} .rtl .post-body ol{padding:0 15px 0 0} .post-body ol > li{counter-increment:ify;list-style:none} .post-body ol > li:before{display:inline-block;content:counters(ify,'.')'.';margin:0 5px 0 0} .rtl .post-body ol > li:before{margin:0 0 0 5px}
You can change the color codes in the CSS to style TOC according to your choice.
- Background color of Table of Contents: #F4F4F4
- Color of Table of Contents: #2F353B
- Border Color of Table of Contents: #B1B1B1
- Title and Icon color of Table of Contents: #23282C
- Border color of Table of Contents when expanded: #ADADAD
- Heading, Sub-Heading, Minor Heading color of Table of Contents: #1087FF
- Heading, Sub-Heading, Minor Heading hover color of Table of Contents: #2292FF
STEP-5: Search for </body> or </body> in your theme and paste the JavaScript Code before it.
JavaScript Code
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ !function(t){"use strict";var n=function(n){return this.each(function(){var e,i,a=t(this),o=a.data(),c=[a],r=this.tagName,d=0;e=t.extend({content:"body",headings:"h1,h2,h3"},{content:o.toc||void 0,headings:o.tocHeadings||void 0},n),i=e.headings.split(","),t(e.content).find(e.headings).attr("id",function(n,e){return e||function(t){0===t.length&&(t="?");for(var n=t.replace(/s+/g,"_"),e="",i=1;null!==document.getElementById(n+e);)e="_"+i++;return n+e}(t(this).text())}).each(function(){var n=t(this),e=t.map(i,function(t,e){return n.is(t)?e:void 0})[0];if(e>d){var a=c[0].children("li:last")[0];a&&c.unshift(t("<"+r+"/>").appendTo(a))}else c.splice(0,Math.min(d-e,Math.max(c.length-1,0)));t("<li/>").appendTo(c[0]).append(t("<a/>").text(n.text()).attr("href","#"+n.attr("id"))),d=e})})},e=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn.toc=e,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ var _0xbf1c = ["$", "split", "length", "=", "trim", "match", "text", "toLowerCase", "{tocify}", "title", "Table of Contents", '<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="', '"><span class="tocify-title-text">', '</span></a><ol id="tocify"></ol></div></div>', "replaceWith", "click", "is-expanded", "toggleClass", "slideToggle", "#tocify", "on", "each", ".tocify-title", "#post-body", "h2,h3,h4", "toc", "top", "offset", "href", "attr", "animate", "html,body", "#tocify li a", ".post-body b"]; function shortCodeIfy(_0xe779x2,_0xe779x3,_0xe779x4){for(var _0xe779x5=_0xe779x2[_0xbf1c[1]](_0xbf1c[0]),_0xe779x6=/[^{}]+(?=})/g,_0xe779x7=0;_0xe779x7< _0xe779x5[_0xbf1c[2]];_0xe779x7++){var _0xe779x8=_0xe779x5[_0xe779x7][_0xbf1c[1]](_0xbf1c[3]);if(_0xe779x8[0][_0xbf1c[4]]()== _0xe779x3){return null!= (_0xe779x4= _0xe779x8[1])[_0xbf1c[5]](_0xe779x6)&& String(_0xe779x4[_0xbf1c[5]](_0xe779x6))[_0xbf1c[4]]()}};return !1}$(_0xbf1c[33])[_0xbf1c[21]](function(){var _0xe779x2=$(this),_0xe779x3=_0xe779x2[_0xbf1c[6]](),_0xe779x4=_0xe779x3[_0xbf1c[7]]()[_0xbf1c[4]]();_0xe779x4[_0xbf1c[5]](_0xbf1c[8])&& (_0xe779x3= 0!= shortCodeIfy(_0xe779x3,_0xbf1c[9])?shortCodeIfy(_0xe779x3,_0xbf1c[9]):_0xbf1c[10],_0xe779x2[_0xbf1c[14]](_0xbf1c[11]+ _0xe779x3+ _0xbf1c[12]+ _0xe779x3+ _0xbf1c[13]),$(_0xbf1c[22])[_0xbf1c[21]](function(_0xe779x2){(_0xe779x2= $(this))[_0xbf1c[20]](_0xbf1c[15],function(){_0xe779x2[_0xbf1c[17]](_0xbf1c[16]),$(_0xbf1c[19])[_0xbf1c[18]](170)})}),$(_0xbf1c[19])[_0xbf1c[25]]({content:_0xbf1c[23],headings:_0xbf1c[24]}),$(_0xbf1c[32])[_0xbf1c[21]](function(_0xe779x2){(_0xe779x2= $(this))[_0xbf1c[15]](function(){return $(_0xbf1c[31])[_0xbf1c[30]]({scrollTop:$(_0xe779x2[_0xbf1c[29]](_0xbf1c[28]))[_0xbf1c[27]]()[_0xbf1c[26]]- 20},500),!1})}))}) //]]> </script>
ShortCode for Adding TOC into Blog Post
After you have completed all the 5 steps you have to add the following shortcode in the post where you want the table of content to be displayed.
{tocify} {$title=Table of Contents}
Paste the code in the desired section of blog and make it bold from the compose view.
That's it now you have full furnished table of contents in blogger.
Final Word
If you found our article helpful then please consider sharing and commenting. Your support is incredible and priceless. Stay tuned for more interesting and useful articles. Thankyou for your visit here.