Tabla de contenidos (TOC)

Estoy buscando una tabla de contenidos para mi sitio y estoy tratando de adaptar una de Blogger.

Los còdigos que han que modificar se encuentran en esta pàgina:

http://www.formacion.red/2017/05/como-hacer-tabla-de-contenidos-toc-blogger-blogspot.html

Modifico los tres bloques de còdigo y los meto en la caja Texto sobre el diseño (adaptable para cambios del CSS). Y cada bloque lo encierra entre:
<style type="text/css">
y
</style>

Quedarìa algo asì:

<style type="text/css">

<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?de>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="hide")a.style.display="none",b.innerHTML="show")}
//]]>
</script>

</style>

<style type="text/css">
/*####TOC Plugin V2.0 by MyBloggerTricks####*/

.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; 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:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}

.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}

.mbtTOC2 li li a{ color:#289728; font-size:15px;}

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

/*

.point2 {list-style-type:lower-alpha}

.point3 {list-style-type:lower-roman}

.point4 {list-style-type:disc}

*/
</style>

<style type="text/css">

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

<style type="text/css">
<script>mbtTOC2();</script>
</style>

En esta pàgina de prueba està el resultado y como ven le falta algo:

http://blog-di-prova.es.tl/Historial-de-la-Primera-Divisi%F3n-de-Espa%F1a%2C-la-Liga-.-.htm

Alguien me puede dar una mano?

Gracias

Saludos,
¿Cual es la tabla modelo? para saber cómo quieres que quede exactamente tu tabla
______________

Lo que yo quiero es que se vea una Tabla de Contenido (TOC) como la que podemos ver como Indice en Wikipedia, en modo tal que al clicar en un apartado nos lleve directamente al punto tratado.

WordPress tiene varios plugins llamados asì TOC. Blogger tiene un script desarrollado por MyBloggerTricks en esta página:

http://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html#point12

que he tratado de adaptar pero por lo visto sin resultado como puedes ver en este post:

http://blog-di-prova.es.tl/National-Park-La-Cruz.htm

He hecho varios cambios pero sin resultado.

Ahì està mi pregunta.

Espero haber satisfecho tu duda.

Gracias.

Creo haber entendido.
Esta es una prueba de lo que hice:

http://pwgpro.es.tl/prueba.htm

Si es eso lo que deseas, allí mismo te dejo los códigos. Los textareas tienen unos bugs así que para copiar todo el codigo, expande el recuadro en la esquina inferior derecha.

Espero que eso te sirva, saludos
______________

Especìficamente cada código donde tengo que inserirlo.

Estoy usando la plantilla Clean

Gracias

Debes colocar ambos códigos en la hoja donde deseas la tabla. Usando el modo html del editor.


______________

Te agradezco pero no es lo que busco, es decir el resultado final puede ser pero no interpreto el modo de aplicarlo. Es decir quiero instalar un script que reconozca automàticamente los encabezados a comenzar por h1, h2, h3 y asì sucesivamente, por eso te habìa dado como ejemplo el de Blogger.
Es decir algo que cuando yo marco un titulo con h1 o h2 lo reconozca en automàtico y me muestre la tabla.

Blogger es un gestionador de contenido y el plugin/script solo es compatible con ese CMS
Si te fijas; se debe incluir un código al final reemplazando la etiqueta que blogger genera (<data:post.body/>)

para que el sistema automatizado funcione.

Es por ello que elaboré una tabla con html y css que colocandola en la pagina que quieras solo necesitas reemplazar la información.
Si deseas, espera que otro usuario responda con otra alternativa
______________