Trending

How to make Table of Contents / Add table of contents

How to make Table of Contents / Add table of contents

This image shows How to make Table of Contents / Add table of contents

Many of you might have listened to the content table in blogger.  But, more people still don't know how to add the table of contents (TOC) in blogger. In this technical era, everybody wants to rank their blog post on the top page of Google and another search engine as well. But, without perfect SEO and required qualifications you always losing to rank the 1st position on Google page. Today I am going to show you how to achieve on the first page of Google by adding the table of content (TOC) in blogger. 


{tocify} $title={Table of Contents}

What are the advantages of using Table of Contents? 

All of you already know that the table of content (TOC) is appearing on the top side of the article/post.  Basically, a blog table of contents will help your reader to get an idea of your whole article/post simply. That's why a content table in blogger is necessary and it also pushes your rank on Google. Now, let's look advantages of using a table of contents.

  1. A table of content will help you to give a professional look to your article/post.
  2. The table of content will help you to arrange your articles/posts in a systematic way.
  3. A table of content will help you to manage your audience's expectations by providing a high-level view of your article/post.
  4. A table of content will helps your audience to navigate your whole article/post.
  5. A table of content will help you to make your article/post simple and easy for readers.

What are the Disadvantages of using Table of Contents?

We already talk about the advantages of a blog table of contents (TOC). Now let's talk about some disadvantages of the content tables in bloggers. 

  1. Table of content takes more time to set up, you have to set each Table of content (TOC) entry.
  2. Table of content is the older method and it may no longer active in near future.
  3. The table of content shows the pagination problems if you leave Show/Hide option turned on while updating.

What are the Features of the Table of content (TOC) Plugin?

The table of content has many features. It is made in such a way that you can easily impress your readers and may rank on Google if you go through it systematically. Now, let's talk about the features of the content table in blogger.

  • The first thing the table of content is coded with JavaScript and CSS.
  • It is designed in such a way that until your whole webpage is not loaded it won't load.
  • The table of content is SEO friendly and it will help you to rank your article on Google.
  • TOC is lightweight and it won't affect your page load time.
  • TOC is highly responsive and customizable.
  • TOC contains a toggle button that helps to hide or unhide.
  • TOC executes only when invoked which means you can enable or disable TOC on a specific Page or Post.

What is an Automatic Table of Contents?

An automatic table of content means arranging all of the headings and subheadings tags from your blog post automatically without characterizing the heading tags and makes it into a beautiful table for your audience to easily navigate. Let's take an example WIKIPEDIA, If you ever visit Wikipedia then you might see that there is a table of content inside the Wikipedia which makes easy you to navigate each and every topic you want.

How do I make a table of contents automatically?

If you want to create the automatic table of content then just follow the steps below.

  • Firstly, move your cursor where you want your table of contents.
  • Then, on the reference ribbon of the table of the content groups, click on the arrow next to the table of content icon and then select the custom table of contents.
  • Now you added the automatic blog table of contents.

How to add a table of contents in blogger?

It is quite easy to add a table of contents to a blogger. I will guide you step by step to add a content table in blogger. 

Step 1:- Firstly, you have to log in to your blog where you want to add your Table of contents (TOC). Then, click on the theme option and click on edit HTML like as shown in the image.

This image shows How to make Table of Contents / Add table of contents Step 1:- Firstly, you have to login to your blog where you want to add your Table of content (TOC). Then, click on the theme option and click on edit HTML like as shown in image.



Step 2:- Now, you have to find </head> inside the HTML and paste the below given code just above the  </head> tag.

This image showing This image shows how to make Table of Contents / Add table of contents Step 2:-  Now, you have to find </head> in the inside the html and paste the below given code just above the  </head> tag.



<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'> 
//<![CDATA[ 
//*************TOC Plugin V2.0 by MyBloggerTricks.com 
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")} 
//]]> 
</script>


Step 3:- Find ]]></b:skin> code in your blogger template and then paste this CSS code in your blog.

/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
 font-family:Oswald, arial;
 display: block;width: 70%;
 }
 
 .mbtTOC2 button{
 background:#ACDEFB;
 font-family:oswald, arial; font-size:22px;
 position:relative;
 outline:none;
 border:none;
 color:#2E2E2E;
 padding:0 0 0 15px;
 }
 
 .mbtTOC2 button a {
 color:#FF0313;
 padding:0px 2px;
 cursor:pointer;
 } 
 
.mbtTOC2 button a:hover{
 text-decoration:underline; 
 } 
 
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
 }

.mbtTOC2 li{margin:10px 0;  } 

.mbtTOC2 li a {
color:#EA1414;
 text-decoration:none;
 font-size:18px;
 text-transform:capitalize;
 } 
 
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
 
.mbtTOC2 li li a{
 color:#040404;
 font-size:15px;
 }


.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/* 
.point2 {list-style-type:lower-alpha} 
.point3 {list-style-type:lower-roman} 
.point4 {list-style-type:disc} 
*/


