Plugin TOC en Blogger

Cómo activar y configurar el Plugin TOC

La Tabla de Contenidos (TOC) es una de las mejores formas de mejorar la experiencia de usuario y potenciar el SEO on-page de tus artículos largos. Por eso, en nuestra plantilla premium hemos incluido el Plugin TOC NichoClean, un sistema automático y personalizable que inserta un índice en tus posts y páginas sin que tengas que escribir una sola línea de código.

En este tutorial aprenderás cómo funciona, cómo activarlo y cuáles son sus opciones de configuración paso a paso.

Ventajas de usar el TOC NichoClean

  • Mejora el SEO: Google entiende mejor la jerarquía de tu contenido y puede mostrar enlaces directos en los resultados.
  • Experiencia de usuario: tus lectores encuentran rápido la sección que les interesa sin perder tiempo.
  • Automático: no necesitas instalar plugins externos ni editar manualmente cada entrada.
  • Responsivo: se adapta a móviles y pantallas pequeñas sin romper el diseño.
  • Personalizable: puedes elegir título, profundidad de encabezados y cómo se inyecta en el post.

Dónde colocar el gadget del Plugin TOC en logger

  1. Ve a Blogger → Diseño (Layout).
  2. Añade un gadget tipo HTML/JavaScript.
  3. Pega el bloque anterior y guarda.
  4. Recomendado: ponlo en el footer o al final de la plantilla (antes de </body>).

1. Configuración del gadget TOC

El TOC NichoClean se controla desde un gadget oculto dentro de la plantilla. Aquí está el bloque base:

<!-- Gadget: Configuración TOC NichoClean -->
<div id="config-toc" hidden
     data-activado="true"          
     data-depth="2"                
     data-title="Tabla de contenido"  
     data-injectar="auto"
	 >
</div>

Explicación de los parámetros

  1. data-activado="true|false" → Activa o desactiva el TOC en todo el sitio.
  2. data-depth="2|3|4|5" → Define la profundidad de los encabezados:
    • 2 = solo H2
    • 3 = H2 + H3
    • 4 = H2 + H3 + H4
    • 5 = H2 + H3 + H4 + H5
  3. data-title="Tabla de contenido" → Texto mostrado como título del índice.
  4. data-injectar="auto|marcador|none":
    • auto: se inserta automáticamente después del primer párrafo.
    • marcador: se muestra solo donde pongas <div id="toc-marker"></div> en tu post.
    • none: no se inyecta automáticamente (queda para uso manual).

2. Marcado dentro del post

El plugin detecta los encabezados dentro del cuerpo de la entrada y genera el índice. Para ello, la plantilla incluye el siguiente contenedor:

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

Si quieres usar el modo marcador, añade manualmente en tu entrada:

<div id="toc-marker"></div>

3. Script del TOC NichoClean

El JavaScript integrado se encarga de construir la tabla, añadir interactividad y resaltar la sección activa mientras el usuario hace scroll. No necesitas tocarlo, ya está optimizado e incluido en la plantilla:

