|
Blogger/Blogspot doesn’t have yet a table of contents plugin. Unlike WordPress, they have the Easy Table of Contents Plugin which allows bloggers to insert a table of contents into their posts, pages, and custom post types.
A Table of Contents (TOC) is important to orient the reader. It gives them a roadmap to your blog post (it tells the reader what to expect – how many sections/subheadings there are). Breaking up the blog posts into sections/subheadings makes it easier for users to click on links and jump to the section/subheading they want to read in especially in long articles.
I had this amazing third party Blogger/Blogspot template before that has a table of contents plugin already incorporated. Once the plugin is activated it will detect the header text or heading tags of all your posts (long or short) and automatically create a table of contents and place it before the first paragraph. It’s not the table of contents that I wanted, what I want is I will be the one to manually add a table of contents on specific posts that really need a table of contents and place it after maybe 2nd paragraph or 3rd paragraph depends on where should I properly place it.
If this is the kind of table of contents plugin you are looking for then this post is for you. This is like the table of contents of Wikipedia. This plugin doesn’t use script code to automatically detect header text or heading tags of your blog posts, because for me the use of a table of contents must not be used for all posts, it must be done manually on specific posts that really needs a table of contents. This plugin uses only HTML script code added with CSS code to adjust the layout and appearance design and a JavaScript code for the table of contents toggle list to jump the link to the table of contents.
How to Add a Table of Contents (TOC) Plugin in Blogger Posts
1. Go to Blogger.com and sing in to your account
2. Click Theme > Edit HTML
3. Search for the code ]]></b:skin> or </style>
4. Copy the CSS code below, then Paste it above ]]></b:skin> or </style>
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9} #btn_toc{font-weight:700;cursor:pointer;margin:10px} #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none} #btn_toc svg{vertical-align:middle} #toc li{cursor:pointer} #toc{display:grid} .back_toc{cursor:pointer;text-align:right} :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}Note: Look at the CSS code below:
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}- If you are using a sticky navigation menu, please set the section height:40px;margin-top:-40px.
- If you are not using the sticky navigation menu then please delete the code.
5. Then click the Save button.
6. After that go to the Posts > then edit the blog post(s) that you want to add the TOC
7. Make sure you are in the HTML view not Compose view
8. Copy the code below, then Paste after the first paragraph or second paragraph depends on where you want the TOC to appear.
<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Subheading 5</a></li>
<li><a href="#toc_6" title="Subheading 6">Subheading 6</a></li>
<li><a href="#toc_7" title="Subheading 7">Subheading 7</a></li>
<li><a href="#toc_8" title="Subheading 8">Subheading 8</a></li>
<li><a href="#toc_9" title="Subheading 9">Subheading 9</a></li>
<li><a href="#toc_10" title="Subheading 10">Subheading 10</a></li>
</ol>
</div>
</div> - Add your post URL before #toc_1 and so on.
For example https://vdbzone.com/2020/09/directory-of-tourist-destinations-to-explore-in-nueva-vizcaya.html#toc_1 and so on. - You can also add #toc_11 and so on.
9. Then add the id="toc_1", id="toc_2", id="toc_3", id="toc_4", id="toc_5" and so on within the heading tags (h2, h3, h4, h5, h6) used in your blog post(s). For example:
<h2>Subheading 1</h2> to <h2 id="toc_1">Subheading 1</h2>
<h2>Subheading 2</h2> to <h2 id="toc_2">Subheading 2</h2>
<h2>Subheading 3</h2> to <h2 id="toc_3">Subheading 3</h2>
<h2>Subheading 4</h2> to <h2 id="toc_4">Subheading 4</h2>
<h2>Subheading 5</h2> to <h2 id="toc_5">Subheading 5</h2>
<h2>Subheading 6</h2> to <h2 id="toc_6">Subheading 5</h2>
<h2>Subheading 7</h2> to <h2 id="toc_7">Subheading 5</h2>
<h2>Subheading 8</h2> to <h2 id="toc_8">Subheading 5</h2>
<h2>Subheading 9</h2> to <h2 id="toc_9">Subheading 5</h2>
<h2>Subheading 10</h2> to <h2 id="toc_10">Subheading 5</h2>10. Copy the code below, then Paste in the last part of each paragraph.
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div> 11. Then click Publish or Update your blog post.
Note:
- If you are done setting/adding the TOC on your blog post(s), you need to stay in the HTML view then click Publish or Update your blog post(s).
- If after setting/adding the TOC then you publish or update your article in the Compose view, the Subheading link on the TOC that I demonstrated above will change to the post editor link, therefore you must stay in the HTML view when publishing or updating your post(s).
How to Add a Smooth Scroll Effect
If you want to add a smooth scroll effect to the table of contents, you need to add some jQuery code as needed. See the demo below after adding the smooth scrolling effect, when the title on the table is clicked it will scroll down gently or smoothly.
Please add the below code and place it before the </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script> Note:
If jQuery has been already added on your site please do not include it.
Hope this tutorial helps!
Reference:
Cara Manual. (2018, February 26). Cara Membuat Table of Contents (TOC) di Postingan Blogger [Web log post]. Retrieved from https://www.caramanual.com/2018/02/cara-membuat-table-of-contents-toc-di-postingan-blogger.html.
 Plugin in Blogger Posts or Pages){kind=link}