Tabla de contenido (Sitemap) con pestañas

24 de noviembre de 2014 78 comentarios ,
Sitemap


Las tablas de contenido, también llamadas sitemap o mapa del sitio, permiten al visitante navegar por todo el contenido del sitio de una forma práctica, en nuestro caso accediendo a las etiquetas del blog y sus respectivas entradas publicadas.
Ya hemos visto un par de ellos, pero este en particular me gusta por la forma como está organizado todo, en pestañas, tipo tabview lo cual hace que tenga un diseño más intuitivo para el usuario, además que incluye varias opciones que lo hacen más completo.

Esta tabla de contenido es una creación de Taufik Nurrohman, un genio indonesio en estos temas de Blogger. No requiere de librerías externas así que prácticamente no tendremos que preocuparnos por el tema de la compatibilidad.

El demo lo puedes ver aquí mismo, del lado izquierdo están las etiquetas del blog, al dar click sobre una de ellas se muestran del lado derecho las entradas correspondientes a dicha etiqueta.


Cargando entradas...




Estas tablas de contenido por lo general se muestran en una página estática, por ese motivo pondremos todo el código dentro de la página, incluyendo los estilos para evitar que estos se carguen en cualquier otra parte del blog donde el sitemap no se mostrará.
Para poner esta tabla de contenido -sitemap- en tu blog crea una página, y estando en la pestaña HTML de la página pega este código:

