How to create a table of contents on Blogger (automatic table of contents)

How to create a table of contents in Blogger – An automatic table of contents or table of contents can usually be found in files in PDF and Word formats. In addition, the table of contents is also included in an article on a website, so I’ll take this opportunity to share how to install an automatic table of contents or table of contents in posts that use the blogger platform and of course SEO Friendly.

The table of contents serves the same function on different platforms, namely links from the core that are submitted in articles or blog posts. This anchor text link makes it easier for visitors to crawl the page with a link that points to the H2, H3, or H4 header tag.

If an article that uses an automatic table of contents or table of contents on Blogger has been in Google Search for some time, a table of contents will appear with a link to discussion in that article.

How to create a table of contents (TOC) on Blogger

How to create a table of contents on Blogger

This tutorial shows you how to use Blogger’s automatic table of contents to create a table of contents in blog posts and easily install the table of contents in blog articles.

1. Please go to blogger.com and select the Subject menu and then Edit HTML.

2. Copy and paste the following CSS code just above the tag

or higher]]>. Then click on Save Topic.

.toc {border:1px solid #ccc; padding:10px 12px;border-radius:5px;display:table; line-height:1.6em;}.toc h3 {display:inline-block; margin:0 10px 0 0;font-size:20px}.toc a {text-decoration:none}.toc a:hover {text-decoration:underline}.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}.toc ul li a {color:#0000ee;margin-left:.5em}.toc ul li {list-style-type:none;}.toc ul li ul {margin-left:2em}.toctogglelabel {cursor:pointer; color:#0000ee}:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}:not(:checked) > .toctogglespan:before {content:'['}.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Sembunyikan';display: inline}.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Tampilkan'}:not(:checked) > .toctogglespan:after {content:']'}.toctoggle:checked ~ ul{display:none}:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

3rd The next step now is to install and create a table of contents in an article or blogger post. Please select the article you want to add a table of contents to and select HTML mode.

Please add the following code where you want it, ideally before the discussion, namely after the first or second paragraph. Adapt the table of contents to the one contained in your article.

Daftar Isi

  • 1Heading 1
  • 2Heading 2
  • 3Heading 3
    • 3.1Sub Heading 3.1
    • 3.2Sub Heading 3.2
  • 4Heading 4

# toc1, # toc2 is a target ID that can be customized according to how ID names are written in general.

4th The last one gives the tag in the post the table of contents ID. Even in HTML mode, you can see heading tags or tags in articles with a structure like this:

Pengertian ....

Pembahasan ....

Pengertian ....

Pembahasan ....

Pengertian ....

Pembahasan ....Pengertian .... Pembahasan ....

Add an ID (according to the TOC ID you created earlier) to the tag you want to add. The result is that the added automatic table of contents looks like this:

Pengertian ....

Pembahasan ....

Pengertian ....

Pembahasan ....

Pengertian ....

Pembahasan ....Pengertian .... Pembahasan ....

Creating a table of contents or table of contents should be done at the end of the article because if you have a preview the ID will change and you will have to rewrite the ID.

Done, and the result looks like this….

Table of Contents (TOC) on Blogger

The last word

So this is a tutorial on how to create a table of contents automatically and SEO-friendly in Blogger. With the table of contents in the post or table of contents, the articles you create naturally become more structured to make it easier for visitors to crawl your posts. Alright, that’s all for this short article, good luck and hopefully it will be useful.

Leave a Reply

Your email address will not be published.