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>