Unlike WordPress, Blogger still does not include a built-in Table of Contents (TOC) feature or plugin. Because of that, many Blogger users rely on custom HTML, CSS, and JavaScript solutions to manually create a TOC inside posts.
A Table of Contents can help readers navigate long articles more easily by showing the main sections and subheadings of a post. It also allows visitors to jump directly to the section they want to read instead of scrolling through the entire article.
I previously used a Blogger template that automatically generated a TOC before the first paragraph of every post. While convenient, I eventually preferred having manual control so I could decide exactly where the TOC should appear and only use it on posts that actually needed one.
If you also prefer a manually placed TOC with a simple Wikipedia-style layout, this method works well because it uses lightweight HTML and CSS with only a small amount of JavaScript.
How to Add a Table of Contents (TOC) Plugin in Blogger Posts
1. Go to Blogger.com and sign in to your account.
2. Open Theme > Edit HTML.
3. Search for ]]></b:skin> or </style>.
4. Copy the CSS code below and 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 this part of the CSS:
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}- If your Blogger template uses a sticky navigation menu, keep the section
height:40px;margin-top:-40px. - If your site does not use a sticky menu, you can remove that part of the CSS.
5. Save your Blogger theme.
6. Go to Posts and edit the article where you want to add the TOC.
7. Switch the editor to HTML View instead of Compose View.
8. Copy the HTML code below and paste it after the first or second paragraph depending 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> Note:
- Add your post URL before
#toc_1,#toc_2, and so on if needed. - You can also continue adding additional IDs such as
#toc_11,#toc_12, and more.
9. Add the matching IDs inside your heading tags.
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 and place it at the end of each section if you want a "Back to Contents" button.
<div class="back_toc" onclick="document.getElementById('btn_toc').scrollIntoView(true);" role="button" tabindex="0">Back to Content ↑</div> 11. Save or publish your Blogger post.
Important:
- After inserting the TOC code, stay in HTML View when publishing or updating the post.
- Switching back to Compose View may alter the anchor links and break the TOC structure.
How to Add a Smooth Scroll Effect
If you want smoother scrolling when readers click TOC links, add the jQuery code below before the </body> tag.
<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:
Before adding the script above, check whether your Blogger template already loads jQuery. If it does, you can skip the jQuery library import to avoid adding duplicate scripts.
Final Thoughts
A manually placed Table of Contents gives you more control over your Blogger posts compared to fully automatic TOC systems. You can decide where it appears and only use it on articles that actually need better navigation.
Hopefully, this guide helps you properly add a clean and lightweight TOC to your Blogger posts without relying on heavy plugins or complicated scripts.
