Blogger. Índice por etiquetas que muestra TODAS las entradas publicadas | Oloblogger ¿Tienes un código para construir el índice de tu blog pero no carga todas las entradas? Pues bien, e...

16 de febrero de 2016

Blogger. Índice por etiquetas que muestra TODAS las entradas publicadas

¿Tienes un código para construir el índice de tu blog pero no carga todas las entradas? Pues bien, esto será lo normal si tienes más de 150 publicadas porque esa es la cifra que se puede cargar actualmente en una llamada única a un feed de Blogger.

Justo en el post anterior a este ya hablé sobre el asunto, así como que con cargar de 150 en 150 en lugar de tandas de a 500 entradas, la cosa se solucionaba en la mayoría de casos.

Sin embargo hay algunos códigos que requieren cargar todas las entradas para después ordenarlas o agruparlas de determinada manera que hacen inviable la solución anterior. Es el caso del que veremos hoy que muestra las entradas clasificadas por etiquetas.

Otros códigos publicados con anterioridad no preveían esta eventualidad pero ahora, siguiendo con el mismo algoritmo de la otra vez, conseguiremos hacer que funcione.

Índice por etiquetas para Blogger


Para instalarlo editamos nuestra plantilla y casi al final del todo y justo antes </body>, añadimos esto:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<!-- INDICE POR ETIQUETAS -->
<style>
ul.bsitemap, ul.bsitemap ul, ul.bsitemap li {width: 100%;margin: 0;padding: 0 ;list-style:none;font-family: arial;}
ul.bsitemap li a {display: block;margin: 0 0 2px 0;padding:0 10px;background: #666;color: #fff;text-decoration: none;font-size: 20x;line-height: 28px;text-transform: uppercase;}
ul.bsitemap li li a {background: transparent;color:#333;line-height:22px;}
ul.bsitemap li a:hover {background: #333;}
/* Símbolo elemento no desplegable */
ul.bsitemap li a:before {content: "\25CF\00A0";width: 28px;display: inline-block;vertical-align: top;}
/* Símbolo elemento desplegable cerrado */
ul.bsitemap li.desplegable a:before {content: "\25BA\00A0";}
/* Símbolo elemento desplegable abierto */
ul.bsitemap li.desplegable.activa a:before {content: "\25BC\00A0";}
ul.bsitemap li.desplegable ul li a:before, ul.bsitemap li.desplegable.activa ul li a:before {content: none}
ul.bsitemap ul {display: none;}
ul.bsitemap ul a {padding-left: 40px;text-transform: none;}
ul.bsitemap li li a:hover {background: transparent;text-decoration: underline;}
/* Estilo marca NUEVO (último mes) */
.bnuevo {color: red;font-style: italic;font-weight: bold;}
.bnuevo:after {content:" Nuevo";margin-left: 10px;padding: 2px 8px;color: white;background:red;font-style: italic;font-weight: bold;font-size: 80%;border-radius: 4px;}
/* Símbolo animado cargador */
.bloading {display: block;width: 80px;height: 80px;margin: 10px auto;font-size: 10px;text-align: center;border-width: 30px;border-radius: 50%;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-style: double;border-color: #666 transparent;}
.bloading:before {content: "CARGANDO";font-weight: bold;line-height: 80px;color: #990000;}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(359deg);}}
@keyframes spin {100% {transform: rotate(359deg);}}
</style>
<script type='text/javascript'>//<![CDATA[
var feed="http://cocinaconsabor.blogspot.com/feeds/posts/default",exclusion=["etiqueta1","etiqueta2","etiqueta3","etc"],cajasalida=$("#feed");$(document).ready(function(){var e=150,a=1e4,t=new Array;$.getJSON(feed+"?alt=json&callback=?").done(function(l){function s(t){var l=i*e+1,s=e;i==n-1&&(s=a-e*i);var r=feed+"?orderby=published&start-index="+l+"&max-results="+s+"&alt=json&callback=?";return $.getJSON(r)}var r=parseInt(l.feed.openSearch$totalResults.$t);r>a&&(r=a),Math.ceil(r/e)<2&&(e=r-1);var n=Math.ceil(r/e),o=[];for(i=0;i<n;i++)o.push(s(i));$.when.apply($,o).done(function(e){for(var a=[],l=0,i=0;i<arguments.length;i++)a.push(arguments[i][0]);for(i=0;i<arguments.length;i++)$.each(a[i].feed.entry||[],function(e,a){if(a.category)for(var i=0;i<a.category.length;i++){for(var s=!0,r=0;r<exclusion.length;r++)if(a.category[i].term==exclusion[r]){s=!1;break}s&&(t[l]=new Array,t[l][0]=a.category[i].term,t[l][1]=new Date(a.published.$t||Date.now()),t[l][2]=a.title.$t||"",t[l][3]=(a.link||[]).slice(-1)[0].href,l++)}else t[l]=new Array,t[l][0]="Varios",t[l][1]=new Date(a.published.$t||Date.now()),t[l][2]=a.title.$t||"",t[l][3]=(a.link||[]).slice(-1)[0].href,l++});t.sort(function(e,a){return e[0]>a[0]?1:e[0]<a[0]?-1:e[2]>a[2]?1:e[2]<a[2]?-1:0});var s="",r="",n="",o="";cajasalida.append('<ul class="bsitemap"></ul>');for(var c=0;c<t.length;c++){s=t[c][0],c>0&&(r=t[c-1][0],o="</ul></li>"),s!=r&&(n+=o+'<li><a href="javascript:void();">'+t[c][0]+"</a><ul>");var u=(new Date).getTime()-2592e6;u<=t[c][1]?clase="bnuevo":clase="bantiguo",n+='<li><a class="'+clase+'" href="'+t[c][3]+'">'+t[c][2]+"</a></li>"}n+="</ul></li>",$(".bloading").remove(),$("ul.bsitemap").append(n),$("ul.bsitemap > li:has(ul)").addClass("desplegable"),$("ul.bsitemap > li a").click(function(){var e=$(this).next();$("ul.bsitemap li").removeClass("activa"),$(this).closest("li").addClass("activa"),e.is("ul")&&e.is(":visible")&&($(this).closest("li").removeClass("activa"),e.slideUp("normal")),e.is("ul")&&!e.is(":visible")&&($("ul.bsitemap ul:visible").slideUp("normal"),e.slideDown("normal"))})})})});
//]]></script>
</b:if>

Atención a los dos líneas al principio marcadas en color.

La primera de todas es una condición para que todo ese código sólo se ejecute en páginas estáticas y así no ralentice el resto (Inicio y Entradas). Se supone que lo más indicado para incluir un índice es una página estática y por eso lo puse así.

Si tenéis ya publicada la página en concreto dónde lo vais a poner, también dispondréis de su dirección y en ese caso se puede limitar aún más la carga cambiando la condición genérica que os indiqué por otra de este tipo:

<b:if cond='data:blog.url == "DIRECCION_DE_LA_PAGINA"'>

Con respecto a la segunda línea, si ya tenéis jQuery para otro fines, directamente se puede (y se debe) eliminar del código.

Todo lo anterior se podría poner directamente sin la condición dentro de una página estática usando la pestaña HTML del editor, pero entonces debéis tener cuidado si en el futuro la editáis. En la primera ocasión que guardéis todo funcionará correctamente pero justo cuando se edita la entrada se generan algunos saltos de línea dónde no los debería haber y os tocará eliminarlos. Es fácil saltarse alguno, así que hay que ser meticulosos.

Podréis comprobar fácilmente que la primera mitad del anterior código es CSS (todo lo que figura entre las etiquetas style) y ahí es dónde podréis manipular para cambiar el aspecto del índice.


Una vez tengamos lo anterior en plantilla ya sólo resta acudir a la página dónde queremos que salga el índice y allí añadir esto otro:

<div class="bloading"></div>
<div id="feed"></div>
<script>var feed = 'http://DIRECCION_DEL_BLOG/feeds/posts/default';
var exclusion = ['etiqueta1','etiqueta2'];
var cajasalida = $('#feed');</script>

En la variable feedes dónde tenéis que poner la dirección del feed de vuestro blog. Este tiene el formato de la dirección de ejemplo que puse, así que sólo tendréis que poner la dirección de la página de inicio en lugar de DIRECCION_DEL_BLOG.

La siguiente variable configurable es la que llamé exclusion. Dentro de ella, entre apóstrofes y separadas por comas, podéis poner aquellas etiquetas que por el motivo que fuere no queréis que salgan en el índice. Podrían ser etiquetas antiguas ya no utilizadas, que sí que uséis pero sólo para fines de maquetación del blog o bien para conseguir que funcionen otros gadgets...

Por último y por si el nombre de la caja con id="feed" os diera algún problema, este se puede cambiar si además se cambia también dentro de cajasalida.


Y para comprobar cómo funciona, a continuación la demo con el índice completo de este blog (más de 800 entradas actualmente) desde Codepen, dónde como siempre podréis hacer vuestras propias pruebas. Para verlo "en real" en un blog, aquí tenéis dónde lo apliqué hace apenas dos días.

See the Pen Índice Blogger por etiquetas (desplegable) by Oloman (@oloman) on CodePen.




El CSS y el JavaScript podría ser más corto si no hubiera añadido el efecto acordeón, pero es que mostrar toda esa información absolutamente desplegada, me parece excesivo.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

99 comentarios :

  1. Esta muy funcional el indice por etiquetas para blogger. Justo te iba a preguntar para hacer algunas exclusiones de etiquetas, pero leyendo bien, ya lo has hecho. Has pensado en todo Oloman. Saludos

    ResponderEliminar
    Respuestas
    1. Intento hacer las cosas de manera que sean polivalentes. Podría haber hecho el código más corto, pero hubiera tenido menos opciones.

      Eliminar
  2. Gracias Oloman.....ahora tendré que procesarlo todo con tranquilidad, a ver qué pasa....☺☻

    Un abrazo

    ResponderEliminar
    Respuestas
    1. ¿Pues qué va a pasar? Que te va a funcionar a la primera ;)

      Eliminar
  3. Buenos días Oloman, esta pregunta esta fuera del tópico de la pregunta pero, hoy me encontré con que mi blog (http://restauranteelcolmado.blogspot.com/) no muestra la primera entrada, sin embargo, al navegar a la segunda pagina para ver más entradas si aparecen las más antiguas. ¿Será algún error en la primera?
    Mi más cordial saludo.
    Martín Omar

    ResponderEliminar
    Respuestas
    1. No sé a qué te refieres Martín. En tu blog yo veo...
      Una imagen, mil palabras. Madrid Fusión 2016 "Los sabores mágicos de Martín Omar"
      ...como última entrada y en la portada sale también.

      Eliminar
  4. Hola tengo un problema con mi pagina en las url aparece esto http://darkgritorium.blogspot.com.co/# y tendo entendido que esto es malo para el SEO, que puedo hacer me puedes ayudar por favor

    ResponderEliminar
    Respuestas
    1. Hola. Supongo que te refieres a la almohadilla #, pero no te preocupes por eso porque seguramente lo ves porque tu navegador recuerda esa URL. A mí por ejemplo no me sale. Y en cuanto a SEO... ni caso ;)

      Eliminar
  5. Hola Oloman, después de un tiempo apartada del blog, quiero retomarlo y acabo de ver tu post, me viene genial, yo tengo hecho un "apaño" para que cargue más de 500 entradas, y me va bien pero, es lento cargando, en cuanto tenga un rato voy a probar ésta opción, a ver si me acuerdo como se hurga en la plantilla
    Quería hacerte una consulta aunque no tiene nada que ver con éste post, al acceder hoy a Picasa web, donde están los álbumes de mi blog, he leído que van a cerrarlo y, me gustaría preguntarte si tú sabes a donde irán las imágenes del blog, tanto las antiguas, como las que se van añadiendo en los posts nuevos, y además, tengo hecho manualmente un índice con miniaturas de imagen, sacadas del mismo Picasa web y ya no se si seguirá funcionando en adelante
    Muchas gracias por el post
    Saludos
    Ana

    ResponderEliminar
    Respuestas
    1. Hola Ana. Por lo que sé (no mucho), cuando se cierre Picasa las imágenes pasarán a Google Fotos, por lo que no se perderán. Además es lo lógico o sería un desastre para millones de blogs.

      Lo demás no lo sé tan seguro. Puede que incluso algunos de los trucos que estemos utilizando para cambiar o redimensionar imágenes no funcionen. Depende de lo cuidadosos que sean con el cambio. Cruzaremos los dedos ;)

      Eliminar
    2. Hola de nuevo, muchas gracias por tu respuesta. No queda otra que esperar a ver lo que pasa, esperemos que no cause muchos problemasy, cruzaré yo también los dedos, así me uno a ti en ese cruce jejeje
      De momento, en Google Fotos, no veo el álbum con las imágenes de las recetas de mi blog, aunque si que me sale otro álbum, supongo que será algo temporal y, más adelante, lo podré ver o igual es que no he buscado bien, es nuevo para mi, así que tendré que ir aprendiendo a manejarlo
      Un saludo y gracias

      Eliminar
  6. Hola Oloman !!!!
    Hace poco te envíe un correo electrónico (no sé si lo has visto porque no me respondiste) sobre un problemilla con la plantilla de mi Blog. Qué ahora no importa ya que he cambiado la plantilla. Ahora tengo otro problema con la nueva y vengo a pedir ayuda de nuevo. Disculpa por ser pesada :( Mira, es una plantilla ya diseñada con varios sliders y no sé como cambiar los textos (que salen en las imágenes de los slideres) de inglés a español. Si eres tan amable y puedas entrar en mi Blog, veras en la portada que tengo instalado un slidercaroousel y lo que sale de "red more" no sé como cambiarlo. También en la portada las entradas están recortadas y sale un botón automático de "contining raiding" que tampoco sé como cambiar el texto por ej. en seguir leyendo. Si me podrías ayudar te lo agradecería. Mi blog:www.misdulcesjoyas.com.es Espero tu respuesta !!! Un saludo !!!

    ResponderEliminar
    Respuestas
    1. Hola. Ya sabes que sí lo vi, pero tengo siempre mucha correspondencia y comentarios por responder y lo voy haciendo según tengo tiempo libre y por orden de antigüedad.

      Lamento comunicarte que si no encuentras esas frases es porque seguramente forman parte de código JavaScript comprimido que he visto en la plantilla. Eso quiere decir que está codificado y por tanto es ilegible. El que construyó esa plantilla no quería que conociéramos sus "trucos".

      Eliminar
    2. Gracias Oloman !!!! Saludos !!!!

      Eliminar
  7. hola Oloman, funcionará con 1700 entradas? salen todas y ordenadas?

    ResponderEliminar
    Respuestas
    1. Sin problemas Javi. Lo probé con un blog que tenía más de 3.000 y funcionó correctamente. No sé el tope pero aguanta muchas. Lo único es que tardará más en cargar.

      Eliminar
    2. no me carga, esperé como un minuto y solo seguía dando vuelta y diciendo cargando, terminé dejando el indice que tenía que ordena de a 150 y repite

      Eliminar
    3. Prueba en el Codepen. Es la única forma de saber si es el código o algún problema con tu feed.

      Eliminar
    4. lo probé en el codepen y funcionó, me tardó un minuto justo en cargar ahí, pero en mi blog tarda mas porque se cargan las demás cosas, ¿no hay forma de reducir el tiempo? es mucho, tu indice me tardó 36 segundos, será por mi velocidad de internet o es así nomas, solo tengo 512 (medio mb)

      Eliminar
    5. No hay forma de reducir el tiempo. La lectura de feeds es lenta. Lo único es que a mí me tarda el mío 4 segundos, por lo que evidentemente, tu velocidad de acceso a Internet es la diferencia fundamental ;)

      Eliminar
  8. Amigo Oloman... Siendo las 3 AM, oficialmente, me rindo por hoy. No logro que el script pase de mostrar la animacion de "cargando". "Plantilla, editar HTML, buscar /body, pegar codigo inmediatamente antes, guardar plantilla, crear pagina nueva, boton HTML, pegar codigo, modificar direccion del blog, guardar, LISTO!"
    Pues no. A lo mejor si se necesita ser programador.. Jajajajaja.... Algo estoy pasando por alto? Algun consejo? A ver si al rato ya descansado atino a ver donde esta mi error. Gracias por todo!

    ResponderEliminar
  9. Hola Oloman! Nuevamente a las 3 am, me doy por vencido por el día de hoy. Tome un blog nuevecito, sin ninguna modificación, pegue todo el código arriba de /body, después de salvar la plantilla fui a crear una pagina nueva, pegue el otro código y modifique la dirección... Solamente aparece la animación de "cargando". En que la estoy regando? :) Saludos!!

    ResponderEliminar
    Respuestas
    1. ¿Cuál es tu blog? ¿Probaste a cambiar la dirección del blog en el Codepen de pruebas que indiqué en este post? Así comprobamos si falla el programa o el feed...

      Eliminar
  10. En el Codepen funciona perfectamente para todos los blogs. Acabo de ponerle acceso publico al blog de pruebas, la direccion del indice es:

    http://pruebadelores.blogspot.mx/p/segundo-indice.html

    Y el blog que quiero indexar es:

    http://lordwinrar.blogspot.com

    Perdon por la lata amigo, espero no quitarte mucho tiempo.

    ResponderEliminar
    Respuestas
    1. intente entrar a tu indice y no me carga, debo tener muy lenta la internet, solo tengo 512mb porque no llega mas que eso aca

      Eliminar
    2. El segundo índice no funciona, pero no dijiste que el primero sí. La cosa no la revisé para dos índices. Quizás sea eso.

      Eliminar
    3. El primero si funciona, es el de la "bomba logica", lo puse unicamente en una pagina estatica, no modifique la plantilla. Crees que le este metiendo ruido el primer indice? Ahorita lo quito. Si cambio de plantilla, a cualquier otra de blogger, ahi se borraria TODO lo que he modificado, no? Las modificaciones para SEO, widgets, etc. Empezaria desde cero, supongo. O de plano hago otro blog de pruebas para que no estorbe ninguna configuracion extraña? Como ves? Intentare mañana porque para variar ya me dieron mas de las tres de la mañana.... jejejejejeje.... Saludos!

      Eliminar
  11. Gracias por intentarlo javi29. El segundo indice nada mas no carga, ahi se queda... Saludos!

    ResponderEliminar
  12. AH! Por cierto, encontre una grave omision en el codigo del indice en que solo salen 150 entradas, pero lo corregi facilmente poniendo esto:

    a style="display:block;text-align:right;font:normal bold 12px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.oloblogger.com/2016/02/blogger-indice-etiquetas-integral.html" title="indice">Indice desarrollado en Oloblogger

    (jejejeje)

    Espero no te moleste la correccion. Ese indice lo tengo ya corriendo en mi blog, con la limitacion obvia.

    ResponderEliminar
    Respuestas
    1. Me creí que había una errata y todo... hasta que terminé de leer ;)

      Eliminar
  13. Hola Oloman! Muy bueno el post! Tengo mi blog con una plantilla que trae un sitemap por default, que despliega las entradas de todas etiquetas menos de estas dos (Yacimiento y Producción), las cuales tienen 19 y 11 entradas respectivamente. El blog apenas tiene un poco más de 70 entradas, sin embargo el sitemap no esta funcionando apropiadamente del todo.
    Este sería el enlace al sitemap: http://www.portaldelpetroleo.com/p/mapa-del-sitio_21.html

    Si pudieras sugerirme que pudiera estar pasando aquí...

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Marcelo. Tras echar un vistazo, la verdad es que no se me ocurre ninguna cosa que a priori pudiera provocar eso. Lo más seguro es que haya un fallo en el script, pero claro, para encontrarlo habría que revisarlo por completo.

      Quizás podrías preguntar en el sitio de dónde lo sacaste porque ahí sabrán de memoria cómo funciona.

      Eliminar
  14. Hola Oloman! Necesito encontrar la manera de colocar los posts de una determinada etiqueta en una página estática. ¿Hay algún código el cuál me pueda servir?

    ResponderEliminar
    Respuestas
    1. Hola. Puedes usar este otro código. Lo único es que en lugar de usar el feed general, tendrías que usar el feed de esa etiqueta concreta (http://tublog.blogspot.com/feeds/posts/default/-/nombre-de-la-etiqueta)

      Eliminar
    2. Gracias Oloman, pero creo que te has equivocado con el enlace, me lleva a este mismo post :/

      Eliminar
    3. Es correcto el enlace pero no así mi enunciado. Es que pensaba que estaba en otro post :D

      Vale lo dicho pero referido a este mismo código Artysanas Creations

      Eliminar
    4. Hola de nuevo Oloman... La verdad és que no sé muy bien como hacerlo para que salgan únicamente las entradas de una determinada etiqueta en una página >_< Copio y pego el script en el HTML de la página poniendo el feed de la etiqueta? No me sale u_u'

      Eliminar
    5. Tienes que hacer lo que se indica en esta entrada, exactamente igual, pero dónde se indica que se personalice la dirección de
      var feed = 'http://DIRECCION_DEL_BLOG/feeds/posts/default';
      ...tú deberías usar:
      var feed = 'http://DIRECCION_DEL_BLOG/feeds/posts/default/-/NOMBRE_ETIQUETA';

      Sólo eso.

      Eliminar
  15. Hola Oloman, consulta: habrá alguna manera de crear un índice por letra de abecedario, de forma que yo pueda crear una página estática para cada letra, así cuando alguien presione en la letra "A" salte el link a la pagina de dicha letra y aparezcan todas las entradas que empiecen con "A", y así con el resto del abecedario

    ResponderEliminar
    Respuestas
    1. Hola de nuevo, se ve que no has entrado aun, te cuento que como pude logré hacer una página por cada letra.
      De esta manera: agregué el gadget de etiquetas al blog, copié con el mouse todas las que empiezan con "A" y las pegué en una página estática, luego solo cambié el color de letra y fondo.
      Y lo mismo con cada letra hice una página individual.
      Además mejoré las páginas label adaptanlas para que solo salgan titulos con imágenes.
      Quedó bastante bien, puedes verlo aquí http://www.acordesdcanciones.com/
      Coloque todas las letras del abecedario arriba.

      Desventajas: No se actualiza automáticamente, cada vez que agrego un artista nuevo debo agregarlo manualmente de la misma manera.

      Y otra cosa que quizás puedas ayudarme, es que no se actualizan los números de cada etiqueta, se ve que falta poner algo de código en alguna parte. ¿Sabes que puedo agregarle para eso?

      Eliminar
    2. Hola Javi29.
      Claro está que cómo lo hiciste es un sistema, pero como comentas, es todo manual. Lo de la actualización de los números es un ejemplo. De la forma que lo hiciste no se actualizarán las cantidades porque eso forma parte del gadget de etiquetas y cuando copiaste y pegaste, lo hiciste con un dato estático que había en ese momento, no con el dinámico que va calculando el gadget.

      La única alternativa que se me ocurre es usar es que a todos los posts le añadas una etiqueta extra con la letra corresponda, de manera que todas tengan una etiqueta que sea o bien A, o B, o C.... o Z.

      Luego tendrías que usar el otro script similar a este que publiqué anteriormente y por último, utilizar como feed el de la etiqueta correspondiente.

      Sería lo mismo que contesté en la consulta anterior (14).

      Eliminar
    3. Si eso lo pensé también, pero creo que me quedo así como hice ahora, poniéndolo manualmente, igualmente subo 5 canciones por día nomas, no es tanto trabajo ir actualizando los números, tardo un poco mas cuando agrego un artista que no está en la lista, pero es copiar y pegar nomas, es lo que hay. Gracias por contestar. Está muy buena tu página, siempre ojeo los trucos blogger que tienes, saludos!

      Eliminar
  16. No soy capaz de hacerlo funcionar, he probado todo, en el Codepen funciona perfecto, le pones la dirección y ok... Pero lo incluyes en blogger y nada, probado en varios, se queda con el espere de modo indefinido. Creo que en el Codepen debe haber algo diferente, quizá un salto de línea que no se ha incluido etc...

    ResponderEliminar
    Respuestas
    1. Hola Ike ¿en qué página lo tienes puesto que le eche un vistazo?

      Eliminar
    2. Hola, no me había enterado que me contestaste... lo cierto es que como no he conseguido ponerlo en ningún blog he desistido... la verdad no lo entiendo, algunas personas han podido incluirlo y otras no...

      Eliminar
    3. Por las fechas en que escribiste quizás te pilló una avería que hubo en los feeds de Blogger. Durante esos días, evidentemente no funcionó bien este gadget.

      De todas formas te recomiendo -si quieres seguir poniéndolo- que sigas las instrucciones leyendo detenidamente y haciendo paso a paso lo que explico. Siempre compruebo todo antes de publicar, así que positivamente sé que mis códigos funcionan. Además siempre tienes una demo dónde vosotros mismos podéis comprobarlo.

      Prueba a poner la dirección de tu blog en el CodePen que enlacé y así descartas otros posibles problemas.

      Ah... y cuando quieras enterarte enseguida cuando alguien te conteste por aquí, no olvides pinchar en la casilla de verificación que sale en esta caja de comentarios algo más abajo. Viene rotulada como "Avisarme".

      Eliminar
    4. Probé en el codepen y funciona perfecto, pero en la plantilla no lo conseguí, de hecho incluso los anteriores de bomba lógica me funciono ok y copia y pega en otro blog no... creo que se crean saltos de línea que no soy capaz de encontrar. Intentaré más adelante ponerlo de nuevo, lo cierto es que estuve tantas horas que termine saturado. De más está decir que todos sabemos que los tutos son excelentes y que cualquier cosa que nos informas es exacta.

      Por otro lado... ¿Podrias decirme como puedo poner puntos suspensivos o elipsis cuando creo un corte... la plantilla simple no lo incluye, corta sin más... ¿Algun tuto o script? no he conseguido localizar nada por ningun sitio.

      Eliminar
    5. Sólo se podría algo así con JavaScript y sinceramente, no creo que merezca la pena. Yo suelo poner el corte tras un punto y así no tengo problemas.

      Eliminar
    6. Ok, gracias, sin duda no merece la pena con Java, por eso no encontré nada.

      Eliminar
  17. Me quedó genial :D http://www.vegrecetas.com/p/listado.html
    Agradezco cada uno de tus aportes, además de los servicios que haz realizado para mi (oloblogger low cost); gracias a tu ayuda he aprendido mucho y Blogger es hoy en día la plataforma que mejor llevo. Un abrazo!

    ResponderEliminar
    Respuestas
    1. ¿Cómo lo has hecho, con los pasos que nos dice aquí el maestro, con este mismo código o con otra fórmula?

      Eliminar
    2. Ike, por lo que vi en el enlace, con este mismo código.

      Ah, Ignacio. Y muchas gracias por hacerme saber eso. Blogger es una buena plataforma. Sólo hay que saber cómo exprimirla ;)

      Eliminar
  18. Hola, Oloman: tras un finde de múltiples intentos, no consigo que me funcione, y la verdad es que lo siento, ya que es lo que estaba buscando para mostrar un índice con solo ciertas etiquetas.
    Debe de ser problema del feed, porque en el codepen tampoco rula.
    Se queda cargando sin fin. He probado con diferentes blogs, y con la mayoría ha pasado lo mismo.
    El índice de la bomba lógica me funciona sin problemas. ¿Alguna pista para solucionarlo?
    Gracias por todos tus trucos y ayudas.

    ResponderEliminar
    Respuestas
    1. ¿Puedes probar ahora? Hubo un problema con los feeds durante mayo.

      Eliminar
    2. Pues el problema debe de ser otro. Al igual que IKE yo también he probado en el codepen con algunas direcciones al azar, y algunas funcionan pero otras no. Si se te ocurre algo para probar, basta que contestes al hilo de IKE que me sirve igual. En cualquier caso, gracias por tus aportaciones.

      Eliminar
  19. Hola Oloman, intente de nuevo incluir este índice, pero sin éxito... pero he descubierto algo que debe ser la raíz del problema. Todo incluido y puesta la dirección en mi blog, no funcionó, pero por curiosidad he puesto otras, varias mias, sin funcionar ninguna, la tuya QUE SI HA FUNCIONADO la de Ignacio Garnica que también funciona, y otros muchos blogs que busque al azar y que en unos casos si y otros no... en definitiva, creo que algún problema, desconozco cual lo impide, pero matiza que las direcciones puestas en el codepen, todas las que no funcionaron SÍ LO HACEN en el codepen. ¿Alguna idea, o lo dejamos como un total misterio!

    ResponderEliminar
  20. Muy buen aporte. Sin dudarlo lo iba a implantar en mi blog, pero desgraciadamente estoy como Ike y no he conseguido que termine de cargarse ni en una página de mi sitio ni en el codepen con mi dirección. El caso es que el de musicae se me carga al momento y tiene muchísimas mas entradas. No sé por qué me tardará tanto, así que finalmente no lo implantaré porque si a otro le tarda tanto como a mí, puede que piense que tengo una página rota o algo así.

    ResponderEliminar
    Respuestas
    1. Klizoain, Ike y Atlético Ogíjares ¿podéis probar ahora? Detecté un fallo cuando se tenían pocas entradas publicadas y este al menos era el caso de los dos que cité en último lugar. Por favor, decidme si ahora os funciona.

      Eliminar
    2. He conseguido que funcione en el blog de pruebas, en este puse la direccion donde tengo escasas publicaciones y ahora si funciona, NO donde tengo algo menos de 1000 entradas que sigue quedándose "cargando" de modo eterno... no obstante has conseguido resolver, creo, que algunas personas puedan implementarlo.

      Eliminar
    3. Probé el primero tuyo que vi ¿en cuál sigues teniendo problemas?

      Eliminar
    4. Ok, te indico dirección, aunque ahora no lo tengo implementado, inclui otro que aunque no tan vistoso si me funciona, pero como digo, el tuyo es más elegante.

      Te incluyo la dirección donde quisiera ponerlo, sin ánimo de hacer publicidad alguna y con la posibilidad de borrarla si opinas que es conveniente. Esa dirección tiene cientos de post...

      http://www.somossindicalista.es

      Eliminar
    5. Me alegra comunicarte que con esa dirección funciona perfectamente :)

      Ahora mismo he dejado el Codepen con ella grabado.

      Eliminar
    6. Un misterio... de hecho poniendo la dirección en el codepen siempre me ha funcionado, el problema viene cuando lo implemento en la plantilla, que no funciona, quizá por no llevarse bien con algún otro código lo desconozco...

      Te dejo la pagina donde lo he dejado puesto, el blog de pruebas, por si puedes echarle un vistazo y quizá encontrar algo que hago mal...
      http://pruebasike.blogspot.com.es/p/blog-page_29.html

      Eliminar
    7. A mí me sucede lo mismo, ahora me funciona en el codepen, pero no en el blog.

      Eliminar
    8. Estuve arreglando el código para que funcionara incluso en blogs con pocas publicaciones (ese era el problema), pero una vez que funcionan todos en CodePen, deberían funcionar también en vuestros blogs si lo hacéis todo exactamente igual que explico en esta entrada.

      Pero como dice Ike, pudiera ser que algún otro JavaScript que tuviérais en plantilla interfiriera. Eso es imprevisible para mí.

      Eliminar
    9. Lo revisaré, a ver si lo consigo. El anterior comentario lo he hecho sin darme cuenta que estaba logeado con otra cuenta, por eso lo he borrado, por no confundir. Gracias.

      Eliminar
  21. Otra duda, por si quizá finalmente podemos implementarlo todos, en mi plantilla, la RWD en la cual además incluí lo de los vídeos automáticos RWD (una pasada como quedan) el texto de este Gadget, el de las entradas, se me queda centrado automaticamente, asi como las fechas que se van al centro... entiendo que es por que habra que poner algún "important" en alguna parte... ¿Alguna idea?

    ResponderEliminar
    Respuestas
    1. Eso es porque hereda la alineación de la caja padre (en cada blog será una distinta según la plantilla).

      Para forzar a la izquierda, simplemente añade al primer selector un text-align: left;

      ul.bsitemap, ul.bsitemap ul, ul.bsitemap li { EN ESTA PARTE...

      Eliminar
    2. Ok gracias... la verdad que este no ningún otro je conseguido implementar, el único que si me funciona en todos los blogs es uno bastante antiguo que sin embargo me da todas las entradas

      Eliminar
  22. Algo falta. No se que es... pero..
    He incluido el codigo en la plantilla. He generado la pag, para el indice.
    He probado con mi blog en Codepen y funciona.
    ¿Donde está el error?
    :(

    ResponderEliminar
    Respuestas
    1. No hay manera de que yo pueda saberlo desde aquí Fernando. Sólo te puedo decir que repases bien el proceso de pasar este código al blog. Bueno, y quizás que a lo mejor tienes dos librerías jQuery cargadas y eso podría generarte algún conflicto.

      Eliminar
  23. He intentado generar varios indices, pero solo va una. ¿Existe alguan forma de generar varias, sin necesidad de copy and paste y cambio de nombre de alguan variable.?

    ResponderEliminar
    Respuestas
    1. ¿Varios índices? No entiendo qué quieres hacer Teleri

      Eliminar
  24. Buenas tardes, he intentado poner el índice pero se queda cargando y no responde. He de decir que no se nada de estos temas. Te doy la dirección de mi blog, en la página donde tendría que salir el índice por si puedes mirarlo y decirme que he hecho mal.

    Muchas gracias

    http://cocinaconsabor.blogspot.com.es/p/index.html

    ResponderEliminar
    Respuestas
    1. Hola Carme

      He vuelto a actualizar el código ¿podrías probar ahora con este nuevo?
      Lo he probado en este blog de pruebas mío y funciona perfectamente. A ver si hay suerte.

      Eliminar
    2. Ahora si! Muchísimas gracias, por fin salen todas las recetas :)

      He hecho algún cambio de color, a ver si me sale una combinación que quede bien. También miraré si se pueden ver las etiquetas en mayúscula o en negrita. Bueno, poco a poco...

      Mil gracias Oloman!!!

      Eliminar
    3. De nada. Vamos a ver si solucionamos también el asunto para los otros que tienen problemas.

      Eliminar
  25. Hola.
    A mí también se me queda cargando. En el codepen funciona, pero en mi página no. Lo he probado mil veces y en distintas páginas... pero no hay manera. Actualmente lo he dejado en una página en la que tenía otra tabla de contenido, pero ya te digo que lo he probado con páginas nuevas y tampoco...
    http://www.auladeelena.com/p/contenido-2.html

    ResponderEliminar
    Respuestas
    1. Echa un vistazo justo arriba, Elena ;)

      Eliminar
    2. Pues tampoco ha habido suerte, algo habré hecho mal. De todas formas, he hecho el índice a mano. Es más rollo, pero por otro lado, 100% personalizarle y siempre puedo agrupar los posts por temáticas, que no siempre coinciden con las etiquetas (o un post tiene muchas etiquetas y sale demasiadas veces). Eso sí, cada vez que publique un post, tengo que introducirlo en el índice.
      En cualquier caso, gracias por tu ayuda. ¡Tienes un blog fantástico que sirve de ayuda a muchos!
      Un saludo.

      Eliminar
    3. Elena, ahora que Carme lo tiene arreglado he probado con tu feed y también funciona: http://casi-web.blogspot.com/p/prueba-indice.html. Simplemente repasa lo que explico y repite los pasos. Seguro que te sale.

      Sobre la personalización, este gadget también lo es, ya que si cambias los valores del CSS podrás darle el aspecto que quieras.

      Sobre las etiquetas no hay más solución que usarlas de una manera apropiada.

      Y en cualquier caso, gracias a tí por hacerme saber que el blog te resulta útil ;)

      Eliminar
  26. Hola, muchísimas gracias por tu artículo, está muy bien explicado, pero desgraciadamente se me queda atascado "cargando"... ¿podrías darnos alguna idea de cómo solucionar este problema? veo que somos varias en el mismo atolladero, mil gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Contestada con lo de Carme, un poco más arriba María. Suerte

      Eliminar
  27. super confundida sigo sin saber como hacer para poder ver todas las publicaciones en una etiqueta =(

    ResponderEliminar
  28. Si quieres mostrar todas las publicaciones de una misma etiqueta en una página, a modo de relación, lo mejor es que uses el código de este otro post, pero en lugar de usar la dirección normal de tu feed, deberías usar este formato:
    http://DIRECCION_BLOG/feeds/posts/default/-/ETIQUETA

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

    ResponderEliminar
  30. Muchísimas gracias, me traía loca el indice, todo el mundo me preguntaba..
    Saludos

    ResponderEliminar
    Respuestas
    1. Pues perfecto si esto te solucionó el problema ;)
      Un saludo

      Eliminar
  31. Excelente blog. Entré hace 15 minutos y ya las cosas que vi me sirvieron más que todas las demás búsquedas que venía haciendo. Saludos.

    ResponderEliminar
  32. Hola Oloman.
    Me gustaría saber si es posible que solo muestre las etiquetas que yo quiera.
    Ya he leído que se pueden hacer exclusiones, pero con todas las etiquetas que tengo me llevaría una eternidad, mientras que al hacerlo "al reves" elegir las que quiero que muestre, tan solo tendría que poner unas 20 apróximadamente, por lo que lo tendría en un momento.

    Muchas gracias por ti atención, como siempre.

    ResponderEliminar
    Respuestas
    1. Hola. Creo que va a ser fácil conseguir eso.

      En la variable exclusion, relaciona las etiquetas que SÍ quieres que salgan.

      Luego, donde ves var incluir = false; pon var incluir = true; y un poco más abajo, dónde ves var incluir = true; cábmialo por var incluir = false;

      Dime si funciona ;)

      Eliminar
  33. ¿Se puede hacer dos indices de diferentes etiquetas en paginas estáticas? Porque yo hasta hace nada me funcionaban y han dejado de funcionar.

    ResponderEliminar
    Respuestas
    1. Hola. Para eso este script no es lo más práctico. Puedes probar con este otro, pero tendrás que modificar una parte del código.
      En concreto, dónde encuentres esto:
      var feed=web+'/feeds/posts/default';

      ...pon en su lugar esto otro:
      var feed=web+'/feeds/posts/default/-/NOMBRE_ETIQUETA';

      Eliminar
  34. Tras tus últimas actualizaciones del código tengo que decirte que funciona a la perfección, la exclusión de etiquetas también. Muchas gracias por tu ayuda!

    ResponderEliminar
    Respuestas
    1. Me alegro de que ya os vaya funcionando a todos. Gracias Klizoain

      Eliminar
  35. Respuestas
    1. Es un servicio dónde puedes probar códigos. Tiene tres partes: HTML, CSS y JavaScript. Los resultados de los cambios que hagas en cualquiera de ellos refrescan el Resultado y así puedes comprobar qué sucede inmediatamente.

      Eliminar
  36. Gracias Oloman, funcionando el código del tutorial, solo hay que seguir los pasos y no desviarse. Gracias tb por tu paciencia.

    ResponderEliminar