• ABOUT
  • PRIVACY POLICY
  • DISCLAIMER
  • CONTACT
Tuesday, January 3, 2023
Gxfreee
No Result
View All Result
  • Home
  • Recent Post
  • Blogger Template
  • WordPress Plugin
  • Premium Apk
  • Home
  • Recent Post
  • Blogger Template
  • WordPress Plugin
  • Premium Apk
No Result
View All Result
Gxfreee
No Result
View All Result

Automatically Add Table of Contents in Blogger | Blogs

Mohan by Mohan
December 24, 2022
in Blogger Script
0 0
1
table of contents in blogger
0
SHARES
854
VIEWS
Share on FacebookShare on Twitter
Contents Show
1 READ ALSO
2 100+ Dofollow Backlink Site List 2021 Free
3 How To Install Floating Banner Ads With Responsive Close Buttons
4 Advantage of our Script
4.1 Demo
5 Benefits of Table of content
6 SEO Benefits of TOC
7 Improve User Experience
8 Table of Contents in Blogger
9 How to Add Table of Contents in Blogger Normal theme
10 How to Add Table of Contents in Blogger in Blogger AMP Themes
11 Rectifying the Errors
12 Templateify Theme Rectifying the Errors
13 Fix for Templateify Themes Errors
14 Watch Video Tutorial

Table of Contents in Blogger. Welcome to this article, We’re going to see how to add a working table of contents to a blogger site using the simple shortcode. Blogger is a big platform there are lots of limitations compared to the WordPress platform.

this code using not affect slow down your site. We present the shortcode-based automatic add table of content for the blogger site.

READ ALSO

100+ Dofollow Backlink Site List 2021 Free

How To Install Floating Banner Ads With Responsive Close Buttons

Advantage of our Script

This blogger script designed especially for blogger that no server loaded or third-party scripts is loaded besides the base. it only loads your entire page is loaded and other important page content is loaded first and making sure our code doesn’t hurt them.

  • It’s Shortcode based
  • One-Time setup
  • Optimized Code for Performance
  • Toggle functional
  • Slightest CSS
Demo

Benefits of Table of content

Table of Contents[TOC] provides a large number of benefits for a blog like a list of the Index of your article. If your article is lengthy it would be a helpful thing for a reader to navigate between this Table of content. Download PPSSPP Games

Table of Contents in Blogger. This is boost your CTR and SEO.

SEO Benefits of TOC

There are a large number of benefits in SEO, you choose a template SEO optimized Blogger templates for your blog just like that TOC helps a lot in SEO.

All search engine always loves well detailed and well-structured blog posts and pages. by adding a TOC in Blogger Site posts, make your blog post well detailed and well-structured[user-friendly]. add a TOC[table of content] in blogger to get a good result.

Improve User Experience

According to many research by more than 82% of total web readers are scanners who only read the important points and content of a webpage. We also love to read well-detailed blog articles.

User-friendly is a very important thing to get a higher ranking on your post Page (Search Result Page [SERP ]). User-friendly is one of the important parts of our blog to rank faster. And a table of content will help you to improve the user experience of your blog post.

Table of Contents in Blogger

You have just used a shortcode. This is a one-time setup and after that, don’t have any work.

jQuery and Font Awesome are already installed in your blog, it is generally present in most of the themes and test just search for jquery and font awesome on your theme.

How to Add Table of Contents in Blogger Normal theme

Please read the instructions carefully, and always the first backup of your theme in case of any errors. This step is only for general Themes, not AMP versions.

  1. Go to your blogger dashboard and click Edit HTML in the Theme panel and paste the below code after the </body> tag.
table of contents in blogger
<script async='async' defer='defer'>
// TOC by Info TECH (gxfreee.com)
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Table of Contents</h4><ul style='display:block'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "content" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>
  1. After paste the below CSS code in between <style> or <b:skin><![CDATA[ and Save or ]]></b:skin> the theme.