Step 4:- Find <data:post.body/> and then replace with the given code.

<div id="post-toc"><data:post.body/></div>

Note:- If you have more than one <data:post.body/>  then you have to replace each. 

These are the best ways to add a table of contents to your blog post. All the above steps are for your blogger theme. Now you have saved or updated your theme and get back to your post to put the remaining coding.

Step 5:- Now, you have to go to your blog post where you want to show your table of content format. You need to shift your compose mode to HTML mode and now you have to paste this below code in your first paragraph.

<div class="mbtTOC2"> 
<button>Contents <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button> 
<div id="mbtTOC2"></div> 
</div>

This image shows how to make Table of Contents / Add table of contents Step 5:- Now, you have to go to your blog post where you want to show your table of content format. You need to shift your compose mode to HTML mode and now you have to paste this below code in your first paragraph.



Step 6:- Then paste this code at the last of your article/post.

<script>mbtTOC2();</script>

Note:- You have to follow the 5th and 6th steps in each and every blog post.  In this way, you can add a table of content in blogger.

Some color codes for the Table of contents 

To change background color #FFFFEO
To change border color #f7f0b8
To change font color #707037
To change Anchor link color #0080FF
To change the font size of anchor Links 15px
To change the font size of TOC heading text 20px

To know more HTML color codes visit here:- https://htmlcolorcodes.com/

How to make the table in a blogger?

It is quite easy to make tables in a blogger with coding. I will put some coding down, you simply copied it and paste it into your post/article in HTML mode and customize it according to your needs.



Sample of Table in Blogger

My blog Aurther Links
PUBG NEW state TechGuru66 PUBG NEW state
Windows 10 update TechGuru66 Windows 10 update
Premium blogger templates TechGuru66 Premium blogger templates
Battelground Mobile India TechGuru66 Battelground Mobile India
20 ways to go viral TechGuru66 20 ways to go viral
PUBG Whatsapp groups TechGuru66 PUBG Whatsapp groups

Paste this HTML code into your blog for making a table like the above and customize it as your desire.

<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>Sample of Table in Blogger</h2>

<table>
  <tr>
    <th>My blog</th>
    <th>Aurther</th>
    <th>Links</th>
  </tr>
  <tr>
    <td>PUBG NEW state</td>
    <td>TechGuru66</td>
    <td><a href="https://www.techguru66.com/2021/05/pubg-new-state-by-krafton-inc.html" target="_blank">PUBG NEW state</a></td>
  </tr>
  <tr>
    <td>Windows 10 update</td>
    <td>TechGuru66</td>
    <td><a href="https://www.techguru66.com/2021/04/how-to-update-windows-10.html" target="_blank">Windows 10 update</a></td>
  </tr>
  <tr>
    <td>Premium blogger templates</td>
    <td>TechGuru66</td>
    <td><a href="https://www.techguru66.com/2021/05/Free-Premium-Blogger-Template.html" target="_blank">Premium blogger templates</a></td>
  </tr>
  <tr>
    <td>Battelground Mobile India</td>
    <td>TechGuru66</td>
    <td><a href="https://www.techguru66.com/2021/05/battleground-mobile-india.html" target="_blank">Battelground Mobile India</a></td>
  </tr>
  <tr>
    <td>20 ways to go viral</td>
    <td>TechGuru66</td>
    <td><a href="https://www.techguru66.com/2021/05/20-ways-going-viral-on-social-media.html" target="_blank">20 ways to go viral</a></td>
  </tr>
  <tr>
    <td>PUBG Whatsapp groups</td>
    <td>TechGuru66</td>
    <td><a href="https://www.techguru66.com/2021/05/pubg-whatsapp-group-links.html" target="_blank">PUBG Whatsapp groups</a></td>
  </tr>
</table>

</body>
</html>

How do you mark a table of contents entry?

To mark a table of contents entry you need to select text in the document first and press Alt+Shift+O to open the mark table of contents entry dialog. Then type the required text in the "Entry" box and click the mark.

Why is my table of contents messed up?

When your headings and subheading are explicit and not rely on one style then you found your table of contents messed up. So, keep it up at one style and proper.

What does the table of content include?

A table of contents includes the titles or descriptions of first-level headings, and sometimes it includes second-level headings within the chapters and even includes third-level headings within the sections.

Does Blogger own my content?

Google owns Blogger which suggests that you simply don't own your content. You risk having your blog pack up all of a sudden or explanation.

Does the introduction precede the table of contents?

The table of contents is found on a page right at the start of a tutorial writing project. It comes specifically after the page and acknowledgments but before the introductory page of an article project.

How we add a table of contents to the ghost theme?

Navigate to a post in Ghost admin and make a replacement HTML card within the area you would like your table of contents to see. An HTML card is often added using the “+” button or by typing “/HTML” and hitting enter. Then click save and consider the post

