Unlike WordPress, Blogger still doesn't have a built-in Table of Contents (TOC) plugin. While WordPress users rely on tools like Easy Table of Contents, Blogger creators often have to get a bit more creative.
A TOC is essential for orienting your readers—it provides a clear roadmap of your sections and subheadings so they know exactly what to expect. This is especially helpful in long articles, as it lets users jump straight to the information they need.
I used to have a third-party template that generated a TOC automatically before the first paragraph of every post. However, I realized I didn't want a TOC on every single update. I wanted the control to manually insert one exactly where it belongs—maybe after the second or third paragraph—and only on the posts that actually need it.
If you're looking for that kind of manual control, this guide is for you. We’ll be using a "Wikipedia-style" setup that skips heavy automated scripts in favor of clean HTML and CSS, with just a touch of JavaScript for a smooth toggle and jump-link effect.
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://snooziebear.blogspot.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:
Before you add the code, check if your site already has jQuery installed. If it’s already there, you can skip that part of the script—no need to add extra weight to your page!
I really hope this helps you get your Table of Contents exactly where you want it!