table of contents in blogger
/* TOC by Info TECH (gxfreee.com) */
.table-of-contents{border-style:dashed;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:"\f061";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f061";padding-right:7px;}
*/
  1. How this Script Works? | Table of Contents in Blogger
    1. All the head tags h1 to h5 are a call for inside the Table of content block. After that, each heading tags are inside the anchor tags and each heading is given a unique id which is also present inside the anchor tags.
    2. Some theme also include <article> tag, but Some theme not include <article> Tag, Error Occur this place. No need Next step for also include <article> tag.
    3. Add Manually <article> tag on your Theme
    4. To solve this issue simply put the inside an <data:post.body/> tag which will fix our problem
<article><data:post.body/></article>
  1. After Saving your theme, then got to your blogger post editor and switch to HTML mode. Use this shortcode to which place you need to insert the Table of Contents[TOC] in any of your posts.
table of contents in blogger
<div class='toc-pro'></div> 

That’s all, Now need to add any other code just use the above shortcode just see your blog post Table of Contents[TOC] to appear. you are using the AMP theme skip the above section.

How to Add Table of Contents in Blogger in Blogger AMP Themes

Please read the instructions carefully, and always the first backup of your AMP theme in case of any errors. This step is only for AMP Theme, not the General theme.

  1. Go to your blogger dashboard and click Edit HTML in the Theme panel and paste the below code after the </body> tag.
<b:if cond='not data:blog.isMobileRequest and data:view.isPost'>
<script>
// TOC by Info TECH (gxfreee.com)
var TOCpro=i=headlength=gethead=0;for(headlength=document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5").length,i=0;i<headlength;i++)gethead=document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5")[i].textContent,document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5")[i].setAttribute("id","point"+i),TOCpro="<li><a href='#point"+i+"'>"+gethead+"</a></li>",document.getElementById("toc-pro").innerHTML+=TOCpro;
</script>
</b:if>
  1. After paste the below CSS code in between <style amp-custom='amp-custom'> and </style> Save the theme.
/* TOC by Info TECH (gxfreee.com) */
.toc{font-size:20px;font-weight:600;cursor:pointer;background-color:#edeef1;padding:7px 11px;width:fit-content;margin:15px 0}.toc:focus,.toc li:focus{outline:none}.toc svg{vertical-align:middle;width:20px;height:20px}
#toc-pro {background-color:#edeef1;margin:0;padding:0 5px 0 11px;width: fit-content;}#toc-pro a{color:#222}#toc-pro li{font-size: 15px;font-weight:400}
  1. And find the article tag and add an id attribute with id='myArticle' and Save the theme.
<article class='post hentry' id='myArticle' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
  1. After Saving your theme, then got to your blogger post editor and switch to HTML mode. Use this code to which place you need to insert the Table of Contents[TOC] in any of your posts.
<div class="toc" on="tap:toc-pro.toggleVisibility" role="button" tabindex="0">
Table of Contents <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg>
<div hidden="hidden" id="toc-pro"></div></div>

Rectifying the Errors

These codes are tested in various themes but can’t be the same in every case. If you find any problem with your theme Please comment below and we help you.

As described in the above case where the article tag isn’t present you can add an article tag as shown in the above section. If nothing is showing after clicking the TOC this is the most probable reason.

Templateify Theme Rectifying the Errors

Many users have reported they are facing some issues, Most Popular content and author profile are inserted in this TOC content, first of all, it’s not the problem of this code. Table of Contents[TOC] call for all header tags from h1 to h5 in between and tag of content.

Fix for Templateify Themes Errors

Change the <h3> and <h2> tag to <h6> tag and change the CSS properly

HTML Section
***********************************
<h3 class='author-name'>
<a expr:alt='data:post.author.name' expr:href='data:post.author.profileUrl' target='_blank'><data:post.author.name/></a>
</h3>
----------------------------------
<div class='title-wrap related-title'>
<h3><data:allBylineItems.backlinks.label/></h3>
----------------------------------
<h2 class='entry-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
----------------------------------
CSS Section
***********************************
.title-wrap > h3{float:left;font-family:var(--body-font);font-size:14px;color:$(wtitle.color);font-weight:700;text-transform:uppercase;margin:0}

Conclusion

Thank you for reading this article post, I hope that you liked this post on how to add an automatic table of contents in the blogger and helped you to add a table of content in Blogger. If so please share this article on your social media. If you find any problems or issues you can comment below.

Watch Video Tutorial

Table of Contents in Blogger
Mohan

hi, I am Mohan, founder of the gxfreee website. Gxfreee ☇ Just Learn Something New. Gxfreee.com(gxfreee) is an information and Tech Support blog. In this blog, along with blogging-related information, Adsence approval tips, blogger Premium suport, all other types of information will be available!. Contact me in the contact form

Related Posts

Dofollow Backlink Site List
Blogger Template

100+ Dofollow Backlink Site List 2021 Free

December 24, 2022
Floating Banner Ads
Blogger Script

How To Install Floating Banner Ads With Responsive Close Buttons

December 24, 2022
Remove Mobile View m=1 in Blogger
Blogger Template

How to Remove Mobile View m=1 in Blogger Blogspot? for Free

December 24, 2022
Blogger Password Protected Download Button
Blogger Script

[2021] Free Premium New Blogger Password Protected Download Button Script

December 24, 2022
Online Rubik Cube Game
Blogger Template

3D-Online Rubik Cube Game New Blogger Template

December 24, 2022
Code Box With copy to Clipboard Button
Blogger Script

#1 Create Code Box With Copy to Clipboard Button in Blogger

December 24, 2022
Next Post
email subscription for blogger

#1 Add Advanced Stylish Email Subscription for Blogger

Leave a Reply Cancel reply

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

POPULAR NEWS

god of war 2 ppsspp iso file download

Download God of War 2 PPSSPP ISO file download Highly Compressed[190MB]

December 24, 2022
God Hand

[79MB] Free Download God Hand PPSSPP ISO Highly Compressed

December 24, 2022
Download God Of War 4

Download God Of War 4 PPSSPP ISO Highly Compressed

December 24, 2022
Dragon Ball Z Budokai Tenkaichi 3 PPSSPP ISO

Dragon Ball Z Budokai Tenkaichi 3 PPSSPP ISO Highly Compressed Free

December 24, 2022
God Of War 3 ISO

Download God Of War 3 PPSSPP ISO Android Highly Compressed

December 24, 2022
  • ABOUT
  • PRIVACY POLICY
  • DISCLAIMER
  • CONTACT

© 2022 Gxfreee - Gxfreee.com is a Knowledge Store.

No Result
View All Result
  • Home
  • Recent Post
  • Blogger Template
  • WordPress Plugin
  • Premium Apk

© 2022 Gxfreee - Gxfreee.com is a Knowledge Store.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In