The way by doing SEO of the blog your blog becomes SEO-friendly, in the same manner by adding a table of content your blog becomes users friendly. I give you the full information about how to add?
How to add a Table of content to your blogger?
As you must have noticed that on the post's homepage a Table of content is there. By this, if users want to know about any point then they click on the table of content's heading. Through this users reach the heading.
If you have a table of content then your blog would look professional. Through the plugin in WordPress, you can use the Table of Contents in your post. But Blogger is not able to add any plugin. So to add the table of content in Blogger, there is some code that you will need to add to your website.
This code is of two types. One, you have to add to the theme of the website. Which you have to do only one. Second, you have to add to the HTML of your post. Which you have to add before publishing the post every time.
Step by step guide to add a table of content to your blog
First login to the blog. Go to your blog's dashboard. Click on the dashboard's theme. And get back up by clicking on 'Backup'. If you do some mistake then you can again install it. You won't be needing to optimize again.
Do this code only once, no need to repeat it.
1. 1st Step to edit HTML code
2. 2nd Step to point on an HTML page
3. 3rd Step to Ctrl+F press
4. 4th Step to paste code👉👉 </head> and enter
Where this code is there, paste the below code above it.
copy and paste the code.👇👇
<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 techonly99.xyz
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[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>
2. Step to paste this code into the search box and enter.👉👉👉 ]]></b:skin>
Where this code is there, paste the below code above it.
copy the code and paste.👇👇
.avsTOC{border:1px solid #999999; box-shadow:0px 0px 0 #EDE396; background-color:#f3f3f3; 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:#6fa8dc;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;}
3. Step to search the code and enter.👉👉👉 <data:post.body/>
Copy the below code and replace it with this code.
Where the code is there, replace it with the below code.👇👇
<div id="post-toc"><data:post.body/></div>
4. Step to save
Now your next step is to go to your Blog's dashboard. And edit any one post. Whichever post that you want to add Table of content.
You have this code every time on whichever post you want to add a Table of content. So let's know how to add.
1. Open the post's HTML code.
2. Step to paste code
On whichever post you want to add, paste the below code. 👇👇
3. Step to paste the code at the end of this page. 👇👇👇
<script>avsTOC();</script></div>
Then go back to compose view and click on the update.
Like this, you can add a table of content to your post. I hope, you have got all the information. Still, if you have any problems you are free to comment. I will try my best to answer you. Thank you.
What to next read
0 Comments