Paso 1: Abrir el blog / Entrada / Editar HTML del articulo. Copiar y pegar el siguiente código al inicio del articulo.
<!-- Inicio del articulo -->
<div class="mbtTOC2">
<button>
Tabla de contenido
<span>[<a id="Tog" onclick="mbtToggle2()">Ocultar</a>]</span>
</button>
<div id="mbtTOC2"></div>
</div>
Paso 2: Copiar y pegar el siguiente código al final del articulo.
<!-- Final del articulo -->
<script> mbtTOC2(); </script>
Paso 3: Entrar a Blog / Tema / Personalizar / Editar HTML. Buscar con el comando CTRL + F la etiqueta ;<data:post.body/>
, luego eliminar o reemplazar las dos ;<data:post.body/> de la plantilla por el siguiente código (Nota: aveces hay una o dos etiquetas ;<data:post.body/>): Copiar y pegar el siguiente código de la plantilla del blog.
<!-- Tabla de contenido del articulo -->
<div id="post-toc"><data:post.body/></div>
Paso 4: Entrar a Blog / Tema / Personalizar / Editar HTML. Buscar en la plantilla con el comando CTRL + F la etiqueta </head>
, copiar y pegar el siguiente código encima de la etiqueta </head>
:
<!-- Tabla de contenido | Plugin V2.0 -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//************* TOC Plugin V2.0
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="Ocultar"):(a.style.display="none",b.innerHTML="Mostrar")}
//]]>
</script>
Paso 5: Entrar a Blog / Tema / Personalizar / Editar HTML. Buscar en la plantilla con el comando CTRL + F la etiqueta ]]></b:skin>
, copiar y pegar el siguiente código encima de la etiqueta ]]></b:skin>
:
/* Indice - Tabla de contenido | Plugin V2.0 */
.mbtTOC2{
border: 1px solid #8e8e8e; /*Border*/
border-radius: 5px;
box-shadow: 0px 0px 3px 1px #ddd; /*Sombra*/
background-color: #f1f1f1; /*Color de fondo*/
margin: 30px auto;
padding: 20px 10px;
font-family: Oswald, arial;
font-family: arial, sans-serif ;
display: block;
width: 100%; /*Ancho*/
}
.mbtTOC2 button{
background:transparent;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#055009 ; /* cafe: #520e02 */
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:17px; margin:0px 10px;color: red;
}
.mbtTOC2 li{margin:3px 0; line-height: 1; }
.mbtTOC2 li:before{color:red; }
.mbtTOC2 li > a {
color: #310681 ; /*Color del titulo principal negro: #000 verde: #055009 y azul: #5611d4 */
text-decoration:none;
font-size:17px;
font-weight: 600;
}
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{
color: #040404 ; /* negro: #000 */
font-size:15px;
font-weight: 400;
line-height: 0.8;
}
.mbtTOC2 .point3, .mbtTOC2 .point2{
padding: 0px 0px 0px 24px;
}
.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}