Many Bloggers are finding the best way to add Table of contents in blogger, so now in this article we known the best way which is easy and fast way for beginners bloggers.
Also Read :- Blogging Related Posts
Why Table of Content is important
Table of content is very important for blog which creates better user experience and help in search engine optimization of your blog and posts. Blog posts will may better rank in search engines.
Table of Content in Blogger
Adding Table of content in blogger is little bit hard , but in WordPress table of content plugins are available which make easy. But in this post we will know easy method to How to Add table of content in Blogger .
Steps to Add Table of content in Blogger:-
- Open Blogger Dashboard
- Go to Theme section
- Click on Edit Html
- Then search /head section in HTML codes
- Then paste below given CSS code above /head
- Then find /body section in HTML codes
- Then paste JavaScript code above /body tag
- Click Save
- Final steps then Paste the HTML Code given below in post's html where you want to show table of content
Codes:-
1) CSS
<style>
article {
max-width: 50em;
background: white;
padding: 2em;
margin: 1em auto;
}
.table-of-contents {
float: right;
width: 40%;
background: #eee;
font-size: 0.8em;
padding: 1em 2em;
margin: 0 0 0.5em 0.5em;
}
.table-of-contents ul {
padding: 0;
}
.table-of-contents li {
margin: 0 0 0.25em 0;
}
.table-of-contents a {
text-decoration: none;
}
.table-of-contents a:hover,
.table-of-contents a:active {
text-decoration: underline;
}
h3:target {
animation: highlight 1s ease;
}
@keyframes highlight {
from { background: yellow; }
to { background: white; }
}
</style>
JavaScript
<script type='text/javascript'>
var ToC =
"<nav class='table-of-contents' role='navigation'>" +
"<h2>Table of Contents:</h2>" +
"<ul>";
var newLine, el, title, link;
$("article h3").each(function() {
el = $(this);
title = el.text();
link = "#" + el.attr("id");
newLine =
"<li>" +
"<a href='" + link + "'>" +
title +
"</a>" +
"</li>";
ToC += newLine;
});
ToC +=
"</ul>" +
"</nav>";
$(".all-questions").prepend(ToC);
</script>
HTML
<article>
<div class="all-questions">
</div>
</article>
Codes Source :- BMTECHTIPS
I hope you like the article and all the best for your blog and I wish you may get success.
Thanks, share to friends :)
Comments
Post a Comment