Step1: Go to your blogger dashboard then point your mouse towards the theme option.
 |
| Blogger Dashboard >Theme |
Step2: Now click on edit HTML.
 |
| Edit HTML |
Step3: Copy the code below:
Code Below
<script type='text/javascript'> //<![CDATA[ //*************TOC plugin by MyBloggerTricks.com
function mbtTOC() { var mbtTOC = i = headlength = gethead = 0; headlength = document.getElementById("post-toc").getElementsByTagName("h2").length; for (i = 0; i < headlength; i++) { gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent; document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point" + i); mbtTOC = "<li><a href='#point" + i + "'>" + gethead + "</a></li>"; document.getElementById("mbtTOC").innerHTML += mbtTOC; } } function mbtToggle() { var mbt = document.getElementById('mbtTOC'); if (mbt.style.display === 'none') { mbt.style.display = 'block'; } else { mbt.style.display = 'none'; } } //]]>
</script>Step4: Then return back to your blogger and press "CTRL + F" and find " <head> then place that code and press Enter.
 |
| Step 1 |
 |
| Step 2 |
Step 5: Now, on the HTML section of the blogger again search on the theme using "CTRL+F" for " ]]></b:skin> " and again copy the code below and paste code above " ]]></b:skin> ".
Code:
/*####Automatic TOC Plugin by MyBloggerTricks designed by Saroj-Tech####*/ .mbtTOC { border: 3px solid #A2A9B1; box-shadow: 1px 1px 0 #EDE396; background-color: #F8F9FA; color: #830000; line-height: 1.4em; margin: 30px auto; padding: 20px 30px 20px 10px; font-family: Open Sans, arial; display: block; width: 70%; border-radius: 5px; } .mbtTOC ol, .mbtTOC ul { margin: 0; padding: 0; } .mbtTOC ul { list-style: none; } .mbtTOC ol li, .mbtTOC ul li { padding: 15px 0 0; margin: 0 0 0 30px; font-size: 15px; } .mbtTOC a { color: #0080ff; text-decoration: none; } .mbtTOC a:hover { text-decoration: underline; } .mbtTOC button { background: none; font-family: Open Sans, arial; font-size: 20px; position: relative; outline: none; cursor: pointer; border: none; color: #707037; padding: 0 0 0 15px; } .mbtTOC button:after { content: "\f022"; font-family: FontAwesome; position: relative; left: 10px; font-size: 20px; }
 |
| Step 1 |
 |
| Step 2 |
Step6: Now again press " CTRL + F " and Search for " <data:post.body/> " and replace code with
" <div id="post-toc"><data:post.body/></div> " then hit on "save theme" . |
| Step 1 |
 |
| Step 2 |
 |
| Step 3 |
Step7: Now go to the post where you want to show a table of content and click on HTML view at the top and paste the below code.
Code:
<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>
 |
| Paste Code |
Step8: Place the code at the end of all HTML.
Code:
<script>mbtTOC();</script>
 |
| Paste Code At End |
Update your post now you will see the working table of contents for the blog post.
