How to Create/Install a Table of Contents in Blog Posts

If you pay attention, there are several websites or blogs that put a kind of table of contents in some of their articles. The existence of a table of contents in a post or what is also commonly called a table of contents (TOC) is indeed sometimes important so that we often encounter it. Some well-known websites/blogs have also installed this table of content feature to make it easier for readers.

Table of Contents (TOC)

Table of Content (TOC) or Table of Contents is a feature in posts that contain discussion subtitles. It can also be said that the table of content is a detailed list of an article on a blog. This table of contents will display subtitle links or details of the contents of the article so that visitors can immediately find the important points they are looking for.

The table of Content feature is usually installed in articles that have a fairly long discussion. Usually this feature is placed above the first subtitle to make it easier for readers to see. Without having to read all the contents of the long article, visitors will find it easier to find the discussion they are looking for.

Benefits of Installing a Table of Contents

As mentioned above, the table of contents feature serves to make it easier for visitors to read articles, especially long articles. Sometimes visitors also don't have much time so they don't need to read the entire contents of the article. Just click on the subtitle, visitors will be directed to the desired discussion point.

Not only that, this feature also supports blog SEO so that it is more search engine friendly. More structured content is also preferred by Google. In search results, the sub-headings in the article will usually be indexed and appear at the bottom of the search description. This is one of the functions of the existence of subtitle links in the table of content feature earlier. Of course this will also be more interesting and have more value in the eyes of the readers.

Well, for those of you who want to install it on your blog, the simple Table of Content (TOC) tutorial below may be applicable to your blog.

How to Install Table of Content (TOC) on Blog

1. Open your blogger account.
2. Select the theme menu and click on edit html.
3. Find the code ]]</b:skin> or </style> and place the following code above it.

/* TOC */

.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:13px;padding:11px;margin:8px 0 30px 0;border:1px solid;border-color:#B1B1B1;border-radius:5px}

.table-of-contents li{margin:0 0 0.25em 0}

.table-of-contents ul li{margin:6px;padding-bottom:4px;border-bottom:1px solid #e4e4e4} 

.table-of-contents a{color:#003ecc;line-height:24px} 

.table-of-contents h4{font-size:18px;margin:0;cursor:pointer}

.table-of-contents h4:before{font-family:FontAwesome;content:&quot;\f00b&quot;;padding-right:10px}

@media screen and (max-width:600px){.table-of-contents{font-size:15px} .table-of-contents h4{font-size:20px}}

Description : make sure the font awesome code link has been installed in your blog template. If it doesn't exist, place the following code above the </head> code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>

     4. Next find the code </body> and place the following code above it.

<script async='async' defer='defer'>

var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Daftar Isi</h4><ul style='display:none'>&quot;;$(&quot;article h2, article h3, article h4, article h5&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;article h2, article h3, article h4, article h5&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>

     5. Save the theme.

Installing On Posts (Articles)

After entering the code into the html edit, then we just need to install it on the article that we want to add the table of contents feature to. Ideally this feature is installed on super long articles.

1. Open the desired post.

2. Open it in html mode (not compose) and put the following code above the first subtitle.

<div class="toc-pro"></div>

Make sure every subtitle in the article has been set using heading tags H2, H3, etc.

3. Save the post again.

Please see the results. Now you can find the table of contents feature or table of contents in your blog articles.

Closing

Thus the discussion and blogging tutorial this time about How to Install the Table of Contents Feature or Table of Contents in Blog Posts. I hope that this article can be useful for all readers. Thank you