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.

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://TUBLOG.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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter