You may have written a three-thousand-word blog post, and if you add a table of contents to your Blogger blog, the user experience will be good. Trust me, instead of going through the entire post to check your post titles and going to your lengthy page. They will close your blog or click the back button to find the same information on another site.
In this tutorial, you will learn how to create a table of contents for Blogger blog posts automatically. We will learn how to add an automatic TOC in Blogger. Also, this does not mean that the table will always be automatically added to every Blogger blog post. But you will always have the option to display a Table of Related post in your posts. If you are still getting familiar with the table of contents, let me explain briefly.
What is the table of contents in a Blogger blog?
The TOC, is usually displayed in blog posts or articles before or after the first paragraph of the blog post. The TOC shows your posts or articles’ main headings or subheadings and gives an overview of your entire publication.
What is the automatic table of contents in blog posts?
Adding the Article TOC widget to Blogger lets us automatically collect all the titles and subtitles from your blog posts without manually defining title tags. It makes them a lovely table for readers to navigate. For example, when you visit Wikipedia, you find a table of contents on any topic/article you read. This is because when authors publish their articles on Wikipedia and specify title texts, Wikipedia automatically extracts the title tags and creates the TOC.
Benefits of adding a table of contents to Blogger
It appears as a table of contents only when you begin your posts or immediately after the first paragraph. Your readers can read a few lines on the top page of your entire article.
- Therefore, a well-planned TOC can positively help.
- Make a good impression and give a more professional look to your blog posts.
- Arranging the points of your posts systematically shows your readers that the issues are organized.
- It manages readers’ expectations by providing a high-level view of your entire post or article.
- It provides a roadmap for readers to easily navigate instead of going through each section of your post.
Does a table of contents improve Blogger blog SEO?
Yes, a TOC can help with SEO too. Here are some reasons why SEO can enable you to create a table of contents.
- When writing extended contents, add a table of contents. Your contents are divided into subsections, each with different aspects on the same topic.
- So, with a longer post, your article will likely rank higher in search engines, and Google also considers more extended content as a ranking factor.
- It increases your site’s click-through rate or CTR as Google displays a “Jump to section” link crawled from the TOC of your posts and displays the most relevant result to users.
How to add an article’s Automatic table of contents widget to Blogger
Log in to your Blogger blog, select the theme, and click Edit HTML. Find the </head> tag and paste the code below right above the tag.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin by wordpress-771791-2621957.cloudwaysapps.com
function nurTOC() {var nurTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);nurTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("nurTOC").innerHTML += nurTOC;}}function nurToggle() {var nur = document.getElementById('nurTOC');if (nur .style.display === 'none') {nur .style.display = 'block';} else {nur .style.display = 'none';}}
//]]>
</script> Now, find the tag ]]></b:skin> and paste the CSS code below directly above the tag.
.nurTOC{border:5px solid #90949c;box-shadow:1px 1px 0 #ccc; background-color:#f5f6f7; color:#777; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px;display: block; width: 80%;}
.nurTOC ol,.nurTOC ul {margin:0;padding:0;}
.nurTOC ul {list-style:none;}
.nurTOC ol li,.nurTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.nurTOC a{color:#225180;text-decoration:none;}
.nurTOC a:hover{text-decoration:underline; }
.nurTOC button{background:none;font-size:28px;
position:relative; outline:none;cursor:pointer;border:none; color:#666;padding:0 0 0 15px; margin-bottom: 20px;}
.nurTOC button:after{content: "\2228"; font-family:'cairo';position:relative; right:10px;font-size:14px; bottom:3px;} Next, find the<data:post.body/> text tag and replace it with the code below.
<div id="post-toc"><data:post.body/></div>Click Save to save your settings.
How to show table of contents in Blogger blog posts
It is good practice to show the table of contents immediately after the first paragraph or before the first heading of your blog post begins. To display the table contents in your blog posts, when you write a new blog post, switch to HTML mode and paste the code below right after the first paragraph, before the first heading starts, or anywhere else of your choice.
<div class="nurTOC">
<button onclick="nurToggle()">Table of Content</button>
<ol id="nurTOC"></ol>
</div>Activate the table of contents in Blogger blog posts
When you finish writing your blog post after adding the code above, So, it’s time to activate the TOC plugin to generate the table of contents when your page loads automatically. So, to activate the table of contents, paste the below JavaScript code at the bottom where your post ends in the same “View HTML” section above.
<script>nurTOC();</script>After you finish your other work, like setting tags, links, search description, etc., and finally click the “Publish” button, you will find that the “Table of Contents” has been automatically generated for your post.
1 thought on “How to add Automatic table of contents in Blogger Post”