Wednesday, April 24, 2019

How to Add Automatic Table of Contents in Blogger Blog – Tech Usmani


Hello Friends, Today I will tell you how to add an automatic table of contents in blogger blog. If your blog is hosted on blogger and you want to add a table of content in your posts then it is not easy to add it as compared to WordPress because you can easily add a table of contents in the WordPress blog by using Plugin. But in this article, I will teach you in detail about it.

table-of-contents-in-blogger-blog

Table of Contents in Blogger Blog

It’s little difficult to add a table of content in a blogger blog post because you will have to add some HTML code in the blogger. If we talk about WordPress, then it is much easier to add a table of content in it using Plugin. But I am providing codes to add it in blogger.

This is not the original code because the original code is different than my requirements. I have modified the original code according to my needs so that I can make it better for the table of content. If you want to see the real code of this then click here.


Steps to Add Table of Contents in Blogger Blog


1. First of all Login into Blogger

2. Click on Theme  Edit HTML

3. Now press CTRL + F and find </head>

4. Copy the CSS code and paste it above the </head>

5. Now press again CTRL + F and find </body>

6. Copy the JavaScript code and paste it above the </body>

7. Now you will have to do some changes in your blog post headings tags. Go to Edit Post then click on HTML. Your blog post first heading is <h2> now replace this with <h2 id=”one”> and also replace all H2 and H3 heading with <h3 id=”two”> and <h3 id=”three”> respectively. If your post contains more than three headings then continue replacing heading tags with four, five, six and so on.

The purpose of replacing this tag is when user click on any topic in the table of content then he/she will jump automatically to the topic he/she chooses.

CSS CODE

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

<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 = $( el = $(this); title = el.text(); link = title = el.text(); link = "#" + el.attr("id"); newLine = newLine = "<li>" + "<a href='" + link + "'>" + title + title + "</a>" + "</li>"; ToC += newLine; }); ToC += ToC += newLine; }); ToC += "</ul>" + "</nav>"; $( $(".all-questions").prepend(ToC); </script>

Conclusion

Finally, we have successfully added an automatic table of contents in blogger blog. If you liked my article, then share this with others. If you have any question or have difficulty in implementing it in blogger blog, then let me know via comments.

0 comments: