▷Cómo Crear una Tabla de Contenido en Blogger - Destaca tu Contenido

Una tabla de contenido en un blog es una lista estructurada de los temas o secciones principales que se encuentran en un artículo o entrada de blog, junto con los enlaces directos a esas secciones específicas. La tabla de contenido sirve como una guía rápida para los lectores, permitiéndoles navegar fácilmente por el contenido y acceder directamente a las secciones que les interesan.

La inclusión de una tabla de contenido en un blog puede ser beneficiosa por varias razones:

💹Facilita la navegación: Los lectores pueden saltar directamente a la sección que más les interesa sin tener que desplazarse por todo el artículo.

💹Mejora la legibilidad: Una tabla de contenido ayuda a organizar y estructurar la información, facilitando la comprensión del contenido general del artículo.

💹Aumenta la retención de lectores: Si los lectores pueden encontrar rápidamente la información que están buscando, es más probable que se queden y lean el artículo completo.

💹Beneficia el SEO: Una tabla de contenido bien estructurada con enlaces internos puede mejorar la indexación de las páginas por parte de los motores de búsqueda.

TAMBIÉN PUEDES VER: Descarga y Personaliza: La Guía Completa para instalar Plantillas en Blogger

Como crear una tabla de contenido en Blooger 

Crear una tabla de contenido en Blogger es relativamente sencillo. Aquí hay una guía paso a paso:

Accede a tu panel de control de Blogger:

👨‍💻Ingresa a tu cuenta de Blogger en https://www.blogger.com

👨‍💻Selecciona el blog para el que deseas agregar la tabla de contenido.

👨‍💻Luego nos vamos a la Configuración HTML de tu plantilla en General.

•   Para ello nos vamos a la pestaña Temas, luego damos en la pestañita que esta a lado de Personalizar.

• Elegimos la opción Editar HTML, al dar clic nos abrirá la plantilla de codigos de nuestro Blog en general. Es aquí donde pegaremos el primero código.

Pegado de código en Plantilla HTML de Blogger

✔️ Estando ya dentro de la plantilla HTML, vamos a buscar la etiqueta </head>. Para encontrarlo de una manera rápida es copiar el codido ya mencionado, luego damos clic en cualquier parte de la plantilla de códigos y damos presionamos las teclas CTRL + F de nuestro teclado físico.

 

✔️ Luego en la parte superior izquiera aparecerá un cuadro de búsqueda, es ahí donde pegaremos el código copiado anteriormente.

✔️ Presionamos la tecla ENTER o ENTRAR en nuestro teclado y automaticamente nos apacera la etiqueda buscada </head>.

Una vez localizada este código, copiaremos el código lineas abajo y pegaremos por encima de la 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 el código CSS en la plantilla principal HTML

Después nos toca pegar el codigo CSS para darle estilo. Para ello, en la misma plantilla principal buscamos el código: ]]></b:skin> y por encima de este pegamos el código que te dejo en la parte abajo:

/*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}
  

Recuerda que los estilos anteriores se pueden editar la color, fondo, tipo de letra etc. Personaliza a tu manera.

Reemplazando código

Ahora solo vamos a reemplazar un código en esta plantilla de HTML. Para ello buscamos el código <data:post.body/> y reemplazamos por por el siguiente código:

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

Ahora ya podemos Guardar los cambios en esta plantilla principal.

Crear y Mostrar Tabla o contenido en la entrada 

Despues de haber Guardado y cerrado el editor de Código en la plantilla Principal. Ahora vamos a implementar la tabla o índice en la entrada que desees. 

Seleccionamos la entrada donde queremos mostrar lo mencionado, elegimos la Vista HTML que esta en la parte superior izquiera de la hoja en forma de <>.

Pegas el siguiente código en a sección que desees, se recomiends despues 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>

 

Por último paso, solo nos queda pegar el siguiente código al final de nuestra entrada en la Vista HTML:

<script>mbtTOC2();</script>

En términos prácticos, la tabla de contenido suele ubicarse al principio del artículo, justo después de la introducción, para que los lectores puedan acceder fácilmente a ella. También puede incluirse en la barra lateral o en otro lugar visible para garantizar una navegación sencilla. En algunos blogs, la tabla de contenido se genera automáticamente con complementos o funciones específicas del sistema de gestión de contenidos (CMS) que esté utilizando el blog.

TAMBIÉN PUEDES VER

 ▷ Descarga y Personaliza: La Guía Completa para instalar Plantillas en Blogger