$hide=mobile$show=home

$show=post

$show=post

$show=post

How to Add table Of Content To A Blogspot(Blogger) Blog or Website

SHARE:

On this post, we will show you how to implement a Table Of Content(TOC) on your Blogger Blog that will help your readers jump from one topic on your posts to the other with great ease.

How to Add table Of Content To A Blogspot(Blogger) Blog or Website

The table of content feature is very popular on WordPress websites.  Finding a good TOC plugin is not any big deal for WordPress users. But what about the Blogger platform? Well it is true Blogger powered by Google does not provide any plugin(Widget) for a TOC but this does not mean you cannot have one.

On this post, we will show you how to implement a Table Of Content(TOC) on your Blogger Blog that will help your readers jump from one topic on your posts to the other with great ease.

About this TOC code

This code is not developed by 237 Solution. We simply did some modifications and found it helpful and decided to share with you guys looking for a way to add TOC to your Blogspot Blog.

This code is Made by MFK of bloginos.com so all the credits go to him. Since many people are looking for this feature which can easily be implemented on the WordPress CMS, we thought sharing this will help them out.

The JavaScript used here fetches all the head tags found between the <article> and </article>  tags and pre-assign a unique "div id" corresponding to these Head tags. 

Modifications we made

Knowing fully well that Blogger templates do not have the same scheme as the WordPress templates, the <article>...</article> tag is not found on Blogger templates. So, no "article h2, article h3" and so on which is been scanned by the JavaScript could be found.

Instead, in blogger, the article head is represented by the ".post-body h1, .post-body h2" and so on. So, we had to change the "article h2, article h3, article h4, article h5" on the original JavaScript to ".post-body h2, .post-body h3".

With this modification, the TOC plugin will be able to scan for all h2 and h3 within your blog post.

How to this TOC plugin to your Blogger Blog


The implementation of this TOC is very simple. You do not need to be an expert in order to do it. Here are the steps to follow;
  • Log in to your Blogger dashboard and click on "Theme".
adding TOC to Blogger

  • On the Theme windows, click on "Edit HTM" to access your blog's template codes. This is where you will have to add the TOC CSS and JavaScript.
On this post, we will show you how to implement a Table Of Content(TOC) on your Blogger Blog that will help your readers jump from one topic on your posts to the other with great ease.
  • On the HTML code box, click inside the box, then press "CTRL + F" and search for the </b:skin>.  
adding Toc to Blogger
[next]
Copy the CSS code for the TOC below and paste it just above the ]]></b:skin>.
adding TOC to Blogger

Here the CSS code for the TOC:
[.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}]
  • Next, search for the closing body tag(</body>) and then copy and paste the JavaScript code just before it.
adding TOC to Blogger

Here the JavaScript code:
[<script async='async' defer='defer'>
/* Made by MFK bloginos.com */
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>&quot;;$(&quot;.post-body h2, .post-body h3&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;.post-body h2,  .post-body h3&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}
</script>]
  • Save the template and exit. The next thing you would now have to do is add the div tag of the TOC where you will like it to appear. When you write your blog post until everything is ready to be published, switch to the HTML part of the blog post editor and search for the "first h2 tag" and paste the TOC div tag just above it.
adding TOC to Blogger

Here the HTML div tag for the TOC:
[<div class="toc-pro"></div>]

Customising


You can change features like the font size, colour, padding, margin and what head tag to be included in the TOC. 

As far as the JavaScript part is concerned, if you will like other blog post head tags to be included in the TOC, then simply add ".post-body h4" and ".post-body h5"  where you find ".post-body h2, .post-body h3" on the JS.

Conclusion



This table of content for Blogger can help better the reading experience of your blog visitors and even SEO.

If you have any difficulties implementing this Widget on your blog, please let us know by posting your comment below.

COMMENTS


$hide=mobile

ADVERTISEMENT
Adsby Google
Name

.Net Framework,1,A-Ads,1,Ads Balance,1,Adsense,2,Adsense Alternatives,2,AGWhatsApp,1,Android 11,1,Android Apps,73,Android Roms,12,Android Tips,10,Anonymous Ads,1,Antivirus,2,Asus Firmware,2,Blogger Themes,9,Blogger Widget,6,BLOGGING,2,Blogging Tips & Guides,9,Camtasia Studio,1,Comparisons,1,Computer 101,1,Coupons,19,CovStats,1,download,2,Downloads,137,Drivers,1,dWhatsApp,1,Facebook Tips,3,Facts,1,FIFA 2021,1,Files,1,Fix Over heating on Android,1,Free Paid Apps,50,Freebies,30,GAMES,26,GFI,1,Google,4,How to,3,How-To,62,IDM,1,InShot Pro Mod,1,InstaXtreme,1,Internet,45,iOS,18,ITEL,2,ITEL MTK,2,Jetpack Plugin,1,KMSpico,1,Language Packs,5,macOS,1,Make money Online,1,Microsoft,4,Miracle Team,9,Mobile Partner,1,MS Office,5,MTN Smart S730,1,Netflix,1,Norton Antivirus,1,Online Shopping,2,Online Studies,1,Operating System,2,Orange Klif,1,PBhev,3,PC Software,15,Rooting,2,S-COLOR,1,SAMSUNG,3,SD Card formatter,1,SEO Tips,2,Skin Packs,2,Sticker Makers,1,Streaming,4,Table of Content,1,Tech News,43,TECNO,3,Telegram,3,Tools,11,TOUCHING,1,Udemy Course,19,Unlocking,5,UpdraftPlus,1,VPN,6,wha,1,WhatsApp GO,1,WhatsApp Messenger,31,WhatsApp Mod,24,WhatsApp Web,1,WhatsApp Web Dark Theme,1,WhatsGold,1,Wikoo,2,Windows 10,1,Windows 7 Activator,1,Windows 8.1,2,Windows Activator,2,Windows AIO Version,1,Windows OS,4,Wordpress Plugin,7,Wordpress Themes,1,Yoast SEO,1,YouTube,1,
ltr
item
237 Solution: How to Add table Of Content To A Blogspot(Blogger) Blog or Website
How to Add table Of Content To A Blogspot(Blogger) Blog or Website
On this post, we will show you how to implement a Table Of Content(TOC) on your Blogger Blog that will help your readers jump from one topic on your posts to the other with great ease.
https://1.bp.blogspot.com/-GtwXqnxkOrI/XUq9rSJNfXI/AAAAAAAAFfY/P4bpSb1A_G80tWUBE28TDfnqGDUokrnFACLcBGAs/s640/Table%2BOf%2BContent%2Bfor%2BBlogger.png
https://1.bp.blogspot.com/-GtwXqnxkOrI/XUq9rSJNfXI/AAAAAAAAFfY/P4bpSb1A_G80tWUBE28TDfnqGDUokrnFACLcBGAs/s72-c/Table%2BOf%2BContent%2Bfor%2BBlogger.png
237 Solution
https://www.237solution.net/2019/08/how-to-add-table-of-content-to.html
https://www.237solution.net/
https://www.237solution.net/
https://www.237solution.net/2019/08/how-to-add-table-of-content-to.html
true
4983004729499366028
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content