Create article table of contents for blogger

Create article table of contents for blogger

In this article, I show you how to create a table of contents for blogger articles, Table of Contents for blogger with many levels automatically receiving tags H2, H3, H4 as the table of contents of the article.

What is a blogger article table of contents?

The table of contents in the article will help readers easily move to the section they want without having to drag the mouse for too long. At the same time, it is like a table to organize your content more organized and easy to understand. For example, with an article with quite long content like this without a table of contents, it is difficult to retain customers longer.

How to install article table of contents for blogger

Step 1: Add CSS

Copy the CSS below and paste it before the closing </b:skin> tag and save it

.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 JS

You copy the JS below and paste it before the closing </body> tag and save it

JS


<b:if cond=’data:view.isSingleItem’>
  <script>
    //<![CDATA[
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})}))});
    //]]>
  </script>
</b:if>

Step 3: Write the article

When writing articles, the tags are the title of the table of contents of the article, you should highlight that paragraph and select

  • Big Title: H1 Tag
  • Title: Tag H2
  • Subheading: H3 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 {tocify} at any position of the article in View Compose mode, then highlight it, then the default title of the table of contents is  Table of Contents.

To edit the title as you like, add $title = {Table of Contents} and highlight it again

Example title display text Table of Contents {tocify} $title = {Table of Contents}

Please note the code below

$(“#toc”).toc({
  content: “.post-body”,
  headings: “h2,h3,h4”
})
Where the .post-body tag is the tag that surrounds your post
headings: “h2,h3,h4” you put the tags so that it automatically recognizes


Conclude

So you have created a simple blogger article table of contents, including a very nice sub-table of contents.

Code extracted from the page template

Click to rate this post!
[Total: 1 Average: 5]
3
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x