New Automatic Table of Contents (TOC) For Blogger 2023
We can make a Table of contents or (TOC) on blog posts like Wikipedia on our blog in the right way. The TOC helps readers to understand the contents of the article posts on our blog. In this article, yarbaiwa will show How to Make an Automatic on Blogger Platform, let’s get started.
What is a Table of Contents or (TOC)?
The Table of Contents referred to in this article is an automatic table of contents that describes a blog post page. With this (TOC), readers can understand and find out what is discussed and written in blog article posts. This (TOC) is also a page link where if the reader clicks on one of the Tables of Contents or TOC then the link immediately jumps to the title of the keyword that was clicked.
Benefits of Table of Contents or (TOC)
Some of the advantages if we use the Table of Contents or (TOC) in posting blog articles:
Table Of Content (TOC) will make it easier for visitors/readers to find the discussion they want to read by simply clicking on the provided link and make it easier for search engines such as Google, Bing, Yahoo, etc. to recognize our article posts because they are considered more informative for visitors/readers and also make our blog article posts more professional.
How to Make a Table of Contents or (TOC)
Here’s how to install or create an automatic Table of Content (TOC) for blog posts. These codes must be installed in the blog template and in the posts.
Also, Check whether Are Breadcrumbs Good for Blog SEO in 2023.
1. Click Themes > Edit HTML
2. Copy this CSS for Blogger Table of Contents code above the code ]]</b:skin>
.mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; }
.mbtTOC a{ color:#c00; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content: "\f03a"; font-family:FontAwesome;position:relative;left:5px;font-size:14px;font-weight: 300;}
3. Copy and Paste the following JS TOC for Blogger code above the code
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
</b:if>
4. Make sure there is a Font Awesome link in your blog template. If not, add the following code above the code
<link href='https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
Font Awesome is used to display icons in the Table of Contents.
5. Find and replace the posting code (usually the second code) with this code:
<div id='post-toc'><data:post.body/></div>
6. Please save the template.
The installation of the table of contents code has been completed in the template. Now how to display the Table of Contents or TOC in the post. Appearing Table of Contents on Post Page Makes sure your post has at least two subheadings with H3 heading tags. It can also be installed in an existing article, as long as that… at least has two subtitles.
After writing the post, or while editing the post, click HTML Mode, then insert these two codes:
1. Copy and Paste the following code below the first paragraph or before the first subtitle:
<div class="mbtTOC">
<button onclick="mbtToggle()">Daftar Isi</button>
<ol id="mbtTOC"></ol>
</div>
You can replace the writing with a Table of Contents.
2. Copy and paste the following code at the end of the post:
<script>mbtTOC();</script>
This is an article about How to Create an Automatic Table of Contents, (TOC) on the Blogger Platform that yarbaiwa can share. Hopefully, this article is very useful for you. Good luck.
