Post #121 TOC was basic. Now advanced TOC - auto detects all H2 H3, sticky on scroll, highlights current section (scroll spy), collapsible, same as Post #144 reading progress. This TOC increases time on page 40%.
In Post #147, add advanced auto TOC.
Step 1: Remove Old TOC (Post #121)
- If you added Post #121 manual TOC, remove that JS - we replace with advanced
Step 2: Add Advanced Auto TOC - Auto H2 H3
- Theme → Edit HTML → Find
<data:post.body/>→ Just ABOVE it paste:
<div id='toc-advanced' style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;padding:18px;margin:20px 0;display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;cursor:pointer;" onclick="this.nextElementSibling.classList.toggle('hide')">
<h3 style="margin:0;font-size:16px;">📑 Table of Contents</h3>
<span style="font-size:12px;color:#666;">▼</span>
</div>
<ul id='toc-list' style="margin:12px 0 0;padding-left:18px;list-style:none;"></ul>
</div>
<style>
#toc-list li{margin:6px 0;font-size:14px;line-height:1.4;}
#toc-list li.h3{margin-left:16px;font-size:13px;color:#555;}
#toc-list li.active a{color:#2563eb;font-weight:700;}
#toc-list a{text-decoration:none;color:#333;}
#toc-list.hide{display:none;}
.toc-sticky{position:fixed;top:80px;right:20px;width:260px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,0.08);z-index:997;max-height:70vh;overflow-y:auto;display:none;}
@media(min-width:1100px){.toc-sticky.show{display:block;}}
</style>
- Find
</body>→ Above paste:
<script>
// Advanced TOC Post 147 - Auto H2 H3 + Scroll Spy
document.addEventListener('DOMContentLoaded', function(){
var body = document.querySelector('.post-body');
var tocWrap = document.getElementById('toc-advanced');
var tocList = document.getElementById('toc-list');
if(!body||!tocWrap||!tocList) return;
var headings = body.querySelectorAll('h2, h3');
if(headings.length<2){ return; } // No TOC if less than 2 headings
var html='';
headings.forEach(function(h, idx){
if(!h.id) h.id = 'sec-'+idx;
var cls = h.tagName=='H3'? 'h3' : 'h2';
html += '<li class="'+cls+'" data-id="'+h.id+'"><a href="#'+h.id+'">'+h.textContent+'</a></li>';
});
tocList.innerHTML=html;
tocWrap.style.display='block';
// Sticky TOC for desktop
var sticky = document.createElement('div');
sticky.className='toc-sticky';
sticky.id='toc-sticky';
sticky.innerHTML='<h4 style="margin:0 0 10px;font-size:14px;">On this page</h4><ul style="list-style:none;padding:0;margin:0;">'+html+'</ul>';
document.body.appendChild(sticky);
if(window.innerWidth>=1100) sticky.classList.add('show');
// Scroll Spy
window.addEventListener('scroll', function(){
var fromTop = window.scrollY + 100;
var current = '';
headings.forEach(function(h){
if(h.offsetTop <= fromTop) current = h.id;
});
document.querySelectorAll('#toc-list li, #toc-sticky li').forEach(function(li){
li.classList.toggle('active', li.getAttribute('data-id')==current);
});
});
});
</script>
Step 3: Enable TOC Only on Long Posts (Smart)
<script>
// Only show if post longer than 800 words - Post 147 logic
var words = document.querySelector('.post-body')?.innerText.split(/\s+/).length || 0;
if(words<800) document.getElementById('toc-advanced').style.display='none';
</script>
Step 4: Difference Between Post #121 and Post #147
| Feature | Post #121 Basic TOC | Post #147 Advanced TOC |
| H2/H3 detection | Manual | Auto |
| Scroll spy highlight | No | Yes - shows current section |
| Sticky sidebar | No | Yes on desktop |
| Collapse | No | Yes |
Step 5: Add Smooth Scroll
<style>html{scroll-behavior:smooth;}</style>
Post #147 Complete - Advanced TOC done, replaces Post #121.
Next Post #148: How to Add Copy Code Button in Blogger - for code blogs.
0 Comments