Do you want to add a Table of Content in your Blogger website ? if yes then you are at the right place. If you are a WordPress user then you can easily add a Table of Content with the help of plugins in your blog. But unfortunately there are no plugins for your Blogger website. You have to change your Blogger website HTML and CSS coding.
You will
be quite surprised, how can I add Table of Content in Blogger Website because I
don't know coding. But believe me you can add a Table of Content in your
Blogger Website very easily, no matter if you are a beginner or not. Today I am
going to tell you, How to Add a Table of Content in Blogger Website in just a
few simple steps.
Benefit the Table of Content
When you use Table of Content in your Blog or
Website, it is quite easy for users to access any part of your article. It
increases user experience and it also helps Google to understand and shows your
content in the right place of the SERP area.
Read Also:
- Top 5 Best Festival Wishing Script for Blogger Free Download
- How to Create YouTube Thumbnail Downloader Tool Website in Blogger Free
What is Table of Content
When you give headings in any particular blog post, Table of Content links all your headings in one single table. And users can explore your content very easily. Users can go anywhere inside your blogpost just by clicking on the heading given in your Table of Content.
It
helps Google to rank your paragraph of headings. It will also help you to
decrease your website bounce rate.
How to Add Table of Content Step by Step
It is quite simple to add a Table of Content in
your Blogger website. All you need to do is, just follow these steps given
below.
Before applying these steps, please take your
theme back up. So that you can restore your theme setting if you face any
error.
Step1. Go to Blogger Dashboard
Just go to your blogger dashboard and go to the
theme section.
Step2. Click on Edit HTML
In the theme section, click on the down arrow
given right ahead of Customize. And then click on edit HTML.
Step3. Add Code Below <Head> Section
Inside the theme editor, you just have to find
the <head> section by pressing ctrl+F and type <head>. After
finding this, copy code given below and paste below of <head> section
then click on Save.
<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[//*************Table of Content (TOC) plugin by thehindibiography.infunction avsTOC() {var avsTOC=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);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}//]]></script>
Step4. Find ]]></b:skin> code
After this, you just have to
]]></b:skin> this code. Just press ctrl+F and type this code and press
enter to search. After finding this code, please copy the code given below and
paste above ]]></b:skin>.
.avsTOC{border:5px solid #EE5535;
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%;}
.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
margin:0 0 0 30px;font-size:15px;}
.avsTOC a{color:#EE5535;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC 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;}
.avsTOC button:after{content: "\f0dc";
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;}
Step5. Find <data:post.body/> Code
After this, you have to find
<data:post.body/> this code as you find all previous code. Replace all
these <data:post.body/> code with this code given below. And all set.
<div id="post-toc"><data:post.body/></div>
Step6. Add Code in Blogger Post
Now you are ready to add Table of Content in
your Blogger post. Whenever you post an article and want to add a Table of
Content in your Blogger post, you just have to paste this code given below in
your Blogger post where you want to add Table of Content.
<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>
Step7. Add this Code End of The Blogger Post
After pasting the previous post, you have to
paste this code at the end of your Blogger post.
<script>avsTOC();</script></div>
Conclusion of
I hope this article How to Add a Table of Content in a Blogger Website will help you. If you have any query or question regarding this post then please comment. We will feel honored to help you. Thank You.