Friends, from the beginning of every book or you people must have seen in the post in many blogs, in which you people find all the headings and sub headings written together on which you people click on it and go straight to the point of adding it. So that it becomes easier for you to know what settings are written in it and what is written about it.
However, friends, if a very long post is written in a blog’s website and there is no table of contents in the beginning, then the users are not able to know whether that post is useful for them or not, and because of this, they do not read it. Without reading the post further, considering it as a long question, we close the post. Friends, it is very important that in the post of your block, after the first paragraph of the beginning, you guys should include a table of contents which is You should include it in a longer post. So through today’s article I will tell you how you can add a table of content to your blogger’s website.
WHAT IS TABLE OF CONTENTS
Friends, there are many models and plugins which can be used in the table of contents post in our WordPress website so that you do not face much problem in doing it in WordPress, however, if we talk about putting the table of contents on the blogger platform. For this, we will need some code, so that we can show our table of contents in the blogger’s post.
This table of contents is in an organized outline form for any post, where all the headings and subheadings (H1, H2, H3, and H4) are visible to you. With the help of which our businesses can easily find out what is there in the post and what has been pointed out in our post through the heading and they are able to explore the heading without any problem and hassle.
You people can track the table of contents from where your article is starting in the Wikipedia of the article that you people write the article as per your own which gives a new experience to our users and clients. Table of Contents Through this, he can see the heading better, what is written about that heading, and this table of contents helps our ACO to perform better for our block.
Google itself connects our Ho to the table of contents which is present in our post and brings it to our page through the search list so that if any user clicks on the link, he will directly go to the particular segment written in the post. It remains for him but lakhs of people see the same thing, behind this also you people get many benefits of it by putting the table of contents in our post.
If you want a demo of content of TOC then you can see it in this post.
BENEFITS OF USING TABLE OF CONTENTS IN BLOGGER
- What is going to be most useful to you after adding the table of contents is that our visitors feel a different kind of experience.
- Through our blog articles, users get another good SDO experience for the ranking of our website.
- Table of Contents looks like a very professional and good design on our website, so that the website we create for bloggers through WordPress looks exactly the same and our visitors also like it.
- Table of contents organizes the block articles of our headings and sub headings in an ordinary manner.
- There is a table of contents. There is no side in it but it presents the quality like on the side or it becomes a great way to bring our bed to our website.
- Our table of content helps us in another way which is our bounce rate. It also stops the post from expanding due to which our bounce rate remains very low.
- Table of Contents helps us in another way to make our blog posts SEO friendly, which helps us a lot, it also helps in doing on-page SEO.
HOW TO ADD TABLE OF CONTENTS IN BLOGGER
If you people want to make a table of contents, then for this you need more knowledge, just a little code, you should know how to apply it, if you have even a little knowledge about it, then you can easily make the table. You can add off content in your blogger posts, you just need to know a little bit of HTML, CSS, and JavaScript.
However, if you do not have even a little knowledge of HTML and CSS then there is no need for it because after reading this post and understanding it, you can put the table of contents in your post as per your choice.
However, I have told you that the table of contents that is required is mostly required in long posts, so do not waste much of your time in putting the table of contents in small articles or posts. The table of contents that you have to put should be in long posts only so that your readers or visitors who come to your website will like the experience of reading the post so that they can read it through the table of contents and heading. But if it is easily accessible then you must follow the steps given below which I am going to tell you now.
Before following this step, take a backup of your blogger theme because if there is any problem with the theme, then you can make your theme normal like the old one by using the backup store theme.
- First of all you have to go to Blogger.Com
- You have to open your blogger dashboard and login
- Now you will see the theme option below, you have to click on the theme option, after that you will see the edit HTML, you have to click on it.
- Now you guys have to search in themes edit HTML </head> tag in theme.
- I have given you a JavaScript code below, you have to simply copy it and paste it above the </head> tag.
<!-- Font Awesome Free 4.3.0 -->
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<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>
- Now I will give you a CSS code in which you people have to search ]]></b:skin> tag in the theme.
- You have to copy the code I have given below and paste it above the ]]></b:skin> tag.
/* Automatic TOC by Tech Shreyansh */
.mbtTOC{padding:8px 10px;padding-bottom:8px;border:3px solid rgb(74,240,32);border-radius:24px;font-family:'Noto Sans',sans-serif;background:#ffffff;color:#001d3d;box-shadow:2px 4px 11px #c0c0c0,-2px -4px 11px #fff;width:90%;}
.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:17px;}
.mbtTOC a{color:#651a1a;text-decoration:none;}
.mbtTOC a:hover{border:2px solid rgba(255,255,255,0.2);border-radius:10px;font-size:16.9px;}
.mbtTOC button{padding:11px 23px;border-radius:11px;border:none;font-family:'Noto Sans',sans-serif;font-size:17px;font-weight:700;background:#ffffff;color:#001d3d;cursor:pointer;box-shadow:2px 4px 11px #c0c0c0,-2px -4px 11px #fff;float:center;}
.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px;}
.mbtTOC button:hover{box-shadow:inset 3px 5px 10px #c0c0c0,inset -3px -5px 10px #fff;border:2px solid rgba(255,255,255,0.2);font-size:16.9px;}
.drkM .mbtTOC{background:#1f1f1f;}
.drkM .mbtTOC{background:#2c2d31;}
.drkM .mbtTOC{box-shadow:2px 4px 11px #1f1f1f,-2px -4px 11px #000;}
.drkM .mbtTOC button:hover{box-shadow:inset 3px 5px 10px #1f1f1f,inset -3px -5px 10px #000;border:2px solid rgba(31,34,38 0.2);font-size:16.9px;}
.drkM .mbtTOC button{background:#1f1f1f;color:#fafafb;}
.drkM .mbtTOC button{background:#2c2d31;color:#fafafb;}
.drkM .mbtTOC button svg{stroke:#292828;}
.drkM .mbtTOC button p,.drkM .mbtTOC button h2{color:#292828;}
.drkM .mbtTOC button{box-shadow:2px 4px 11px #1f1f1f,-2px -4px 11px #000;}
.drkM .mbtTOC button:hover{box-shadow:inset 3px 5px 10px #1f1f1f,inset -3px -5px 10px #000;border:2px solid rgba(31,34,38 0.2);font-size:16.9px;}
.drkM .mbtTOC a{color:#13f21a;text-decoration:none;}
I have marked some things in the CSS code, you guys can change it according to your dark mod CSS of the theme.
- Now you have to search <data:post.body/> tag in your theme.
You people will find a lot of <data:post.body/> codes in different blogger templates, but although there are only two to three here, most of the <data:post.body/> codes you people will find Just have to try one by one and see which one is working.
- After that, if you have got that code, then you have to replace that code with this code which I have given you below.
<div id='post-toc'><data:post.body/></div>
HOW TO PUT TABLE OF CONTENTS IN POST
- Whenever you guys write a new post, I have given you the code below, you guys have to copy it and paste it after the first paragraph of your post.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
- And this second code which I have given you, you have to paste it exactly at the bottom of your post.
<script>mbtTOC();</script>
Friends, if you do not want to copy and paste this code again and again in each of your posts, then you can do this work automatically for every post, you just have to follow the steps given below.
- First of all you have to come to your blogger dashboard.
- Now you will get the setting option in your blogger dashboard, but you have to click on it and go to the settings of your blogger.
- Now you have to go down and you will get the option of Post template, you have to click on it.
- Now you guys have to copy the code given below and you guys have to paste the code in the space that you will see in the Post template option.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
<script>mbtTOC();</script>
- Now you all have to click on Save.
- ow whenever you click on New Post to write a post, this table of contents code will automatically appear in your post.
- Just you have to pay attention, you have to write a post <div class=”mbtTOC”> <button onclick=”mbtToggle()”>Table Of Contents</button> <ul id=”mbtTOC”></ul> which You have to write the code by giving space below it, you can see the photo of its code below.
- And you guys, the code <script>mbtTOC();</script> will come automatically at the end of your post, you guys can see the photo below.
- Just follow all these steps, if you have any problem then you can tell us on Telegram channel.
CONCLUSION
I hope that friends, this article on how to add automatic table of contents in blogger’s website will be helpful for you. If you want more such information, then definitely subscribe to our Telegram channel Tech Shreyansh.
Friends, I hope that with the help of the above tutorial, you will be able to add automatic table of contents in your blogger’s website. If you face any problem or difficulty in understanding, then you can ask us about it by commenting. And contact through that.