<!-- 8. Js TOC caja de contenido  -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
  const config = document.getElementById("config-toc");
  if (!config) return;

  const ACTIVADO = config.dataset.activado === "true";
  const DEPTH = parseInt(config.dataset.depth || "2", 10);
  const TITLE = config.dataset.title || "Tabla de contenido";
  const MODO = config.dataset.injectar || "auto";

  if (!ACTIVADO) return;

  const content = document.querySelector("#post-toc");
  if (!content) return;

  // Selección de encabezados según profundidad
  const selector = Array.from({length: DEPTH-1}, (_,i)=>`h${i+2}`).join(",");
  let headers = content.querySelectorAll(selector);
  if (headers.length === 0) return;

  // Crear contenedor TOC
  const tocContainer = document.createElement("div");
  tocContainer.id = "toc-container";
  tocContainer.innerHTML = `
    <button id="toc-toggle" aria-expanded="false" aria-controls="toc">
      📑 Mostrar ${TITLE}
    </button>
    <nav id="toc" aria-label="${TITLE}" hidden></nav>
  `;

  const toc = tocContainer.querySelector("#toc");
  const toggle = tocContainer.querySelector("#toc-toggle");

  // Construir lista
  const titleEl = document.createElement("strong");
  titleEl.textContent = TITLE;
  toc.appendChild(titleEl);

  const ul = document.createElement("ul");
  let currentUl = ul;
  let lastLevel = 2;

  headers.forEach((header, index) => {
    if (!header.id) header.id = "toc-header-" + index;
    const level = parseInt(header.tagName.replace("H", ""), 10);

    const li = document.createElement("li");
    const a = document.createElement("a");
    a.href = "#" + header.id;
    a.textContent = header.textContent;
    li.appendChild(a);

    if (level === lastLevel) {
      currentUl.appendChild(li);
    } else if (level > lastLevel) {
      const newUl = document.createElement("ul");
      newUl.appendChild(li);
      const lastLi = currentUl.lastElementChild;
      if (lastLi) lastLi.appendChild(newUl);
      currentUl = newUl;
    } else {
      let parent = currentUl.parentElement;
      while (parent && parent.tagName === "UL" && level < lastLevel) {
        currentUl = parent;
        parent = currentUl.parentElement;
        lastLevel--;
      }
      currentUl.appendChild(li);
    }

    lastLevel = level;
  });
  toc.appendChild(ul);

  // Inyección según modo
  if (MODO === "marcador") {
    const marker = document.getElementById("toc-marker");
    if (marker) marker.replaceWith(tocContainer);
  } else if (MODO === "auto") {
    const firstPara = content.querySelector("p");
    if (firstPara) {
      firstPara.insertAdjacentElement("afterend", tocContainer);
    } else {
      content.prepend(tocContainer);
    }
  } else {
    content.prepend(tocContainer);
  }

  // Toggle
  toggle.addEventListener("click", () => {
    const isHidden = toc.hasAttribute("hidden");
    if (isHidden) {
      toc.removeAttribute("hidden");
      toggle.textContent = "📑 Ocultar " + TITLE;
      toggle.setAttribute("aria-expanded", "true");
    } else {
      toc.setAttribute("hidden", "true");
      toggle.textContent = "📑 Mostrar " + TITLE;
      toggle.setAttribute("aria-expanded", "false");
    }
  });

  // Extra CSS (resaltar sección activa)
  const extraCSS = `
    #toc a.active { 
      font-weight: bold; 
      color: #0366d6;
    }
  `;
  const style = document.createElement("style");
  style.textContent = extraCSS;
  document.head.appendChild(style);

  // Resaltar activo con IntersectionObserver
  const links = toc.querySelectorAll("a");
  const map = {};
  links.forEach(link => map[link.getAttribute("href").substring(1)] = link);
  const obs = new IntersectionObserver(entries => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        links.forEach(l => l.classList.remove("active"));
        const link = map[e.target.id];
        if (link) link.classList.add("active");
      }
    });
  }, {rootMargin:"-50% 0px -50% 0px", threshold:0});
  headers.forEach(h => obs.observe(h));
});
//]]>
</script>

4. Recomendaciones de uso

  • No abuses de encabezados H4 o H5 si tu contenido no los necesita. Un TOC demasiado profundo puede confundir al lector.
  • Si tu post es corto, puedes desactivar el TOC en esa entrada usando el modo none o simplemente ocultándolo.
  • Personaliza el título data-title con palabras clave relacionadas para aportar valor SEO.

El Plugin TOC NichoClean está diseñado para que cualquier blogger, incluso sin conocimientos técnicos, pueda ofrecer un contenido más organizado, navegable y optimizado. Solo activa el gadget, ajusta la configuración a tu estilo de escritura y deja que el sistema trabaje por ti.

Recuerda: una buena tabla de contenidos no solo mejora tu SEO, también fideliza a tu lector porque le facilitas la lectura. ¡Actívalo hoy mismo y haz que tu blog luzca más profesional!