<style>
#SiteMapBlogger {
width:99%;
margin:0 auto;
background-color:#444; /* Color de la barra lateral */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Color de las etiquetas */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Color de fondo de las etiquetas al pasar el cursor */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Color de la pestaña activa */
color:#FFF; /* Color del texto de la pestaña activa */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Color del borde que separa las entradas de las etiquetas */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Tamaño del título de las entradas */
color:#333; /* Color del título de las entradas */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Tamaño de la fecha */
color:#DCDCDC; /* Color de la fecha */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px; /* Ancho del contenedor de las miniaturas */
height:72px; /* Alto del contenedor de las miniaturas */
border:1px solid #dcdcdc; /* Borde de las miniaturas */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Color de fondo secundario de las entradas */
font-size:10px;
color:#414141 /* Color de texto secundario de las entradas */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Color de fondo del título de las entradas (modo sumario) y color de fondo del título de las entradas al pasar el cursor (modo normal) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover time {
background-color:#444
}

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
</style>
<div id="SiteMapBlogger">
<span class="loadingPosts">Cargando entradas...</span></div>
<br />
<script>
var tabbedTOC = {
blogUrl: "http://nombre-de-mi-blog.blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/imagen.png",
monthNames: ["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>¡Nuevo!</i>"
};
</script>

<script>
/*
* Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman
* Free for change but keep the original attribution.
* URL: https://plus.google.com/108949996304093815163 */

function clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}function showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink?' target="_blank"':"";if(w[x].term==i[l].term){s+='<li title="'+w[x].term+'"';s+=n.showSummaries?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/imagen.png",monthNames:["Enero","Febrero","Marzo","April","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>¡Nuevo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</script>

En donde está en color rojo va el nombre de tu blog. En el área de los estilos verás en color verde dónde puedes personalizar el aspecto.

Ahora vamos con las opciones de este gadget, estas opciones se encuentran en el código que añadiste:

activeTab es la pestaña predeterminada
showDates cambiar a false para ocultar la fecha
showSummaries cambiar a true para mostrar resúmenes (sumarios)
numChars número de caracteres en el resumen
showThumbnails cambiar a true para mostrar miniaturas de las entradas
thumbSize tamaño de la miniatura
noThumb miniatura predeterminada para las entradas que no tienen imagen.
monthNames es el nombre de los meses cuando se muestra la fecha
newTabLink cambiar a true para abrir las entradas en una pestaña nueva
sortAlphabetically cambiar a false para ordenar las entradas por fecha
showNew cambiar a false para ocultar el texto "¡Nuevo!" que aparece en las entradas recientes, o define cuántas entradas recientes tendrán ese texto
newText es el texto "¡Nuevo!" de las entradas recientes

Aunque este gadget ofrece la posibilidad de mostrar resúmenes (sumarios) de las entradas con su respectiva miniatura, se recomienda no activar ninguna de las dos opciones para evitar lentitud en la carga. También es importante que una vez que pongas el código no cambies a la pestaña Redactar.

Este sitemap es responsive, o sea que se adapta al tamaño del contenedor y cambia su forma cuando se mira desde un móvil por ejemplo. Por tal motivo debajo de @media (max-width:700px) verás otros estilos, esos son los estilos para el modo "pequeño" del sitemap.

Esta tabla de contenido o sitemap me parece que es de las más completas que hemos visto hasta ahora ya que ofrece diversas opciones que podemos configurar para darle el aspecto que queramos. Y lo mejor de todo es que no dependeremos de librerías o scripts externos, todo está en un solo código listo para copiar y pegar.


78 comentarios en:

" Tabla de contenido (Sitemap) con pestañas "

  1. Sin palabras... es genial :D
    Muchas gracias Potro!

    ResponderEliminar
  2. Tenemos un ataque de daltonismo.

    No encuentro nada en rojo ;)

    Una entrada genial, gracias Potro.

    ResponderEliminar
  3. Ya lo he implementado.Queda genial.Muchas gracias Potro

    ResponderEliminar
  4. Muy bueno, aunque carga bastante lento! Gracias por el post!

    ResponderEliminar
  5. Hola Potro. Implemento como dices, guardo y publico, pero sólo la puedo ver cuando entro a Entradas luego a Páginas y si doy click a ver debajo del nombre de la publicación. En el blog si doy a Página principal, sigue el resumen en grande de antes y tampoco se ve así si pincho alguna etiqueta como sucede en el sitio de Taufik Nurrohman. Es decir no la encuentro. Me falto algo?

    ResponderEliminar
    Respuestas
    1. Hola Gladys, si lo pones en una página entonces sólo verás la página cuando accedas a ella a través de un menú o enlace, recuerda que las páginas no se muestran en la portada como en el caso de las entradas. Si tienes un menú puedes enlazar esa página, así podrás tú y tus lectores dar click en dicho menú para que les abra la página donde tienes el sitemap.

      Eliminar
  6. Magnífico, Potro.
    Solo me queda paciencia conmigo misma para poder hacer factible un menú así (etiquetas, o sea ¡nulidad mía con ellas :)))

    Pero ya que estamos, aprovecho..¿será posible que algún día blogger ofrezca la, comprendo que complicada, posibilidad de combinar etiquetas? Porque desde casi el principio de los tiempos siento que es lo que le falta a este soporte...
    No sé si me explico...
    Mientras, este beso enorme, mi querido Potro.
    Y mi gratitud.

    ResponderEliminar
    Respuestas
    1. Hola Sofía, no comprendo muy bien el concepto de las etiquetas combinadas, pero también desconozco qué se pueda traer entre manos Blogger porque ya hemos visto que pueden pasar muchísimos meses sin ningún cambio y de pronto ¡bum! novedades y renovaciones en varias áreas de la plataforma, así que sólo ellos saben...

      Un beso :*

      Eliminar
  7. Hola potro,tengo un problema he intentado poner el leer mas con imagen y no me funciona ???

    ResponderEliminar
  8. Hola Potro, me encanta éste sitemap.
    No creo que lo recuerdes pero, hace un tiempo, te volví un poco loco porque el sitemap que yo uso, sacado de tu estupendo blog ,solo leía 500 entradas y, aunque, pude solucionarlo poniendo una llamada para cada etiqueta, veo que tarda en cargar y quería preguntarte si éste nuevo sitemap también tiene la traba de leer 500 posts o, por el contrario, lee todos los posts del blog
    Por cierto, si sabes de algún sitemap que también incluya miniaturas de imagen, te agradecería muchísimo que nos lo enseñaras,ya que, ahora, tengo que poner cada imagen y cada enlace manualmente
    Un abrazo y, como siepre ¡¡gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Ana, este sitemap incluye miniaturas de imagen, pero como menciono en la entrada, es mejor no activarlas, sobre todo si te preocupa el tiempo en el que carga.
      Cualquier gadget en Blogger tendrá el problema con más de 500 posts porque no tenemos acceso al archivo del blog sino al feed y recordemos que el feed no es un archivo así que su capacidad al ser limitada almacena sólo cierto número de entradas por lo que cualquier gadget que utilice el feed para leer entradas se encontrará con el mismo problema.
      Un abrazo.

      Eliminar
    2. Potro, no se ni como he leído la entrada, si que había leído que incluía lo de mostrar resúmenes pero, me despisté y no leí lo de las miniaturas, perdona.
      Y, viendo que el problema de los 500 posts persiste , seguiré con el índice que tengo, ya que habiéndo puesto una llamada por etiqueta , me lee más posts en total
      Muchísimas gracias por tu respuesta y por tu tiempo y, siento no haber leído bien el post jeje
      Abrazosssss

      Eliminar
    3. Gracias Ana, otro abrazo para ti :)

      Eliminar
  9. hola potro, disculpa las molestas pero no lo encuentro, en donde me respondistes ?

    ResponderEliminar
    Respuestas
    1. En la entrada sobre el "Leer más con imágenes en miniatura", sólo recuerda dar click en el botón "Cargar más..." que se encuentra abajo, para que puedas ver todos los comentarios. Saludos.

      Eliminar
  10. ¡Hola, Potro amigo!
    Está muy bueno. Actualizaré alguno de mis sitios donde uso el mapa viejo.
    Pero venía por otra cuestión:
    En mi blog De Poco Un Todo agregué una página de donativos (encontrarás la página en el menú superior), donde te he copiado olímpicamente algunas cosas, incluidas las imágenes de las manitos con la moneda, jeje. He logrado quitar casi todas las cosas, incluso la sidebar, pero el problema es que no consigo que el texto y la imagen queden centrados. Es decir, la sidebar ya no está, pero es como si continuara allí, ya que no deja que el texto se centre. ¿Me podrías decir qué debo hacer para solucionarlo?
    Muchas gracias anticipadas. :)
    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Facundo, una vez que has ocultado la sidebar tienes que localizar el ID del contenedor de las entradas, ese ID debes condicionarlo para que en las páginas tenga un ancho mayor, de esa forma podrá ocupar el espacio vacío donde estaba la sidebar.
      Saludos.

      Pd. Luego te paso la factura de los iconos :P

      Eliminar
    2. Jua jua, bueno, envíame la factura entonces :)
      Al poner un ancho mayor al id ("Blog1") se amplía, pero la mitad del texto y de las imágenes se esconden detrás de la sidebar (sidebar invisible pero molesta).
      Sin embargo al decirme que debo "condicionar", ya entendí más o menos por dónde debo ir. Y logré centrar el contenido agregando #content-wrapper {width:720px;}
      Eso sí: el texto queda del mismo ancho. Cuando quiero ampliarlo, todo vuelve a meterse detrás de la sidebar.
      Pero bueno, ya con esto me quedo mucho más conforme.
      Nuevamente mil gracias por tu ayuda, Potro.
      ¡Saludos!

      Eliminar
    3. Pues parece que lo has conseguido porque desde aquí ya no veo la sidebar y el contenido de la página lo veo ocupando todo el ancho ;)

      Eliminar
  11. Oye, ¿hay forma de que el nombre de la etiqueta se vea completa como que se pase para abajo el texto? por que lo use en mi blog aquí, http://juegosbg.blogspot.com/p/sitemap.html y la etiqueta no se ve completa

    ResponderEliminar
    Respuestas
    1. Elimina el height:28px; y overflow:hidden; que están dentro de #SiteMapBlogger .sitemapTabs li a
      Eso hará que las etiquetas ocupen todo el alto que sea necesario para mostrarse completas.

      Eliminar
  12. hola potro n.n/
    quería preguntarte si hay alguna forma de que las entradas se vean como cuando visitas un blog desde un celular y hacer que se vean así desde el ordenador? así como cuando le picas a alguna de tus categorías pero que igual se vea así tanto en la pagina de inicio como en las etiquetas y todo. No sé si me explico

    ResponderEliminar
    Respuestas
    1. Hola Mile Acero, aquí hay una entrada que explica cómo poner el "Leer más" automático en las entradas del blog:
      http://www.ciudadblogger.com/2010/03/leer-mas-automatico-con-imagenes-en.html

      Eliminar
  13. Hola amigos,

    Ayer cargué el sitemaps en mi blog y desde ayer, me sale "cargando entradas"...

    Sabéis a que se debe.. os ha pasado algo similar?

    Aquí podéis ver lo que os comento.

    http://www.guerraeconomica.com/p/sitemap-guerraeconomicacom.html

    ResponderEliminar
    Respuestas
    1. Hola Martí, ponlo nuevamente, una vez que lo publiques no lo edites ni hagas otro cambio. Recuerda que tampoco debes cambiar a la pestaña Redactar una vez colocado.

      Eliminar
  14. Hola Potro!
    Estaba revisando esta tabla y al parecer funciona con todas las etiquetas existentes en el blog. Me preguntaba si habia alguna manera de seleccionar las que quisiera que aparezcan en dicha tabla, y omitir algunas sin tener que eliminarlas del blog?
    Gracias por la atencion.

    ResponderEliminar
  15. Em me sale cargando entradas y nunca pasa nada :( y puse la url de mi blog :p

    ResponderEliminar
    Respuestas
    1. Elimínalo y ponlo de nuevo. También asegúrate que tengas habilitado el feed de tu blog. Una vez que publiques la página no la edites ni hagas otro cambio. Tampoco debes cambiar a la pestaña Redactar una vez colocado el código.

      Eliminar
  16. Mil gracias, es lo que estaba buscando.
    Como siempre, vine con preguntas:
    Si borro o creo entradas ¿Se actualiza solo?
    En mi blog, (Xíntesis) tengo las etiquetas recetas de cocina y lengua y literatura.
    En mi computadora se muestran como "lengua y"; "recetas de", pero en mi teléfono aparece el texto completo ¿Qué sucede?

    ResponderEliminar
    Respuestas
    1. Hola Facu. Sí, se actualiza sólo aunque quizá no inmediatamente. Lo otro es por el ancho del contenedor, en el comentario #15.1 verás cómo hacer que se muestren completas las etiquetas.

      Eliminar
  17. Hola, copié el código y solo me salen 2 pestañitas de niveles de menú, como hago para tener más? en que parte del código me meto? por favor

    ResponderEliminar
    Respuestas
    1. En realidad no hay que mover nada, se supone que deberían aparecer todas las entradas de cada etiqueta.

      Eliminar
  18. ¡Hola!, pues lo acabo de instalar pero no aparecen todas las entradas a pesar de estar bien etiquetadas. ¿Se te ocurre que es lo que puede ocurrir?
    Muchas gracias!

    ResponderEliminar
  19. Es curioso, las entradas que no aparecen son todas las publicadas en el año 2010 ¿?

    ResponderEliminar
    Respuestas
    1. Hola Chelo, no sé si pueda ser que el tamaño de tu feed ya esté muy grande, si es así no alcanzará a leer todas las entradas de tu blog, es el problema de estos sitemaps :(

      Eliminar
    2. Hola Potro, tengo la misma situacion que Chelo Garcia, las entradas mas antiguas no aparecen en el sitemaps. No hay una solucion rapida a eso? Si re-publico todas las entradas antiguas a una fecha mas reciente ya aparecerian? O simplemente es imposible que estas aparezcan?
      Gracias por la atencion.

      Eliminar
    3. Lo que sucede es que le feed del blog tiene un límite, y en el caso de estos métodos para leer las entradas siempre es un máximo de 500 entradas, por más números que pongamos no podrá leer más de 500 :(

      Eliminar
    4. Muchas gracias!, entonces me veo haciendo a mano, uf!

      Eliminar
  20. Hola Potro :D
    Una consulta... ¿Funciona si mi blog ya tiene dominio propio?
    Es decir si al "BlogUrl" le pongo un dominio www.abc.com ...¿igual me botara de manera normal las entradas por etiqueta? o solo funciona con subdominios?

    ResponderEliminar
    Respuestas
    1. El demo es de aquí mismo, el cual tiene dominio propio.

      Eliminar
  21. Holaa Potro..no sé que pasa, ni con esto ni con el antiguo más fácil no funciona mi índice :(

    ResponderEliminar
    Respuestas
    1. Hola Gaby, habría que ver en cuál entrada o página lo has puesto.

      Eliminar
  22. Hola!

    Muchas gracias por este índice, funciona de maravilla y además me encanta que se pueda personalizar tanto! Sólo una cosa...he puesto lo de mostrar miniaturas (Show Thumbnails: true) ya que al ser un blog de cocina me interesa que se vea la foto, pero no aparecen. Sabes por qué puede ser?

    Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola, si eliges que se muestren las miniaturas también tienes que configurarlo para que se muestren los resúmenes. Saludos.

      Eliminar
  23. Hola. Muy bonito. Tengo un solo problema (que también ocurre en la demo, si te fijas): cuando el nombre de la entrada es muy largo, no se ve el "¡Nuevo!" o la fecha. ¿Se puede corregir? Desde ya, mil gracias. Lo puse aquí: http://www.monialus.com.ar/p/contenidos.html

    ResponderEliminar
    Respuestas
    1. Sólo se me ocurre que agrandes las entradas, no veo otra opción de momento :(

      Eliminar
  24. Muy bueno Potro!! Lo aplique a mi blog y me encanto!! Gracias por tu ayuda

    ResponderEliminar
  25. Gracias, gracias, gracias....muy fácil de instalar y el resultado es espectacular.

    ResponderEliminar
  26. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  27. Salaam Alleikhum Potro. Tengo el mismo problema de Martí. Me sale un mensaje de Cargando entradas. Lo reinstalé sin modificar nada y el problema persiste. Con este y otros scripts es lo mismo, al instalarlo funciona con la URL que trae por defecto pero al poner la mía ya no sirve? De antemano agradezco cualquier observación. Mi blog es www.avesdecolombia.com

    ResponderEliminar
  28. Hola potro, gracias por el aporte esta Genial, Pero lo pongo en mi Blog y sale Cargando entradas y de ahi no paso ayuda http://www.appinboxbygmail.com/p/sitemapblogger-width99margin0.html

    ResponderEliminar
  29. Hola, ¿Me podrías ayudar? Soy nuevo en Blogger. Lo que pasa es que ya hice lo que dijiste, pegar el codigo en una pagina, ¿y luego qué? Ya no sé que hacer, ni como hacer que me aparezca en mi blog, ni como hacer para agregar una nueva categoría....
    Saludos.

    ResponderEliminar
  30. Me pasa lo mismo. Se queda con el texto de cargando entradas

    ResponderEliminar
  31. hola abri una pagina (entrada) y coloque esos codigo en HTML, luego le di publicar y nada solo salieron publicados los codigos.

    ResponderEliminar
  32. hola abri una pagina (entrada) y coloque esos codigo en HTML, luego le di publicar y nada solo salieron publicados los codigos.

    ResponderEliminar
  33. Hola Potro, Buenas, He de decir que me encanta tu Blog y me ha ayudado mucho con el mio, somos novatos en esto de los blogs, pero grácias a gente como usted haze que sea mas facil, peró una cosa, no he acabado de entender muy bien como poner todo el CSS de manera que quede como es debido.
    _A y porfavor sería un gran placer que se pasará por nuestro Blog y nos diera su opinión;
    Muchísimas Grácias:

    Grácias, Atentamente
    Kitty Wolf Chesire
    Del Bog: Ever After High Blog Kitty Wolf

    ResponderEliminar
  34. Desgracia tenemos los daltonicos que no vemos ni el rojo ni el verde.
    Solucionaron el tema a los ciegos con el brayle pero nos jodimos los daltonicos.
    Ehhh que es de buen rollo, pero la proxima negrita o cursiva, jajajaj
    De todos modos me lo copiiiiooooooo saludos

    ResponderEliminar
  35. Bueno ya solvente el problema de los colores.
    Menudo chollo de indice. Felicidades.
    Ahora bien. A mi me sirve mucho por un tema de seleccion de Ciudades, con lo cual puede ser eterno.
    Pregunto..
    Se puede hacer el indice en 3 columnas para que no se vaya muy abajo ?
    O con esta otra solucion ya seria la "repanocha en verso" se puede hacer despegable ?
    Un saludo cordial

    ResponderEliminar
    Respuestas
    1. Hola, Santiago. Hace más de un año que El Potro no da signos de vida. Con respecto a tu pregunta, ¿probaste reduciendo el tamaño de la tipografía?

      Eliminar
    2. No, me da mas la reduccion de la tipografia.
      La verdad es que es muy buen indice, yo lo uso con 35 ciudades y la verdad es que es muy rapido.
      Pues una pena lo del Potro, porqueyo le he estado sacando "chicha" a sus ayudas.
      Gracias por responder Moni

      Eliminar
  36. Como el Potro no esta por aqui, me permito un comentario para los que dicen solo cargando entradas..

    Si el blog lo teneis en indole privado, no funciona, tienes que ponerlo a publico.

    Yo me volvi hecho un 4, pero al final resolvi.
    Tambien hay que cambiar la direccion de la pagina a la vuestra no os olvideis, que este es otro error, saludos Potro y disculpa la intro.

    ResponderEliminar
  37. Hola mis saludos, me presento soy gabriel y estoy diseñando un blog sobre a faucet bitcoin , si bien trabajo con referidos y dejo enlaces en cada una de las entradas de mi blog quería saber , ya que me intereso mucho este articulo, si sabeis alguna manera de implementar el mismo método de una barra lateral y enlaces , pero que en vez de cargar una lista de post cargue un iframe para colocar paginas dentro de mi blog (que en cuyo caso ocuparían el cuerpo del post) ya que en cuanto a navegación por lo visto e notado que mis visitantes prefieren no abrir pestañas nuevas.... desde ya muchas gracias y estaré pendiente de la respuesta.
    espero haberme detallado bien.
    muchas gracias.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger