In this article, I will guide you on how to create an automatic table of contents for the latest simple Blogspot article
What is a blogspot article table of contents?
The table of contents in the article will help readers easily navigate to the content they want without having to hover for too long. At the same time, it is also a table to organize the summary content of your article. For long articles, the table of contents will help your website visitors have a pleasant experience and reduce the bounce rate.
Instructions for creating automatic table of contents for Blogspot articles
Step 1: Add CSS in your website template
You copy the CSS code below and paste it before the closing tag </b:skin>
You May Also Like
.post-body ul{padding:0 0 0 15px;margin:10px 0}
.rtl .post-body ul{padding:0 15px 0 0}
.post-body li{margin:5px 0;padding:0}
.post-body ul li,.post-body ol ul li{list-style:none}
.post-body ul li:before{display:inline-block;content:'\2022';margin:0 5px 0 0}
.rtl .post-body ul li:before{margin:0 0 0 5px}
.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}
#toc li a{color:#4285f4;font-weight:normal}
.tocify-wrap{display:block;width:100%;clear:both;margin:0}
.tocify-inner{position:relative;max-width:100%;background-color:rgba(155,155,155,0.05);display:flex;flex-direction:column;overflow:hidden;font-size:14px;color:var (--title-color);line-height:1.6em;border-radius:4px}
a.tocify-title{position:relative;height:38px;background-color:rgba(155,155,155,0.05);font-size:16px;color:#344955;font-weight:700;display:flex;align-items: center;justify-content:space-between;padding:0 15px;margin:0;border-radius:4px}
a.tocify-title.is-expanded{border-radius:4px 4px 0 0}
.tocify-title:after{content:'\2261';font-size:16px;font-weight:400;margin:0 0 0 25px}
.rtl .tocify-title:after{margin:0 25px 0 0}
.tocify-title.is-expanded:after{font-weight:900}
a.tocify-title:hover{text-decoration:none}
#toc{display:none;padding:8px 15px;margin:0}
#toc ol{padding:0 0 0 15px}
.rtl #toc ol{padding:0 15px 0 0}
#toc li{font-size:14px;margin:7px 0}
#toc li a:hover{color:#4285f4;text-decoration:underline}
Step 2: Add Javascript
You copy the JS below and paste it before the closing </body> tag and save the template
<b:if cond='data:view.isSingleItem'>
<script>
//<![CDATA[
function shortCodeIfy(t,n,i){for(var e=t.split("$"),o=/[^{\}]+(?=})/g,c=0;c<e. length;c++){var a=e[c].split("=");if(a[0].trim()==n)return null!=(i=a[1]).match(o) )&&String(i.match(o)).trim()}return!1}!function(t){"use strict";var n=function(n){return this.each(function(){var i, e,o=t(this),c=o.data(),a=[o],r=this.tagName,s=0;i=t.extend({content:"body",headings:"h1 ,h2,h3"},{content:c.toc||void 0,headings:c.tocHeadings||void 0},n),e=i.headings.split(","),t(i.content .find(i.headings).attr("id",function(n,i){return i||function(t){0===t.length&&(t="?");for(var n =t.replace(/\s+/g,"_"),i="",e=1;null!==document.getElementById(n+i);)i="_"+e++;return n+ i}(t(this).text())}).each(function(){var n=t(this),i=t.map(e,function(t,i){return n.is(t)?i:void 0})[0];if(i>s){var o=a[0].children("li:last")[0];o&&a. unshift(t("<"+r+"/>").appendTo(o))}else a.splice(0,Math.min(si,Math.max(a.length-1,0)));t ("<li/>").appendTo(a[0]).append(t("<a/>").text(n.text()).attr("href","#"+n. attr("id"))),s=i})})},i=t.fn.toc;t.fn.toc=n,t.fn.toc.noConflict=function(){return t.fn .toc=i,this},t(function(){n.call(t("[data-toc]"))})}(window.jQuery),$(".post-body b").each (function(){var t=$(this),n=t.text();n.toLowerCase().trim().match("{tocify}")&&(n=0!=shortCodeIfy(n, "title")?shortCodeIfy(n,"title"):"Table of Contents",t.replaceWith('<div class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+n+'">'+n+'</a><ol id="toc"></ol></div>< /div>'),$(".tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded) "),$("#toc").slideToggle(170)})}),$("#toc").toc({content:".post-body",headings:"h2,h3,h4"} ),$("#toc li a").each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$) (t.attr("href")).offset().top-20},500),!1})}))});tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#toc") .slideToggle(170)})}),$("#toc").toc({content:".post-body",headings:"h2,h3,h4"}),$("#toc li a" .each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")) .offset().top-20},500),!1})}))});tocify-title").each(function(t){(t=$(this)).on("click",function(){t.toggleClass("is-expanded"),$("#toc") .slideToggle(170)})}),$("#toc").toc({content:".post-body",headings:"h2,h3,h4"}),$("#toc li a" .each(function(t){(t=$(this)).click(function(){return $("html,body").animate({scrollTop:$(t.attr("href")) .offset().top-20},500),!1})}))});
//]]>
</script>
</b:if>
Step 3: Write the article
When writing an article, the tags are the title of the table of contents of the article, you should highlight that paragraph and select
- Title: Tag H2
- Subheading: H3 Thẻ Tag
- Subheading: H4 Tag
Step 4: Export the table of contents to the article
To export the table of contents to the article, you insert the word {tocify} in Bold format

And it will Automatically Display Thanks for Reading.
Leave a Reply
View Comments