Como crear Índice o Tabla de Contenidos en Blogger

¿Qué es una tabla de contenidos o Índice?

Las tablas de contenido también conocida por sus siglas en ingles TOC (Table Of Contents) sirven para ayudar al lector a encontrar rápidamente la información que está buscando. Estas por lo general se ubican al principio de cada artículo debajo del primer párrafo y contienen una lista ordenada con todos los temas que se hablaran.

¿Cuándo debo utilizar un Índice de contenidos?

Yo te recomiendo utilizar una tabla de contenidos cuando escribas un artículo Extenso y muy elaborado en el que se puede conseguir Mucha Información. La idea es que nuestros lectores no se aburran tratando de leer todo el articulo para al final darse cuenta que la información que buscaban solo era un par de líneas.

Si tu artículo es corto y no tiene muchos títulos y subtítulos no vale la pena crear un índice.

Insertar una Tabla de contenidos en Blogger

Muchos piensan que en Blogger no se puede crear una TOC fácilmente pero hoy les demostrare todo lo contrario. Les mostrare como crear una Tabla de contenido automática y 100% profesional.

 ➽  PASO 1: Ingresa a Blogger y busca la sección TEMA luego Editar HTML, una vez allí busca la etiqueta </head> y pega el siguiente código en la parte superior.

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

 ➽  PASO 2: Ahora vamos a darle un toque profesional a nuestra tabla, así que tienen que buscar en su plantilla ]]></b:skin>  y pegaran en la parte superior el siguiente código CSS.

/*Tabla de contenido | Plugin V2.0 by MyBloggerTricks*/
.mbtTOC2{
    border: 1px solid #8e8e8e; /*Color de Borde*/
    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;
    display: block;
    width: 50%; /*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 a {
 color:#000; /*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}

IMPORTANTE: Puedes editar como quieras el estilo de tu tabla, para facilitarte las cosas te deje indicado cual es la función de cada código, así podrás editarlo a tu gusto.

 ➽  PASO 3: Para dejar todo listo en tu plantilla debes buscar lo siguiente <data:post.body/> y sustituirlo por el código a continuación.

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

Es probable que consigas más de un <data:post.body/> si ese es tu caso debe reemplazar el código en cada uno de ellos.

 ➽  PASO 4: Con esto ya tu blog estaría configurado y listo para mostrar las tablas de contenido en los artículos que tu prefieras. no olvides guardar los cambios

¿Cómo mostrar una tabla de contenido en mis entradas?

Para que tus entradas puedan mostrar la tabla de contenidos es importante que coloques los siguientes códigos dentro de tus artículos.

 ➽  CODIGO 1: Es importante que entres a tu artículo en la vista de edición HTML. Este código debes colocarlo justo debajo del párrafo donde quieres que aparezca la Tabla de Contenido.

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

 ➽  CODIGO 2: Este código tienes que colocarlo al final del artículo. Es importante que sea el último código de tu entrada de lo contrario podría generarte problemas.

<script>mbtTOC2();</script>

Si todo sale bien la tabla de contenido debería mostrar una lista ordenada de todos tus títulos y subtítulos. Por ultimo no olvides Actualizar los cambios en tu entrada.

¡Ayuda! La tabla de contenido no muestra mis títulos.

Si la tabla de contenidos no está mostrando tus títulos ni subtítulos debes asegurarte de que los H2 y H3 estén bien colocados dentro de tu blog. Ingresa a la vista HTML de tus artículos y verifica que los encabezados tengan la siguiente estructura:

<h2 style="text-align: center;">NOMBRE DEL TITULO</h2>

<h3 style="text-align: center;">NOMBRE DEL SUBTITULO</h3>

Tanto la etiqueta H de apertura como la etiqueta H de cierre deben estar en la misma línea de código.

¿Qué te ha parecido esta Información? ¡COMENTA!

Este artículo es totalmente honesto y con la idea central de que todo el que quiera implementar una tabla de contenidos en Blogger puede hacerlo sin ningún problema, siempre aconsejándolos ¿Qué opinas de mi artículo? ¡Coméntame cualquier duda o sugerencia al respecto del tema!

Si te gusto mi artículo te invito a compartirlo en tus redes sociales preferidas para ayudarme a aportar valor a todo el que quiera aprender y siempre mostrar información de calidad en el mundo del diseño web.