>><<1>><< Copy and Paste above </head> tag in your HTML Code of Blogger
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>
<<2>><<>> Next search ]]></b:skin> and just above it paste the following CSS code:
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:Oswald, arial;
display: block;width: 70%;
}
.mbtTOC2 button{
background:#ACDEFB;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#2E2E2E;
padding:0 0 0 15px;
}
.mbtTOC2 button a {
color:#FF0313;
padding:0px 2px;
cursor:pointer;
}
.mbtTOC2 button a:hover{
text-decoration:underline;
}
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
}
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {
color:#EA1414;
text-decoration:none;
font-size:18px;
text-transform:capitalize;
}
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{
color:#040404;
font-size:15px;
}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
<<>> Finally search for <data:post.body/> and replace it with the code below:
<div id="post-toc"><data:post.body/></div>
<<3>> It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.
To do this, switch to "HTML" mode of blogger editor and then paste the following HTML code just before the first heading.
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
<<4>> Paste this code in the Html view of your post in the last.
<script>mbtTOC2();</script>
NOTE:--- Follow 3rd and 4th step for each posts to show the table in your articles. each time when
you will write article then you have to put 3rd and 4th code in your post HTML view.
إرسال تعليق