How to Add Automatic Table of Content in Blogger Article
How to Make Automatic Table of Contents (TOC) in Blogger Article with Pure Javascript and CSS. Without write in mode HTML
How to Make Automatic Table of Contents in Blogger Articles with Pure Javascript and CSS
Note: This tutorial only applies to those of you who use the non-AMP Blogger Template, or can only be placed on non-AMP pages only.
Every day, Google always updates its Algorithm. It aims to make it easier for Google users to find information on search engines.
Doing repairs and updates made by Google, make Webmasters and SEO and Blogger to work more extra so that the website they manage can still compete on Google.
Some time ago, Google was updating algorithms for mobile search results. Where a content that has a Table of Contents, has 'special treatment' on Google. I will explain in detail, starting from what is the Table of Contents, the impact on the search results, and how to create a table of Contents on Blog.
What is Table of Contents (ToC) ?
In a way, this Table of Contents is a "jump link" for an article. This table of contents will make it easier for users to jump to the part of the article they want to read. So when a user click on the link of the Table of Contents, the user will immediately be able to read the part they clicked on.If you've ever read an article on Wikipedia, of course you've seen Table of Contents, which makes it easy for you to go to a particular article section. That's about Table of Contents.
Impact of TOC on SEO?
Apparently, the use of Table of Contents on a website content is quite important, especially for those of you who rely on website traffic from Google. Why is that important?Because Google's robots will use parts or subheading in article (which already use TOC) to become a sitelink. You can see examples in the screenshots of mobile search results below:
What I marked in red is a sitelink created by Google, by taking data from the Table of Contents in the Blog Article.
But for Blogger users, adding TOC must use JavaScript embedded in the template.
This time, I will discuss the Tutorial on How to Automatically Install a Table of Contents on Blogspot. I mean automatically, you don't need to write articles in HTML mode, and enter the manual code every time you write an article.
All the code that I will share below is enough to place in your Blogger template, and you can simply create H3 (subheading) and H4 (minor subheading) when writing articles..
Just follow the steps below:
Open the Themes tab on the Blogger.com Dashboard, then click Edit HTML to install JavaScript and CSS codes for automatic Table of Contents.
Add Table of Contents on Blogger Automatically
If you are a WordPress CMS user, of course it is very easy to create a Table of Contents in an article automatically, just use an additional plugin that is already widely available in the WordPress plugin gallery.But for Blogger users, adding TOC must use JavaScript embedded in the template.
This time, I will discuss the Tutorial on How to Automatically Install a Table of Contents on Blogspot. I mean automatically, you don't need to write articles in HTML mode, and enter the manual code every time you write an article.
All the code that I will share below is enough to place in your Blogger template, and you can simply create H3 (subheading) and H4 (minor subheading) when writing articles..
Just follow the steps below:
Open the Themes tab on the Blogger.com Dashboard, then click Edit HTML to install JavaScript and CSS codes for automatic Table of Contents.
Copy this CSS and paste beforre ]]></b:skin> or between <style>
Until here, JavaScript installation for Adding ToC automatically has been completed, just activate it in the article so that it appears automatically every time we publish the article. For that, the next process is to call the script in blogger data
Search for
/*CSS ToC Alinux*/
.TOCalinux {
line-height: 1.4em;
padding: 20px 30px 20px 10px;
display: block;
width: 95%;
margin: 0 auto;
background: #f0f3f4;
border: 1px solid #ccc;
box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset;
border-radius: 3px/6px
}
.TOCalinux ol,
.TOCalinux ul {
margin: 0;
padding: 0;
}
.TOCalinux ul {
list-style: none;
}
.TOCalinux ol li,
.TOCalinux ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.TOCalinux a {
color: #0080ff;
text-decoration: none;
}
.TOCalinux a:hover {
text-decoration: underline;
}
.TOCalinux button {
background: #FFFFE0;
font-family: oswald, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #707037;
padding: 0 0 0 15px;
}
.TOCalinux button:after {
content: "\f107"
font-family: "
Font Awesome 5 Free"
position: relative;
left: 10px;
font-size: 20px;
}
Next, we will install JavaScript which is useful for creating Table of Contents automatically in Blogspot articles. Copy below code before </head> atau </head><<script type='text/javascript'>
//<![CDATA[
function TOCalinux() {
var TOCalinux = i = headlength = gethead = 0;
headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
for (i = 0; i < headlength; i++) {
gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
TOCalinux = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
document.getElementById("TOCalinux").innerHTML += TOCalinux;
}
}
function mbtToggle() {
var mbt = document.getElementById('TOCalinux');
if (mbt.style.display === 'none') {
mbt.style.display = 'block';
} else {
mbt.style.display = 'none';
}
}
//]]>
</script>
Until here, JavaScript installation for Adding ToC automatically has been completed, just activate it in the article so that it appears automatically every time we publish the article. For that, the next process is to call the script in blogger data
<data:post.body/> . Search for
<data:post.body/> in your template, then replace it with the code below. It should be noted, usually the code <data: post.body/> appears more than one, please adjust it.<div id="post-toc">
<div class='TOCalinux'>
<button onclick='mbtToggle()'>Contents</button>
<ol id='TOCalinux' />
</div>
<data:post.body/>
<script>
TOCalinux();
</script>
</div>
All JavaScript and CSS installation processes are complete, click Save to confirm the template changes.
To view the results / demo of the Blogger Table of Contents, Read this article: Factors that Affecting Website Speed Performance, and Solution.
How to Create a Blog Article so that TOC Appears
That JavaScript above will automatically read the H3 and H4 heading tags, which will then become the Table of Contents for the article.So that the Table of Contents is not empty, make sure you use Subheading and or Minor Heading when writing articles on the Blogger panel. more details for how to change a sentence to Subheading and Minor heading, see the picture below
Yep, that's the Alinux Blog tutorial about How to Make Automatic Table of Contents in Blogger Article. Hopefully it is useful, if it is useful it will be very grateful if you share this article on social media :)