Crear un indice del contenido de una pagina o Entrada

Milton Rodriguez Lopez 1/08/2025

 Blogger de forma predeterminada no trae ningún gadget que te permita incrustar una tabla de contenidos o indice del contenido dentro de tus artículos, por eso es necesario que utilicemos códigos externos tanto HTML, CSS y como Java Script.

Paso 1: Entrar a Blogger y busca la opción TEMA, luego Editar HTML. Una vez allí busca la etiqueta </head> y pega el siguiente código en la parte superior. Puedes usar los comandos: Ctrl + F para buscar la etiqueta </head> en el HTML/XML.


        
html

        

            
        

     
<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 2: Añadir los códigos CSS, busca el siguiente código ]]></b:skin> y arriba de él, pega los siguientes estilos/css:


        
html

        

            
        

     

/* 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:#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;color: red;
}

.mbtTOC2 li{margin:10px 0; }

.mbtTOC2 li:before{color:red; }

.mbtTOC2 li a {
color: #000; /*Color del titulo principal*/
text-decoration:none;
font-size:20px;

}

.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}

.mbtTOC2 li li a{
color:#040404;
font-size:17px;
}

.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}

Si tienes conocimientos básicos de CSS puedes modificar los códigos y darle el estilo que más te guste a tu Índice de Contenidos 

Paso 3: Buscar el código <data:post.body/> y reemplazarlo por <div id="post-toc"><data:post.body/></div> Buscar dos veces el codigo <data:post.body/> , y reemplazar. 


        
html

        

            
        

     
 <div id="post-toc"><data:post.body/></div>

Eso sería todo por esta parte, ahora falta lo más importarte, hacer que se muestre la Tabla de Contenido en cada entrada de nuestro blog.


Paso 4: Mostar Tabla de Contenido en una Entrada

Lo primero que tienes que hacer es cambiar la vista de edición de tus entradas a Vista HTML allí tendrás que ubicar el lugar donde quieres que aparezca tu Tabla de Contenidos y pegar las siguientes líneas de código: 


        
html

        

            
        

     

<div class="mbtTOC2">
<button>Tabla de contenido <span>[<a id="Tog" onclick="mbtToggle2()">Ocultar</a>]</span></button>
<div id="mbtTOC2"></div>
</div>

Paso 5: copiar y pegar el código hasta el final de tu entrada

Lo ideal es que coloques este código después de los primeros párrafos introductorios a tu artículo. Por ultimo bajas hasta el final de tu entrada y pegas este código: 


        
html

        

            
        

     
 <script>mbtTOC2();</script>

Eso sería todo, recuerda que todo este proceso debes hacerlo en la vista de edición HTML de tus entradas de Blogger para que pueda surtir efecto. Si todo salió bien debería aparecer un Índice de contenido Profesional como el que viste al inicio de este artículo.


Tags: