¿Cómo crear un sitemap automático o una tabla de contenidos para mi blog de Blogger?

Aprende a crear un Sitemap Automático en Blogger con un Solo Código

Guía completa para mostrar todos tus artículos organizados por categorías

Introducción: Why You Need a Sitemap

Hoy responderé a una de las preguntas más frecuentes: cómo hacer un sitemap con un solo código que muestre todos los artículos publicados. La solución para usuarios de Blogger es sorprendentemente simple: solo necesitas insertar un código y realizar un pequeño cambio, sin necesidad de modificar el HTML de tu plantilla.

Anteriormente he publicado guías sobre cómo insertar un widget de comentarios y transformar etiquetas a menú desplegable. Todos estos trucos están diseñados para ser implementados fácilmente.

Live Demo: See It in Action

Puedes ver una demostración funcional en mi blog:

Step-by-Step Implementation

1. Accede a tu panel de Blogger

Inicia sesión en Blogger.com

2. Crea una nueva página

Haz clic en "Páginas" → "Página nueva" → "Página en blanco"

Crear nueva página en Blogger

3. Configura el título

En "Título de la página" escribe "Sitemap"

4. Cambia al modo HTML

Haz clic en el icono "HTML" en la esquina superior izquierda

Modo HTML en Blogger

5. Inserta el código del sitemap

Copia y pega el siguiente código:


