Crear un indice del contenido de una pagina o Entrada

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} 

Milton Antonio Rodríguez López

Hola, soy el Dr. Milton Antonio Rodríguez López, médico y cirujano especializado en Cirugía General, Laparoscopia y Cardiopatía Isquémica. Mi trayectoria combina la medicina con Tecnologías de la Información y Comunicaciones (TIC), innovación y emprendimiento, integrando soluciones tecnológicas en el ámbito médico. Esto me permite mejorar la atención y resultados en los pacientes. Estoy entusiasmado por compartir mis conocimientos y experiencias, explorando nuevas fronteras entre la medicina y la tecnología.

Artículo Anterior Artículo Siguiente