Are you wishing for your blog's better navigation? Do you want to improve user experience by adding an amazing table of contents (TOC)? This guide empowers you to achieve this seamlessly using HTML coding, simple CSS styling and JavaScript addition within your Blogger template. Incorporating automatic table of contents in Blogger is as easy as table of 2. By the end of this blog, you'll get all required arsenal, it's a promise.
 |
| How to add a clickable table of contents to a blogger post |
Adding a clickable table of contents to a blogger
1. Craft the Foundation:
Locate the desired area for your TOC (sidebar, top/bottom of posts).
Insert this HTML code to create a dedicated container:
HTML
--------------------------------
<div id="table-of-contents"></div>
--------------------------------
2. Style with Flair:
Add the following CSS code to your template for visual appeal:
CSS
--------------------------------
#table-of-contents { padding: 10px; background-color: #f5f5f5; border: 1px solid #ccc; } #table-of-contents ul { list-style-type: none; margin: 0; padding: 0; } #table-of-contents ul li { margin-bottom: 5px; } #table-of-contents ul li a { text-decoration: none; color: #333; /* Adjust color as preferred */ } #table-of-contents ul li a:hover { text-decoration: underline; }
--------------------------------
MORE FOR YOU:
ہاں! تو میں کہہ رہا تھا کہ ۔۔۔
3. Generate Dynamic Links:
Employ JavaScript/jQuery for automatic link creation:
JavaScript
--------------------------------
<script type="text/javascript"> $(document).ready(function() { var toc = ''; var level = 0; var maxLevel = 3; // Adjust for desired heading levels $('#content h2, #content h3, #content h4').each(function() { var headingText = $(this).text(); var anchorName = 'toc-anchor-' + $(this).attr('id'); $(this).attr('id', anchorName); if (this.tagName == 'H2') { level = 1; } else if (this.tagName == 'H3') { level = 2; } else if (this.tagName == 'H4') { level = 3; } if (level <= maxLevel) { toc += '<li><a href="#' + anchorName + '">' + headingText + '</a></li>'; } }); if (toc !== '') { $('#table-of-contents').append('<ul>' + toc + '</ul>'); } }); </script>
--------------------------------
4. Save and Shine:
Save your template and witness the magic unfold! The TOC will dynamically generate based on your headings (h2, h3, h4), enhancing navigation for your readers.
Pro Tips:
Replace color: #333; in the CSS with a color that complements your theme.
Ensure jQuery is included in your template for JavaScript functionality. Add this code before the closing </head> tag if necessary:
HTML
--------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
--------------------------------
Conclusion
Consider customizing the styling and structure of the TOC to match your unique brand identity.
By following these steps and incorporating your personal touch, you'll create a valuable and visually appealing clickable TOC that boosts reader engagement. It surely simplifies navigation within your Blogger blog too.
EDITOR'S BLOG:
0 تبصرے