<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;bpostTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(bpostTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;bpostTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="";h+="";h+='";h+='";h+='";h+='";h+="";for(var g=0;g';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='';l++}}}h+="
';h+=''+e+"";h+="';h+=''+d+"";h+="';h+=''+c+"";h+="';h+="Read all";h+="
'+postTitle[g]+''+postDate[g]+''+postLabels[g]+'Read
'+postTitle[g]+''+postDate[g]+''+postLabels[g]+'Read
";if(l==postTitle.length){var f='Show All '+postTitle.length+" Posts
"}else{var f='Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts
"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b");document.write('

'+temp1+"

    ");firsti=a;do{document.write("
  1. ");document.write(''+postTitle[a]+"");if(postRecent[a]==true){document.write(' - Nuevo!')}document.write("
  2. ");a=a+1}while(postLabels[a]==temp1);b=a;document.write("
");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='?? Display Table of Contents '}function looptemp2(){for(var a=0;a");document.write('Post Link : '+postTitle[a]+"
");document.write('Read all : '+postTitle[a]+"
");document.write("
")}}; //]]> </script> <script src="https://ayudadeblogger.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

6. Personalización clave

Reemplaza ayudadeblogger.com por la URL de tu propio blog

7. Publica y visualiza

Haz clic en "Publicar" y luego en "Visualizar" para ver los resultados

Publicar sitemap en Blogger

Dynamic Features: How It Works

Este sitemap automático tiene características avanzadas:

  • Se actualiza automáticamente con cada nuevo artículo
  • Organiza el contenido por etiquetas/categorías
  • Marca artículos recientes con etiqueta "Nuevo!"
  • Es completamente responsive (se adapta a móviles)
  • Puedes colocarlo en cualquier parte de tu blog

Need Help? Common Issues Solved

Si tienes problemas con la implementación:

1. Verifica que hayas cambiado la URL correctamente

2. Asegúrate de estar en modo HTML al pegar el código

3. Si no aparecen artículos, revisa que tengas etiquetas asignadas

Para preguntas específicas, déjalas en los comentarios.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

24 comentarios:

  1. Hola encantado en enviarte el codigo, necesito que me dejes la direccion de tu correo electronico para poder enviarte el codigo y las instrucciones a seguir.
    Saludos.

    ResponderEliminar
  2. Hola... gracias por el código, me ha gustado un montón. Pero quisiera preguntarte algo:
    1. Habría alguna forma de tomar etiquetas especificas, es decir las que uno escoja.
    2. También habría alguna forma de que tenga una imagen en miniatura cada entrada.

    Agradecería tu ayuda.

    ResponderEliminar
    Respuestas
    1. claro que si pero con este codigo no es posible, tal vez la proxima semana ya pueda publicar un script para que realice lo que tu dices, miestras tanto, te pido que estes atento a mis nuevas actualizaciones.
      Saludos.

      Eliminar
  3. Hola... gracias por el código, me ha gustado un montón. Pero quisiera preguntarte algo:
    1. Habría alguna forma de tomar etiquetas especificas, es decir las que uno escoja.
    2. También habría alguna forma de que tenga una imagen en miniatura cada entrada.

    Agradecería tu ayuda.

    ResponderEliminar
  4. Saludos,
    Hice el ejercicio, pero tengo un problema, y es que se ve de la siguiente manera el indice:

    Sitempap
    Confianza

    1. New !!
    2.
    3.Tú también puedes pedir confianza y valor

    Cristo
    1.
    2.Buscad el reino de Dios y su justicia
    3.El verbo hecho carne II
    4.El verbo hecho carne parte I
    5.Nuestra intimidad con Dios
    6.Parábola del redil
    7.Principios para ser una mujer de ministerio (I)

    es decir hay números que están vacíos y así por el estilo
    Eso fue solo un ejemplo, cómo arreglo esto?

    ResponderEliminar
    Respuestas
    1. Hola, enviame la direccion de tu blog, para poder ver que es lo que sucede, ya que el script funciona perfectamente.
      Saludos

      Eliminar
    2. Muchas gracias por responder.
      Mi blog es: avivameentucamino.blogspot.com

      Eliminar
    3. Hola, he visto tu blog, y no esta el link de Sitemap.
      Saludos.

      Eliminar
    4. El ejercicio como lo explicaste yo lo hice, y guarde y todo. pero al ver que me quedo así, borré todo el ejercicio. porque no se veía bien. entonces que me sugerencia me podrías dar para yo hacer?

      Eliminar
  5. Gracias me funciono, solo que me gustaría poder elegir las etiquetas para las que se genere, pero por el momento este esta excelente.

    ResponderEliminar
  6. hola. este código es tomado por el antivirus como troyano, que debo hacer? podrías enviarme el código del que tiene etiquetas especificas? gracias

    ResponderEliminar
  7. Voy a revizarlo y te informare... Saludos...

    ResponderEliminar
  8. Hola! Soy nueva en tu blog, me acabo de unir a tus seguidores! Di con el mismo buscando como agregar un sitemaps en mi blog el cual es nuevo. Bueno, tengo la misma inquitud del chilenito. Podrias enviarme igualmente el codigo con las instrucciones a mi tambien por favor???
    Aqui mi email: b.pinceladas@gmail.com
    Una pregunta que tengo es: Los sitemaps no hacen que blogger detecte nuestro blog como malicioso o de spam?
    Es que no se mucho de esto y vi en otro blog, que tiene un tutorial similar, que puso en ese tutorial, una actualizacion con una nota que decia eso que te acabo de preguntar. O bueno eso fue lo que entendi..
    Ahi me cuentas! Vuelvo luego a ver si me has respondido! Feliz dia! Mil gracias anticipadas! :)

    ResponderEliminar
  9. En este post esta todas las instrucciones ha seguir para insertar de forma automatica un Sitemap. Es facil no te va a dificultar nada.. Acabo de actualizar este post he inserte un nuevo codigo, copialo y veras que funciona, claro realiza su unico cambio, tal como lo publique.
    Saludos

    ResponderEliminar
  10. Buenísima tu pagina, te felicito por el tiempo y la dedicación a los usuarios de tu pagina, he encontrado diversos artículos muy bien explicados especiales para personas como yo que no se nada de diseño y programación y las orientaciones son precisas y claras...una pregunta: en el código en mencion esta tiene repetido tres veces http://ayudadeblogger.com/ en dicho caso cambio las tres por mi direccion? Mil Gracias Luis

    ResponderEliminar
    Respuestas
    1. Hola César, correcto puede cambiar en las tres posiciones por la dirección URL de su blog de Blogger. Saludos.

      Eliminar
  11. Hola luis me gustaria hacer un sitemap pero dentro del post por que es muy largo

    ResponderEliminar
    Respuestas
    1. Hola, si quiere ingresar el sitemap dentro de una entrada puede copiar todo el código que se encuentra en este tutorial. Deberá ingresar el código habilitando el botón HTML de la entrada, eso es todo

      Saludos.

      Eliminar
  12. Hola amigo, excelente aporte con la tabla decontenido, ya la estoy usando en mi blog. Pero quiero saber si es posible agregar el número de visita por cada entrada, podria ser entre () al final del titulo de la entrada.Me podrias orientar al respecto. Si puedes revisa mi blog http://hablemosdesig.blogspot.com/p/contenido.html saludos.

    ResponderEliminar
    Respuestas
    1. Hola Jorge, he visitado su blog de Blogger y le quedo muy bien su nuevo sitemap, con respecto a su pregunta, se deberá crear un nuevo script, espero poderlo realizar, así que Suscríbase y así recibirá mis nuevas actualizaciones.

      Saludos.

      Eliminar
  13. Hola! Lo he hecho todo como explicas, pero cuando lo publico y luego visualizo la página, no sale nada. Es como si la página estuviera en blanco. ¿a qué se debe esto?¿como lo puedo solucionar?
    saludos.

    ResponderEliminar
    Respuestas
    1. Hola Sebas, gracias por escribir, tal vez no este ingresando correctamente la dirección URL de su blog de Blogger, además hágame saber la dirección URL en el cual ingreso el sitemap en su blog

      Saludos.

      Eliminar
  14. hola, me gustari que solo aparecieran cierta etiquestas que yo decida, como jhago??

    ResponderEliminar