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

Pasos para la instalacion


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 Kirawuan.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:
/* TOC saneado y modernizado sin errores */
.mbtTOC2{border:1px solid #c9daee;border-radius:12px;background:#e8f2fd;margin:24px auto;padding:0;width:100%;max-width:920px;box-sizing:border-box;box-shadow:0 8px 24px rgba(0,0,0,.06);color:#0d1b2a;font-family:Oswald,Arial,sans-serif}
.mbtTOC2 button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;background:#f3f8ff;border:0;border-bottom:1px solid #d5e3f6;color:#0d1b2a;font-size:20px;font-weight:700;letter-spacing:.2px;cursor:pointer;text-align:left}
.mbtTOC2 button span{font-size:13px;color:#cc2130}
.mbtTOC2 button a{color:#cc2130;text-decoration:none}
.mbtTOC2 button a:hover{text-decoration:underline}
#mbtTOC2{padding:12px 16px}
.mbtTOC2 ol{counter-reset:section1;list-style:none;margin:0;padding:0}
.mbtTOC2 li{margin:10px 0}
.mbtTOC2 li a{color:#0a58ca;text-decoration:none;font-size:18px}
.mbtTOC2 li a:hover{text-decoration:underline}
.mbtTOC2 li li{margin:6px 0}
.mbtTOC2 li li a{color:#1f2d3a;font-size:16px}
.mbtTOC2 .point2,.mbtTOC2 .point3{padding-left:20px}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding-right:8px;color:#6b7c93;font-size:14px}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 li li li:before{content:counter(section1) "." counter(section2) "." counter(section3);counter-increment:section3}
#post-toc h1,#post-toc h2,#post-toc h3,#post-toc h4,#post-toc h5,#post-toc h6{scroll-margin-top:80px}
/* --- Toggle moderno para [Mostrar]/[Ocultar] sin tocar el JS --- */
/* Ocultamos los corchetes del span, pero mostramos el enlace como botón */
.mbtTOC2 button span{font-size:0}

/* Estilo del enlace #Tog como botón pill */
.mbtTOC2 #Tog{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;              /* el texto del enlace */
  line-height:1;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#0a67ff,#6a4dff);
  color:#fff !important;
  border:1px solid #2a3f6b;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.15);
  transition:.15s;
}
.mbtTOC2 #Tog:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15);
}
.mbtTOC2 #Tog:active{transform:translateY(0)}

Paso 3 : 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 estos pasos ya podemos guardar los cambios en nuestra plantilla 

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()" aria-expanded="true">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.