Página Índice A–Z en Blogger
La página índice A–Z de la plantilla NichoClean v2.0 es una herramienta visual y automática que permite a tus lectores explorar todas las publicaciones ordenadas alfabéticamente. Este sistema organiza el contenido del blog de forma dinámica, elegante y completamente responsiva, sin necesidad de mantenimiento manual.
Ideal para blogs con decenas o cientos de artículos, esta función mejora el SEO interno, potencia la navegación del usuario y crea una experiencia más fluida para descubrir contenido.
🧭 ¿Qué es la Página Índice A–Z y por qué deberías usarla?
La página índice alfabética actúa como un mapa completo del blog. Recopila automáticamente todas las entradas del feed de Blogger y las agrupa según la primera letra del título (A, B, C… Z). De este modo, tus visitantes pueden encontrar rápidamente cualquier publicación sin depender de las etiquetas o el buscador interno.
✨ Beneficios principales:
- Automática: no necesitas actualizarla manualmente. Cada nueva entrada se agrega sola.
- Optimizada para SEO: mejora la indexación interna y el enlazado entre posts.
- Minimalista y rápida: mantiene la estética limpia de NichoClean v2.0.
- Totalmente responsive: se adapta perfectamente a móviles, tablets y PC.
- Interactividad suave: los enlaces A-Z permiten desplazarse con desplazamiento fluido.
⚙️ Cómo instalar la Página Índice en tu blog
Sigue estos pasos para implementar la página índice alfabética dentro de tu plantilla NichoClean v2.0.
1. Crea una nueva página en Blogger
Desde tu panel de Blogger, ve a Páginas → Nueva página y coloca un título como:
Índice alfabético A–Z
2. Cambia al modo HTML
En el editor de la página, cambia al modo HTML y pega el siguiente código:
<!-- 🧭 Índice alfabético automático para Blogger -->
<div id="sitemap-wrapper">
<p>Explora todas las publicaciones ordenadas de la A a la Z o navega por <a href="/p/sitemap-tags.html" target="_blank">etiquetas</a> temáticas para encontrar fácilmente cada contenido del blog.</p>
<!-- Mini índice A-Z -->
<div id="alphabet-nav" style="margin-bottom:1rem;"></div>
<div id="sitemap-content">Cargando índice...</div>
</div>
<style>
#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: 2rem;
}
#sitemap-wrapper li {
background: #f9fafb;
border-left: 3px solid #e5e7eb;
margin-bottom: 0.5rem;
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;
}
/* Mini índice A-Z */
#alphabet-nav a {
margin-right: 0.5rem;
text-decoration: none;
font-weight: 600;
color: #0077cc;
transition: color 0.2s;
}
#alphabet-nav a:hover {
color: #004a99;
}
</style>
<script>
const blogUrl = window.location.origin;
// Función para obtener todas las entradas
async function getAllPosts(startIndex=1, posts=[]) {
const maxResults = 150;
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);
posts.push({title, link, published});
}
const total = parseInt(data.feed.openSearch$totalResults.$t,10);
if(startIndex + maxResults <= total){
return getAllPosts(startIndex + maxResults, posts);
}
return posts;
}
// Formatear fecha a algo más legible
function formatDate(dateStr){
const options = { year:'numeric', month:'short', day:'numeric' };
return new Date(dateStr).toLocaleDateString('es-ES', options);
}
// Renderizar índice alfabético con mini A-Z
function renderAlphabeticalIndex(posts){
const container = document.getElementById('sitemap-content');
container.innerHTML = "";
// Duplicados por URL
const uniquePosts = Array.from(new Map(posts.map(p=>[p.link,p])).values());
// Ordenar A-Z
uniquePosts.sort((a,b)=>a.title.localeCompare(b.title,'es',{sensitivity:'base'}));
// Agrupar por letra
const grouped = {};
uniquePosts.forEach(post=>{
const letter = post.title.charAt(0).toUpperCase();
if(!grouped[letter]) grouped[letter]=[];
grouped[letter].push(post);
});
const sortedLetters = Object.keys(grouped).sort();
// Crear mini índice A-Z
const nav = document.getElementById('alphabet-nav');
nav.innerHTML = "";
sortedLetters.forEach(letter=>{
const a = document.createElement('a');
a.href = `#letter-${letter}`;
a.textContent = letter;
a.addEventListener('click', e=>{
e.preventDefault();
document.getElementById(`letter-${letter}`).scrollIntoView({behavior:'smooth'});
});
nav.appendChild(a);
});
// Renderizar contenido
sortedLetters.forEach(letter=>{
const section = document.createElement('div');
section.innerHTML = `<h3 id="letter-${letter}">${letter} (${grouped[letter].length})</h3>`;
const ul = document.createElement('ul');
grouped[letter].forEach(post=>{
const li = document.createElement('li');
li.innerHTML = `<a href="${post.link}" title="${post.title}">${post.title}</a> <span class="sitemap-date">${formatDate(post.published)}</span>`;
ul.appendChild(li);
});
section.appendChild(ul);
container.appendChild(section);
});
}
getAllPosts().then(renderAlphabeticalIndex);
</script>3. Publica la página
Guarda y publica la página. Luego, añádela al menú principal o al pie de página de tu blog para que los visitantes puedan acceder fácilmente.
🧩 Personalización opcional
La plantilla NichoClean v2.0 ya integra un sistema de estilos globales, por lo que el bloque anterior respeta el diseño base. Sin embargo, puedes modificar:
- El color de los enlaces
#0077ccpara adaptarlo a tu paleta. - El tamaño máximo del contenedor
max-width: 850px;para blogs más anchos o estrechos. - Los efectos hover o las sombras para mayor contraste.
🚀 Ventajas SEO y experiencia de usuario
Implementar esta página índice A–Z ayuda a distribuir autoridad interna y mejora la experiencia del usuario. Los bots de búsqueda rastrean con facilidad los enlaces internos, mientras los visitantes humanos obtienen una visión clara del contenido total del sitio. Es una mejora sencilla que aumenta el tiempo de permanencia y reduce el rebote.
✅ Conclusión
La Página Índice A–Z de NichoClean v2.0 es una de esas funciones que aportan valor real al blog: organización, estética, automatización y SEO en una sola herramienta. En apenas unos minutos, puedes ofrecer a tus lectores un sistema de navegación profesional digno de una plantilla premium.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario