Mapa del Sitio Automático en Blogger

La página Sitemap o Mapa del Sitio es una herramienta fundamental dentro de la plantilla NichoClean v2.0. Permite a tus visitantes explorar todas las publicaciones del blog organizadas por temática o etiqueta, ofreciendo una navegación más intuitiva y amigable tanto para usuarios como para motores de búsqueda.

Este componente está completamente automatizado gracias a un script JavaScript optimizado que se conecta con el feed JSON de Blogger para generar una estructura limpia, ordenada y responsive, sin necesidad de plugins externos.

✨ Ventajas de tener un Mapa del Sitio automático

📚 Organización total: agrupa automáticamente todas tus entradas por etiquetas.
🚀 Optimización SEO: mejora la indexación de Google al ofrecer un mapa de enlaces internos accesible.
🔄 Actualización automática: cada vez que publicas un nuevo post, aparece de inmediato en el listado.
📱 Diseño responsive: se adapta perfectamente a cualquier dispositivo móvil o pantalla.
🧩 Integración total con NichoClean v2.0: mantiene la estética minimalista y la coherencia visual de la plantilla.

⚙️ Cómo instalar la Página Sitemap en tu blog

A continuación te explico paso a paso cómo integrar esta página en tu blog con la plantilla NichoClean v2.0. Solo necesitas crear una nueva página estática en Blogger y pegar el siguiente código en modo HTML.

1️⃣ Crea la página en Blogger

Entra a tu panel de Blogger.
Haz clic en Páginas → Nueva página.
Coloca un título como Mapa del Sitio o Sitemap.
Cambia al modo HTML del editor.
Pega el siguiente bloque de código completo.

2️⃣ Pega este código en modo HTML

<!-- 🗂️ Mapa del sitio automático por etiquetas (mejorado) -->
<div id="sitemap-wrapper">
  <p>Explora todas las publicaciones organizadas por temática.</p>
  <div id="sitemap-content">Cargando mapa del sitio...</div>
</div>

<style>
/* --- Estilos encapsulados del mapa del sitio --- */
#sitemap-wrapper {
  max-width: 850px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  font-family: system-ui, sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

#sitemap-wrapper h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

#sitemap-wrapper h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

#sitemap-wrapper ul {
  list-style: none;
  padding-left: 0;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

#sitemap-wrapper li {
  background: #f9fafb;
  border-left: 3px solid #e5e7eb;
  margin-bottom: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: background 0.3s ease;
}

#sitemap-wrapper li:hover {
  background: #f3f4f6;
}

#sitemap-wrapper a {
  text-decoration: none;
  color: #0077cc;
  font-weight: 500;
}

#sitemap-wrapper a:hover {
  text-decoration: underline;
}

.sitemap-date {
  font-size: 0.85rem;
  color: #6b7280;
  margin-left: 0.5rem;
}

#sitemap-content.loading {
  color: #6b7280;
  font-style: italic;
}

@media (max-width: 600px) {
  #sitemap-wrapper {
    padding: 1rem;
  }
}
</style>

<script>
// --- Detectar automáticamente el dominio del blog ---
const blogUrl = window.location.origin;

// --- Obtener TODAS las entradas ---
async function getPosts(startIndex = 1, posts = []) {
  const maxResults = 150; // Blogger permite hasta 150 por solicitud
  const url = `${blogUrl}/feeds/posts/default?alt=json&max-results=${maxResults}&start-index=${startIndex}`;
  const res = await fetch(url);
  const data = await res.json();
  const entries = data.feed.entry || [];

  for (const entry of entries) {
    const title = entry.title.$t;
    const link = entry.link.find(l => l.rel === 'alternate').href;
    const published = entry.published.$t.slice(0, 10);
    const labels = entry.category?.map(cat => cat.term) || [];
    posts.push({ title, link, published, labels });
  }

  const total = parseInt(data.feed.openSearch$totalResults.$t, 10);
  if (startIndex + maxResults <= total) {
    return getPosts(startIndex + maxResults, posts);
  }

  return posts;
}

// --- Renderizar el mapa del sitio ---
function renderSitemap(posts) {
  const container = document.getElementById('sitemap-content');
  container.classList.remove('loading');
  container.innerHTML = "";

  const grouped = {};

  // Agrupar las entradas por etiqueta
  posts.forEach(post => {
    post.labels.forEach(label => {
      if (!grouped[label]) grouped[label] = [];
      // Evitar duplicados
      if (!grouped[label].some(p => p.link === post.link)) {
        grouped[label].push(post);
      }
    });
  });

  const sortedLabels = Object.keys(grouped).sort();

  // Crear el contenido HTML
  sortedLabels.forEach(label => {
    const section = document.createElement('div');
    section.innerHTML = `<h3>${label} <small>(${grouped[label].length})</small></h3>`;
    const ul = document.createElement('ul');

    // Ordenar por título A-Z dentro de cada etiqueta
    grouped[label].sort((a, b) => a.title.localeCompare(b.title, 'es', { sensitivity: 'base' }));

    grouped[label].forEach(post => {
      const li = document.createElement('li');
      li.innerHTML = `<a href="${post.link}" title="${post.title}">${post.title}</a>
                      <span class="sitemap-date">${post.published}</span>`;
      ul.appendChild(li);
    });

    section.appendChild(ul);
    container.appendChild(section);
  });
}

// --- Inicializar ---
document.getElementById('sitemap-content').classList.add('loading');
getPosts().then(renderSitemap);
</script>

3️⃣ Publica y revisa el resultado

Guarda la página, publícala y revisa que la URL quede algo así como: https://tublog.blogspot.com/p/sitemap.html A los pocos segundos de cargar, verás cómo aparece el listado completo de publicaciones ordenadas por etiquetas.

💡 Recomendaciones adicionales

✔️ No necesitas editar el código: el script detecta automáticamente el dominio de tu blog.
⚠️ Si tienes más de 150 entradas, el script las cargará en lotes (gracias al parámetro start-index).
🧭 Puedes cambiar el texto del encabezado o el mensaje inicial si deseas un toque más personalizado.
🎨 El CSS está encapsulado, por lo que no interferirá con otros estilos de la plantilla.

🏁 Conclusión

El Mapa del Sitio automático por etiquetas es una función clave en la plantilla NichoClean v2.0 para mantener tu blog organizado, accesible y optimizado para SEO. Además de mejorar la experiencia del lector, refuerza la estructura de enlaces internos y da un aspecto profesional a tu proyecto.

Implementa esta página hoy mismo y ofrece a tus visitantes una forma clara y atractiva de explorar todo tu contenido.