Tabla de contenidos en Blogger: automática y de multinivel

Si quieres ingresar un Índice o tabla de contenidos en Blogger y mostrarlas en tus entradas de forma automática. Estas en el lugar correcto.

¡Hola! soy Gabriela de peengler.com. En esta entrada te quiero compartir una tabla de contenido de multinivel y se muestra de forma automática, sé que te va a gustar porque también lo puedes personalizar a tu gusto.

Sin más que decir, ¡Empecemos!

Clic en la imagen para ver el vídeo ↑ en YouTube

¿Qué es una tabla de contenidos?

Es una lista de enlaces, que se encuentra en las entradas del blog o página web y está ubicada justo después del primer o segundo párrafo. Cada enlace dentro de una tabla de contenidos lo lleva a una sección específica del artículo.

En Blogger no existe un gadget ni script que permita agregar las tablas de forma automática “es una pena” pero existe una forma manual para aplicarlo en cada entrada de tu blog.

Añadir una Tabla de contenidos en Blogger

Lo primero que vas hacer es dirigirte al html de tu plantilla y buscar el </head> Luego pegas la siguiente:

<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="Ocultar"):(a.style.display="none",b.innerHTML="Mostrar")} 
//]]> 
</script>

Vas a necesitar aplicarle estilos a tu índice, busca ]]></b:skin> y antes de este, pega los siguientes estilos/css:

/*Tabla de contenido | Plugin V2.0 by MyBloggerTricks*/
.mbtTOC2{
    border: 1px solid #54b2e9; /*Border*/
    border-radius: 5px; 
    box-shadow: 0px 0px 3px 1px #ddd; /*Sombra*/
    background-color: #dbebf5; /*Color de fondo*/
    margin: 30px auto; 
    padding: 20px 10px;
    font-family: Oswald, arial;
    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;
 }

.mbtTOC2 li{margin:10px 0;  } 

.mbtTOC2 li a {
 color:#EA1414; /*Color del titulo principal*/
 text-decoration:none;
 font-size:20px;
 text-transform:capitalize;
 } 
 
.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}

Nota: Puedes editar estos estilos como tú quieras.

Ya casi terminas con la configuración solo necesitas buscar <data:post.body/> y reemplazarlo por:

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

Ya puedes guardar los cambios. Recomiendo que veas el vídeo tutorial → clic aquí

Muestra una tabla de contenidos en cada entrada del blog

Si lo anterior lo hiciste correctamente, debería funcionar sin ningún problema. Las siguientes líneas lo debes aplicar en todas tus entradas para que se pueda visualizar la tabla de contenidos en Blogger:

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

Nota: lo puedes añadir después del primer o segundo párrafo.

Y después aplicas al final de tu contenido esta línea:

<script>mbtTOC2();</script>

¡Así es! aplicas la primera línea después del primer o segundo párrafo y al final aplicas la segunda línea. Con esto ya puedes publicar/actualizar la entrada.

En conclusión

Si te estarás preguntando ¿Es necesario aplicar una tabla de contenidos en Blogger? Y no solo en Blogger sino en cualquier sitio. Diría que si, porque sirven para orientar y guiar al lector en tu contenido. Entonces la cuestión es depende del contenido, no es igual un contenido educativo a uno de manualidades.

Otro ejemplo, es como cuando estás haciendo un trabajo y te vas a Wikipedia y en vez de ver todo el contenido, te ubicas en el índice que te facilita encontrar lo que estás buscando y si no sale lo que te interesa te vas a otro lugar.

Si tienes alguna duda o pregunta, déjamelo en los comentarios.