Como crear una página Sitemap o mapa del sitio web para Blogger se ha vuelto prioritario en la actualidad. El sitemap lleva el registro de todo las publicaciones en nuestro blog de forma ordenada y profesional. El mapa del sitio web también es fundamental para posicionar nuestra web en google (SEO) ya que ayuda indexar más rápido las entradas publicadas dentro del blog en los buscadores de internet.
Crear Sitemap para Blogger Fácil y Profesional
1º Ingresar a Blogger / Paginas, aquí crearemos una nueva pagina con el titulo Sitemap.
2º Copiaremos el siguiente código HTML del Sitemap y lo pegaremos en la opción Vista HTML de nuestra nueva pagina.
Código html Sitemap
<style scoped="" type="text/css">
#native-sitemap { max-width: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #222; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); overflow: hidden; border-left: 5px solid #C0392B; box-sizing: border-box; color: #fff; margin: 0 auto; }
.sitemap-header { background: #C0392B; padding: 14px 20px; color: #fff; font-size: 16px; text-align: center; font-weight: 700; letter-spacing: .5px; }
.sitemap-container { display: flex; min-height: 380px; box-sizing: border-box; }
.sitemap-tabs { width: 35%; background: #1a1a1a; max-height: 450px; overflow-y: auto; border-right: 1px solid #333; box-sizing: border-box; }
.sitemap-tabs::-webkit-scrollbar { width: 5px; }
.sitemap-tabs::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.sitemap-tab-btn { display: block; width: 100%; text-align: left; background: none; border: none; font-size: 13px; color: #fafafa; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #2a2a2a; transition: all 0.2s ease; box-sizing: border-box; }
.sitemap-tab-btn:hover { background-color: #333; color: #fff; }
.sitemap-tab-btn.active { background-color: #C0392B; color: #fff; font-weight: 600; }
.sitemap-content { width: 65%; background: #fafafa; max-height: 450px; overflow-y: auto; padding: 0; box-sizing: border-box; }
.sitemap-content::-webkit-scrollbar { width: 5px; }
.sitemap-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.sitemap-panel-list { list-style: none; margin: 0; padding: 0; }
.sitemap-panel-item { border-bottom: 1px solid #eee; }
.sitemap-panel-item a { display: block; font-weight: bold; font-size: 14px; color: #2c3e50; line-height: 22px; padding: 12px 15px; text-decoration: none; transition: color 0.2s ease; }
.sitemap-panel-item a:hover { color: #C0392B; background: #f8f9fa; }
.sitemap-loading { text-align: center; padding: 40px; color: #666; font-size: 14px; font-style: italic; }
/* Diseño Adaptativo (Móviles) */
@media(max-width:768px){
.sitemap-container { flex-direction: column; }
.sitemap-tabs { width: 100%; display: flex; flex-wrap: wrap; max-height: none; overflow-y: visible; border-right: none; border-bottom: 3px solid #C0392B; }
.sitemap-tab-btn { flex: 1 1 auto; text-align: center; padding: 10px 8px; font-size: 12px; border-bottom: none; border-right: 1px solid #333; }
.sitemap-content { width: 100%; max-height: 350px; }
}
</style>
<div id="native-sitemap">
<div class="sitemap-header">MAPA DEL SITIO - ARCHIVO GENERAL</div>
<div class="sitemap-container">
<div id="sitemap-tabs" class="sitemap-tabs">
<div class="sitemap-loading">Cargando etiquetas y entradas...</div>
</div>
<div id="sitemap-content" class="sitemap-content">
<div class="sitemap-loading">Selecciona una categoría</div>
</div>
</div>
</div>
<script>
(async function() {
const blogUrl = "https://tutorialesgratisdeinternet.blogspot.com";
const tabsContainer = document.getElementById('sitemap-tabs');
const contentContainer = document.getElementById('sitemap-content');
let postsByTag = {};
try {
// Se aumenta el parámetro max-results a 999 para capturar la totalidad de los posts del blog
const response = await fetch(`${blogUrl}/feeds/posts/summary?alt=json&max-results=999`);
const data = await response.json();
const entries = data.feed.entry || [];
// Procesamiento y agrupación estricta por etiquetas
entries.forEach(entry => {
const title = entry.title.$t;
let postUrl = "#";
if (entry.link) {
const altLink = entry.link.find(l => l.rel === 'alternate');
if (altLink) postUrl = altLink.href;
}
if (entry.category) {
entry.category.forEach(cat => {
const tagName = cat.term;
if (!postsByTag[tagName]) {
postsByTag[tagName] = [];
}
postsByTag[tagName].push({ title, url: postUrl });
});
}
});
// Ordenar alfabéticamente las etiquetas de la A a la Z
const sortedTags = Object.keys(postsByTag).sort((a, b) => a.localeCompare(b));
if (sortedTags.length === 0) {
tabsContainer.innerHTML = '<div class="sitemap-loading">No se encontraron etiquetas.</div>';
return;
}
tabsContainer.innerHTML = '';
sortedTags.forEach((tag, index) => {
const buttonEl = document.createElement('button');
buttonEl.className = 'sitemap-tab-btn' + (index === 0 ? ' active' : '');
buttonEl.textContent = `${tag} (${postsByTag[tag].length})`;
buttonEl.onclick = () => {
document.querySelectorAll('.sitemap-tab-btn').forEach(b => b.classList.remove('active'));
buttonEl.classList.add('active');
renderPosts(postsByTag[tag]);
};
tabsContainer.appendChild(buttonEl);
});
// Cargar automáticamente la primera categoría al iniciar
renderPosts(postsByTag[sortedTags[0]]);
} catch (error) {
tabsContainer.innerHTML = '<div class="sitemap-loading">Error al procesar el contenido.</div>';
console.error("Error sitemap nativo:", error);
}
function renderPosts(posts) {
let html = '<ul class="sitemap-panel-list">';
posts.forEach(post => {
html += `<li class="sitemap-panel-item"><a href="${post.url}" target="_blank">${post.title}</a></li>`;
});
html += '</ul>';
contentContainer.innerHTML = html;
}
})();
</script>Cambiar el enlace url "https://tutorialesgratisdeinternet.blogspot.com" por el enlace url principal de tu blog, darle en publicar los cambios ya tendrá un Sitemap totalmente adaptada para su sitio web
