How To Add Table Of Content in Blogger Post 2022 (2 Methods with Screenshot)

 

How To Add Table Of Content in Blogger Post 2022


Welcome to Blogger Muslimah your reliable blog and today we are going to learn about How to add table of content in blogger post in 2022. Yes, Adding table of content is important for few reasons in. The first reason is making your post SEO friendly. Of Course google and other search engines like structured, well balanced, and sequential data to show their visitors. Table of content helps you to give your reader a clear idea about what your article is written. But some of you may not know How to add table of content in blogger post. Which harms your article SEO.  But don't worry. Today you are going to learn about how add stylish table of content in your blogger post with Blogger Muslimah.

 


  How To Add Table Of Content in Blogger Post 2022 (2 Methods with Screenshot)




What is table of Content in Blogger Post ?


Add a Table Of Content In Blogger blog post to simplify your post structure and user-friendy. Table of Content in Blogger blog post makes it easy to read the post for the reader. More specifically, Table of content is a list that you provide at the beginning of your article



Benefits of  table of Content in Blogger Post ?


Google always loves well detailed and well-structured blog posts and pages. And by adding a table of content in Blogger blog posts, you make your blog post well-structured and user-friendly. add a table of content in blogger to get a better result.

And if you add a TOC in your blog post, it will be structured and reader-friendly. Google may display jump to links in the Search Result Page, it’s very beneficial for webmasters and it can increase your CTR.

Also read:  Blogging Tips and Mistakes That Bloggers Should Avoid


How to add  table of Content in Blogger Post ?


Well, Now I am going to divide the whole method into 6 simple steps. Each step will contain a screenshot so that you can easily get satisfied with How to add table of content in blogger post quires. 


Step-1

First login to your Blogger Blog in which you want to add a table of contents (TOC). Click on Theme and then click on edit HTML. (as shown in the screenshot).

How To Add Table Of Content in Blogger Post 2022


Step-2

Find </head> in the HTML file and paste the below-given code just above the </head> tag as shown on screenshot.

How To Add Table Of Content in Blogger Post 2022


copy and paste this script just before the </head> tag on your Blogger template.



<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[                      

function mbtTOC() {var mbtTOC=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);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>



Step 3

 Find ]]></b:skin> code in your Blogger template and paste the below-given code just above this tag. (You can see the screenshot below).

Find ]]></b:skin> in blogger template
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           
.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:#0080ff;text-decoration:none;}           
.mbtTOC a:hover{text-decoration:underline; }

        
.mbtTOC 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;}           

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Step 4

It’s a very easy step. Find <data:post.body/> code in your theme and replace with a new code given below. If your theme has this code more than one time then you have to replace all of them with this new code.

Replace script in blogger template
<div id="post-toc"><data:post.body/></div>

Step 5

Click on HTML view and paste the below given code where you want to show table of content in Blogger post.

HTML view of Blogger post
<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>
Add table of content in blogger

and add this code below text, as you can see in the screenshot.

<script>mbtTOC();</script>

Boom, Now you can see a Table of Content in Blogger post. You have to add these two code on every pages or posts where you want to show table of contents in Blogger.

You can choose where you want to show the table of content, before first heading or after heading, you have to just paste the script.

If you want to change the colour of any elements, then you can easily change it in simple steps. Find the default style and colour of these all code and you can change as per your choice. You can Change Font, Font Colour and Font Style.

  • Change background color #FFFFEO
  • Change font
  • Change border color #f7f0b8
  • Change font color #707037
  • Change Anchor link color #0080FF
  • Change the font size of anchor Links 15px
  • Change the font size of TOC heading text 20px
  • Know HTML code of colour here https://htmlcolorcodes.com/

Post a Comment

0 Comments