Do Table of Contents help SEO?

A table of contents makes it easier for users to leap to the section they need to read in long articles. It also helps together with your WordPress SEO because Google automatically adds a jump to section link next to your site in search results.

Is blogging a waste of time?

The answer remains YES! consistent with the newest blogging stats, blog posts are among the foremost shared content online. Blogging definitely isn't dead and you'll still make money from it in 2020. So, if you would like to start out a blog business this year, keep reading.

How does one use a table of contents easily?

Basically, you can enable or disable the table of contents on your post basis. Choose which headings are wont to generate the table of contents. This can also be assailed on a post-by-post basis. Simply exclude headers globally and on a post-by-post basis.

How to add a table of contents in WordPress?

To add the table of contents in WordPress you have to follow these steps.

Step 1:- Navigate to Settings > Fixed TOC.
Step 2:- Go to the General tab, select which post types you would like to use a TOC and which heading levels to incorporate, and where you would like your TOC to be located.
step 3:- Then, go to the Color tab, choose the color scheme for your TOC.

What is the aim of a content page?

Contents pages provide readers with a guide to the book - a roadmap that helps them find out the way to navigate the text to urge the foremost out of it. They also prevent a text from becoming overwhelming by breaking it down into smaller chunks, meaning a reader is a smaller amount likely to place it down.

How does one write a table of contents for an assignment?

For the one write table of contents for assignment follow these steps.

Step 1:-Use a title case for every heading.
Step 2:- Include dots to permit the reader's eye to scan from the section to the pagination with ease.
Step 3:- If this is often a tutorial paper, number each section and subsection.
Step 4:- Indent each subsection under its parent section.

Do you number the table of contents page?

On a formal basis, like theses and dissertations, it's common that the page numbering first starts with the introduction or background. Finally, the page numbering is excluded from the title, and also the abstract and table of contents page.

What is the aim of headings?

A heading may be a short phrase that indicates what the subsequent section of your essay, report, or thesis is all about. Headings are wont to organize the presentation of your argument and lead the reader through the paper. The reader should be ready to preview what your paper covers your argument by reading just the headings.

What is a subheading?

A subheading is a text which is placed under a headline in a smaller font and works what the headline says. The most important parts of articles which sometimes explains in the headline above it.

How to add page numbers after the table of contents?

Follow these steps for adding page numbers after the table of contents.

Step 1:- Click pagination > Format pagination s to open the Page Number Format panel.
Step 2:- To start numbering with 1, click Start at, and sort 1 (otherwise, Word will automatically apply for the particular page number). ...
Step 3:- After you finished, click Close Header and Footer or double-click anywhere outside the header or footer area.

How does one organize a table of contents?

List the headings of the document so as. Start by listing the headings of every section within the document so as. Include only the main titles or headings within the document first. Write them down vertically on the page, using an equivalent font and font size for every heading.

How to exclude a table of contents from page numbers?

To exclude a table of contents from page numbers you have to follow these steps.

Firstly, Place your cursor on the primary line of the page you would like to be page 1.
Then, click Layout within the Word ribbon.
After that click Breaks.
And click Next Page.
Now double click on the header area.
At last click Link to Previous within the Design ribbon.

What is another word for the table of contents?

Alternate Synonyms for "table of contents": contents, summary, statement, listing, sitemap, graph and etc.

Does table of contents precede abstract?

APA format guidelines for the table of contents. during the process of thesis or dissertation, the table of contents comes between your abstract and your introduction. It should be written within the same font and size because the remainder of your text

What comes the first table of contents or introduction?

The table of contents is found on a page right at the start of a tutorial writing project. It comes specifically after the page and acknowledgments but before the introductory page of an article project. This position at the start of a tutorial piece of writing is universal for all academic projects.

What we cover in this blog?

In this article, we cover how to make a table of contents in a blogger.  Overall we get to know that the table of contents will directly benefit our articles and also good for SEO. So, don't confuse to use the table of content.

  • content table in blogger.
  • how to add table of contents in blogger.
  • how to create table in blogger.
  • how to create table in blogger post.
  • how to make table in blogger.
  • blog table of contents.
  • add table of content in blogger.
  • easy table of contents shortcode
  • how to add table of contents in wordpress without plugin
  • blogger table of contents widget
  • best table of contents plugin wordpress
  • wpbakery table of contents
  • luckywp table of contents
  • floating table of contents wordpress
  • canva table of contents
  • what is table of contents in
  • mailchimp table of contents
  • table of contents 
  • table of content format 
  • content table for blogger
  • blogger table of contents widget
  • how to make table of contents in blog
  • how to add search bar in blogger
  • recent post html code for blogger
  • table of contents website examples
  • custom comment box for blogger
  • stylish comment box for blogger

If you found any difficulty while implementing the Table of content then kindly comment down. We will more than happy to help you. 

Post a Comment

Previous Post Next Post