Como crear Índice o Tabla de Contenidos en Blogger


En este artículo te mostrare como crear accesos directos a los títulos y subtítulos de tus Entradas en Blogger a través de la implementación de una tabla de contenidos. Esto se hace con la finalidad de mejorar un poco la experiencia de navegación de los usuarios en nuestro blog.

 

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


No puedes irte sin leer esto 👇

24 comentarios

  1. No me funciona :c este es el enlace de mi blog: https://josetutorialespc.blogspot.com/2021/02/atajos-con-el-teclado-para-windows.html espero tu respuesta

    ResponderBorrar
    Respuestas
    1. Hola, corrige el CODIGO 2. El que va al final del articulo creado. Tenia un error pero ya lo edite.

      Borrar
  2. Excelente articulo mano eres un genio me funciono muy bien en mi blog de prueba. Gracias ahora lo puedo aplicar en mi siguiente blog.

    ResponderBorrar
  3. Hola, cómo estás? Antes que nada te quiero agradecer porque me estás ayudando muchísimo con cada uno de tus artículos. Pero necesito de tu ayuda, acabo de seguir los pasos que nos indicas (no sé de programación), logré insertar la tabla de contenidos pero parte del código se "ve" arriba de la cabecera, soy super nueva en eso. El blog que estoy armando es https://tribudeemprendedoras.blogspot.com/. Me podías ayudar a solucionarlo???

    ResponderBorrar
    Respuestas
    1. Hola, acabo de ver tu blog y me di cuenta que personalizaste bastante tu tabla de contenidos, te felicito porque a pesar de ser nueva en esto lograste darle un estilo original.

      Borrar
  4. NO te preocupes que ya lo pude solucionar! Graciaaassss y abrazos desde Argentina!

    ResponderBorrar
    Respuestas
    1. Hola amiga desde Venezuela. Por si no lo has solucionado con el permiso del profe Abraham aquí te tengo la solución en mi blog de prueba, solo de copiar y pegar https://nje-isf.blogspot.com/2021/03/con-este-articulo-intentare-guiarlas-en.html

      Borrar
  5. Abraham Ortiz una pregunta, a mi solo me aparecian algunos de mis títulos en la tabla de contenido, entonces compare la estructura de los h2 que usted menciona y observe que yo los tenia de otra forma, así que lo que hice fue volver a escribirlos y me funciono, entonces me pregunto porque es que el código inicialmente yo lo tenia malo tendra algo que ver el hecho de que muchas veces escribo el contenido en word y despues lo pego en blogger

    ResponderBorrar
    Respuestas
    1. Hola José, si esa puede se una de las razones pero por lo general si queremos que la estructura HTML de nuestros artículos quede impecable debemos hacer una limpieza manualmente. Blogger de forma automática a veces coloca códigos de forma innecesaria.

      Borrar
  6. Hola Abraham, quisiera saber cómo haces esos cuadros donde pones los códigos, quisiera poder poner unos en mi blog para frases celebres y que sea mas fácil para el usuario copiarlas.

    ResponderBorrar
  7. hola en mi caso no se que esta mal que se duplica el contenido de los h2 y h3, se muestra el TOC pero me los duplica y no cuenta 1, 2, 3, solo muestra el numero 1 te dejo el enlace
    https://bit.ly/2OQUuTW
    espero me puedas guiar

    muchas gracias por tu ayuda

    ResponderBorrar
  8. No me sirvió, no me aparecen los títulos.

    ResponderBorrar
    Respuestas
    1. A mi tambien no me agarra y lo he hecho todo bien y nada

      Borrar
  9. Yo ya uso tablas de contenido en mi blog solo que yo empleaba enlaces internos, pero creo que tu método se ve mas fácil lo voy a probar

    ResponderBorrar
  10. Me aparecen dos número por cada título. Como lo arreglo?

    ResponderBorrar
  11. Solo con una pregunta: como le hago para que se ajuste a mi pantalla, es que solo se queda en el centro y distorsiona las letras.

    Gracias!!!

    ResponderBorrar
  12. muchas gracias por sus consejos han sido muy utiles para mi. en esta ocasión no me aparece el contenido si aparece la tabla de contenido pero no muestra el contenido solo el botón de ocultar. me podrias colaborar wwww.henryhealmont.blogspot.com

    ResponderBorrar
    Respuestas
    1. https://henryhealmont.blogspot.com/2021/08/como-leer-partitura-para-guitarra-aprenda-a-leer-partituras-consejos-guia-.html
      hay hay un ejemplo

      Borrar
  13. Hola Abraham ¿tienes algún código para hacer un sitemap profesional?

    ResponderBorrar
  14. Para que el desplazamiento sea un poco más animado y no salte de golpe hacia el título desde la tabla de contenidos, les recomiendo usar el siguiente código de CSS que puedes colocar dentro de la etiqueta style en el HTML de la entrada donde vaya a agregar la tabla de contenidos, puedes ver el archivo con enlace a google docs

    https://docs.google.com/document/d/14Znmf9d_cizRP68JIV8h6y4tHrDl-eA40V4Wa2iavKI/edit?usp=sharing


    Puedes verlo en acción, en el artículo de mi nuevo blog.

    https://zonatvbox-store.blogspot.com/2021/09/que-debes-tener-en-cuenta-cuando-vayas.html

    Si le das a cualquier ítem de la tabla de contenidos este te llevará hasta el contenido con una animación como si hicieras scroll con el mouse.


    Espero que les sirva.. Saludos desde Colombia.

    ResponderBorrar