How to add table content in blogger posts Automatically in 2021
Hello and Welcome to the Nepali graphics blog. Want to Improve your Blog ranking and responsive then the table of content is Important for your blogs. I will provide a simple way to add a table of Content in bloggers. No need for coding experience and easy to add some important codes.
Step 1: Copy This First code
<link
href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css'
rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
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>
Step 2: Go to You Blogger Html Edit Section
Step 3: To search for end tag </head> and Paste code above this Tag.
Second code
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}
.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:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}Step 4: Copy This code
<data:post.body/> Into this code
<div id="post-toc"><data:post.body/></div>
Now complete Your HTML code editing. Now Only two simple codes Add in Your Blogger posts to Add a table of content in blogger.
Step 6: Copy this Code and Paste it into <br /> tag in Your Blog posts Html sections.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>
Step 7: Another Code paste into end </div> Section in article HTML Code
<script>mbtTOC();</script>
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div><script>mbtTOC();</script>