Blog Platform Blogger’s Usage Tips and Tricks

<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 copy following code before " ]]></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: 10;
 padding: 10;
 }
 .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;
 } 





Another better formatted code;




/*####Automatic TOC Plugin by MyBloggerTricks designed by Saroj-Tech####*/

.mbtTOC{
border:1px solid #000000;
border-style:solid;
border-style:dashed;
background-color:#FFFFE0;
line-height:1.4em;
margin:30px auto;
padding:10px 15px 10px 6px;
 display: block;width: 70%;
 }
 
 .mbtTOC button{
 background-color:transparent;
 font-family:Acme;
 font-size:20px;
font-weight:bold;
 position:relative;
 outline:none;
 border:none;
 color:#0fb5fc;
 padding:0 0 0 15px;
 }
 
 .mbtTOC button a {
 color:#3d1818;
 padding:0px 2px;
 cursor:pointer;
 } 
 
.mbtTOC button a:hover{
 text-decoration:underline;
color:#fc0f2b; 
 } 
 
.mbtTOC button span {
font-size:12px; margin:0px 8px;
 }

.mbtTOC li{margin:8px 0; } 

.mbtTOC li a {
color:#3d1818;
 text-decoration:none;
 font-size:14px;
 text-transform:capitalize;
font-family:georgia;
 } 
 
.mbtTOC li a:hover {
text-decoration: underline;
color:#fc0f2b;
}
.mbtTOC li li {margin:4px 0px;}
 
.mbtTOC li li a{
 color:#fc0f2b;
 font-size:12px;
 }
.mbtTOC li li a:hover{
 text-decoration: underline;
color:#fc0f2b;
 }

.mbtTOC ol{counter-reset:section1;list-style:none}
.mbtTOC ol ol{counter-reset:section2}
.mbtTOC ol ol ol{counter-reset:section3}
.mbtTOC ol ol ol ol{counter-reset:section4}
.mbtTOC ol ol ol ol ol{counter-reset:section5}
.mbtTOC li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px;color:#fc0f2b;font-family:arial;}
.mbtTOC li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px;color:#fc0f2b;font-family:arial;}
.mbtTOC li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}






*Step5 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" . There are multiple entries for this search. Replace all of them. There are three matches. 


*Step6 Save the theme


*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. Usually after first paragraph, but just before first h2 code


Code:


 <div class="mbtTOC">
 <button onclick="mbtToggle()">Table of Contents</button>
 <ol id="mbtTOC"></ol>
 </div>



* Step8: Place the code at the end of all HTML.
Code:
<script>mbtTOC();</script>




Add Table of Contents into Posts - toc-pro




Step1: add following code just after the </body> tag.



<script async='async' defer='defer'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>



If you would like to expand contents, change display:none to display:block.

Here is code for only showing h2 anchors and also expanding contents by default.






<script async='async' defer='defer'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Table of Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>





Step 2: Paste below CSS code just before the code ]]></b:skin>






/* TOC by techyleaf */
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"/f0c9";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"/f0c9";padding-right:7px;}
*/






Step 3: Add following shortcode where you want to add TOC






<div class='toc-pro'></div>