🔥Cómo CREAR una TABLA de CONTENIDOS en Blogger

¿Te gustaría hacer una tabla de contenidos en Blogger? Llegaste al sitio correcto, en este artículo te mostrare como crear una Tabla de Contenidos HTML sencilla pero profesional y lo mejor de todo es que funciona de forma automática. Abajo veras un Ejemplo de lo que lograras con este artículo.

¿Qué es una tabla de contenidos?

Es una lista de enlaces que encontramos al inicio de cada Post en nuestro blog, generalmente se coloca luego de los párrafos introductorios y les permite a los usuarios navegar por secciones especificas dentro del artículo.

¿Cómo Poner una Tabla de contenidos HTML en Blogger?

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

Paso 1: Ve 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.

<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 es momento de añadir los códigos CSS, busca el siguiente código ]]></b:skin> y arriba de él, 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
Los estilos anteriores se pueden editar a tu manera.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: <div id="post-toc"><data:post.body/></div>
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).

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

Luego para finalizar ponemos este código en la parte final de la entrada

<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. De lo contrario entonces mira el siguiente Video Tutorial.