Table of contents Intro?
The opening section of a post or article is typically preceded with a Table of Contents, which is a brief section of text in a tabular format. It provides a table of all of the headings and subheadings for your posts or articles.What benefits come from adopting Table of Contents?
As you are aware, the TOC shows immediately following the first paragraph of your postings. The top few sentences of your entire post can be taken up by your viewers. Therefore, a carefully thought-out Table of Content may work in favour of your page in:- Giving your post or article a professional appearance.
- Systematically grouping the ideas in your post or article.
- Managing the expectations of your viewers, as they give a broad overview of your posts or articles.
- Giving your visitors a road map so they can quickly read your entire topic or article.
How may a table of contents be added in Blogger?
For this process you have to follow the below wrtten useful steps which will help you to ease your process of adding TOC in any page of your blog.1. Sign in to Blogger profile in which you have to Add TOC.
2. On the left side of your blogger Dashboard Click on "Theme" and then select "Edit HTML."
3. Next, Use Control F and Locate </head> element in your Template and Paste the below written Code before </head> tag.
<script type='text/javascript'> //<![CDATA[ //*************TOC plugin 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>
4. Just Like Above Search ]]></b:skin> and paste the following CSS code Before ]]></b:skin>.
.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}5. In the fifth Step Search <data:post.body/> , Replace it with the code written below.
<div id="post-toc"><data:post.body/></div>6. Finally you are done with it, Click on "SAVE" and enjoy.