Tabla de Contenido o Índice Automático para Blogger

Para aquella personas que quieran realizar un índice o tabla de contenidos en un blog o web de blogger y que además aparezca en una pagina, post o entrada, hoy te enseñaremos como realizar esta tarea con unos sencillos pasos que se mostraran mas abajo.

¿Qué es o para que sirve una tabla de contenidos?

Bueno, en realidad existen muchos tipos de tablas para blogs, las cuales varían de acuerdo a su utilidad. Las hay tipo acordeón, las tablas normales, las tablas o Box para códigos, etc...Cada tipo de tabla tiene su función pero las famosas renombradas como tabla de contenidos se refieren a cajas construidas con código HTML para alojar un resumen o índice de algún tema en especial. Estas tablas son muy útiles, sobre todo para entradas muy largas llenas de títulos, subtítulos, encabezados. Además  es una herramienta muy buena para el lector y el SEO del dueño del blog o la web. En Blogger todavía no han desarrollado ningun script para hacer la ejecución de índices en automático y es por ello que vamos a tener que usar un poco de código. 
Por otro lado es bueno mencionar que existen plantillas prediseñadas para blogger, como la que yo uso, donde ya vienen herramientas para cajas o tablas de todo tipo.

Crear Tabla de contenidos en Blogger

Lo primero que vamos a realizar es ir a la configuración HTML de tu plantilla. Para ello solo entramos en blogger y buscamos la pestaña de Tema, hacemos click y luego abrimos el recuadro que dice personalizar. Una vez allí buscamos la pestaña HTML y la seleccionamos. Después se nos abrirá nuestra plantilla en su propio código. Luego y dentro de la plantilla buscaremos este código: </head>. Para hallarlo de forma fácil podemos copiar la expresión anterior y luego dentro de la plantilla de blogger hacemos un click en cualquier parte y después pulsamos la tecla control mas la tecla f de nuestro teclado. Luego de ello en la parte superior izquierda de blogger se abrirá un cuadro de búsqueda y allí pegaremos el código anterior. Damos enter y automáticamente aparecerá el código: </head>. Una vez visualizado, copiaremos y pegaremos el siguiente código por encima del anterior. 

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

Añadir estilos CCS

Luego de lo anterior tendremos que crear estilos al índice a traves de códigos CCS. Para ello buscaremos en la plantilla : ]]></b:skin> y por encima de este código pegaremos el que se muestra abajo:

[code type="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}[/code]

[success title="Nota" icon="check-circle"] Los estilos anteriores se pueden editar a tu manera. [/success]

Reemplazo de código

Aquí lo que vamos a realizar es simplemente buscar el código: <data:post.body/> en nuestra plantilla y luego sustituirlo por el código de abajo: 

[code type="HTML"]<div id="post-toc"><data:post.body/></div>[/code]

luego de todos los pasos anteriores ya podemos guardar los cambios en nuestra plantilla. Para mas información pueden visitar el video tutorial

Crear o Mostrar tabla - índice en una entrada, Post o pagina

Luego de haber realizado todos los cambios anteriores en tu plantilla de blogger, ya podemos implementar el índice en cualquier post o entrada. Lo único que hay que hacer es colocar en versión HTML el siguiente código dentro del post(se recomienda pegar el código después del primer párrafo).

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

Luego para finalizar colocaremos este ultimo código al final de nuestro post en modo HTML: 

[code type="HTML"]<script>mbtTOC2();</script>[/code]

Conclusiones

Aunque para fabricar buenos post no es estrictamente necesario crear una tabla de contenidos, muchas veces para el lector es precisa sobre todo si el contenidos largo. Además de ello los artículos con índice claman seriedad y prestigio del escritor pues se esta tomando tiempo para ser ordenado. Así pues, en mi opinión es muy bueno usar índices en nuestras entradas pues nuestros lectores nos lo agradecerán  y ello también es muy bueno para incrementar el SEO.