Cargando...
Menu Ver sumario
Blogger para torpes y para no tanto.



Contadores
Image and video hosting by TinyPic


Indice por categorías

16/11/2009 11

Hace tiempo, Beatiful Beta nos obsequió con un script que permitía mostrar todas nuestras entradas en una tabla, a modo de índice. Un ejemplo de cómo funciona lo teneis actualmente en este mismo blog, pinchando en la etiqueta correspondiente de la parte superior.

Tras unas pequeñas modificaciones, hemos logrado que ese mismo script sirva para mostrar un índice pero por categorías. La cosa funciona así: pinchando en una etiqueta de nuestro gadget de idems, se verá en la parte superior del blog una tabla con todas las entradas de esa etiqueta por orden alfabético. Posteriormente podemos ir seleccionando otra etiqueta para ver su contenido o cerrar la tabla para seguir haciendo otra cosa. Los títulos de la tabla permiten ordenar las entradas mostradas por fecha o, como se ha dicho, alfabéticamente. Una demo de cómo quedaría el sistema.



¿Cómo hacer esto? En cinco minutos siguiendo estos pasos...

1. Creamos en nuestra barra lateral un nuevo gadget Etiquetas. Le ponemos de título Indice por categorías y por el momento lo dejamos tipo Lista. Da igual si ya tenemos uno. Si es así, este pasará a tener la ID Label2.

2. Ahora vamos a Edición HTML y seleccionamos Expandir plantillas de artilugios. Como no queremos depender de servicios externos, que cualquier día nos dejan colgados, copiamos el siguiente código [+/-] delante del </head> Es largo, pero sólo se trata de copiar y pegar. Tranqui. He aprovechado para traducir los mensajes y que salgan en cristiano (...no Ronaldo).

<!-- Estilo indice categorías -->
<style type='text/css'>
#toc {border: 0px solid #990000; background:none; padding: 5px; width:400px; margin:9px auto; text-align:center;}
.toc-header-col1, .toc-header-col2 { background:#ffffff; color:#000000; width:300px; text-align:left; font-size:12px;}
.toc-header-col2 { width:100px;}
.toc-header-col1 a, .toc-header-col1 a:visited, .toc-header-col2 a, .toc-header-col2 a:visited { text-decoration:none; color:#000000; background:none !important;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:underline; color:#000000; background:none !important;}
.toc-entry-col1, .toc-entry-col2 { padding-left: 5px; text-align:left; color:#333333; font-size:12px; background:#E2E2BB;}
.toc-entry-col1 a, .toc-entry-col2 a { background:none !important; color:#990000 !important;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover { text-decoration:underline !important;}
.toc-entry-col1 a:visited, .toc-entry-col2 a:visited { color:#666666 !important; padding-left: 10px; background:none !important;}
</style>

<!-- Script indice categorías -->
<script type='text/javascript'>
//<![CDATA[
// ---------------------------------------------------
// BLOGTOC
// ---------------------------------------------------
// Author: Beautiful Beta
// Url: http://beautifulbeta.blogspot.com
// Adaptación para etiquetas: Oloblogger
// ---------------------------------------------------
var postTitle = new Array(); // array de títulos
var postUrl = new Array(); // array de url's
var postDate = new Array(); // array de datos de publicación
var postLabels = new Array(); // array de etiquetas

var sortBy = "titleasc"; // valor por defecto para ordenar
var tocLoaded = false; // true una vez que el feed ha sido leído
var postFilter = ""; // valor por defecto del filtro

function loadtoc(json) {
function getPostData() {
// Esta función lee todos los datos de los posts y los guarda en una matriz
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
for (var i = 0; i < numEntries; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postdate = entry.published.$t.substring(0,10);
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\')" title="Click para seleccionar todos los posts con etiqueta \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(';');
if (l != -1) { pll = pll.substring(0,l); }
}
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postLabels.push(pll);
}
}
} // Fin getPostData

numEntries = json.feed.entry.length;
getPostData();
sortPosts(sortBy);
tocLoaded = true;
}

// Funciones filtro y orden
function filterPosts(filter) {
scroll(0,0);
postFilter = "";
displayToc(postFilter);
}
function allPosts() {
postFilter = '';
displayToc(postFilter);
}
function sortPosts(sortBy) {
function swapPosts(x,y) {
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
}

for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
}

// Mostrando la tabla

function displayToc(filter) {
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'TITULO DEL POST';
var tocTool1 = 'Click para ordenar por título';
var tocHead2 = 'FECHA';
var tocTool2 = 'Click para ordenar por fecha';
if (sortBy == "titleasc") {
tocTool1 += ' (Descendente)';
tocTool2 += ' (Más nuevo primero)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (Ascendente)';
tocTool2 += ' (Más nuevo primero)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (Ascendente)';
tocTool2 += ' (Más nuevo primero)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (Ascendente)';
tocTool2 += ' (Más viejo primero)';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">Mostrando todos los ' + postTitle.length + ' posts<br/></span>'; }
else {
var tocNote = '<span class="toc-note">Mostrando ' + numDisplayed + ' posts con etiqueta \'';
tocNote += postFilter + '\' de '+ postTitle.length + ' posts en total<br/></span>';
}
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = tocNote + tocTable;
}

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);
}

// Función principal y enlace para plegar
function showToc(etiqueta) {
postFilter = etiqueta;
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById('toclink');
toclink.innerHTML = '<a href="javascript:hideToc();">» Ocultar tabla</a><br/><br/>';
}
else { alert("Espere. Todavía cargando su feed"); }
}

function hideToc() {
var toclink = document.getElementById('toclink');
toclink.innerHTML = '';
var tocdiv = document.getElementById('toc');
tocdiv.innerHTML = '';
}
//]]>
</script>

3. Bajamos en el código de nuestra plantilla buscando el gadget creado en primer lugar. Podemos hacerlo mediante el título (Indice - categorías) o por su ID (label1, label2...). Una vez localizado, tendremos algo así:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
<a expr:dir='data:blog.languageDirection' expr:href='&quot;javascript:showToc(\&quot;&quot; + data:label.name + &quot;\&quot;);&quot;' expr:title='&quot;Ver todos los posts etiquetados como &quot; + data:label.name'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>;

Ahí podeis ver insertado en verde lo que hay que incorporar, en lugar precisamente de la línea que se muestra tachada. Una vez hecho, se salvan los cambios con Guardar.

4. Ya sólo nos falta generar una llamada al script pasando por nuestro feed, el DIV de la tabla propiamente dicha (llamado TOC) y un enlace para poderla cerrar cuando estorbe. Eso es añadiendo un nuevo gadget HTML/JavaScript con el siguiente código:

<script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=500&amp;callback=loadtoc"></script>
<script src="http://NOMBRE_BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=1000&amp;callback=loadtoc"></script>
<div id="toclink"></div>
<table align="center"><tbody><tr style="margin: 0px auto; text-align: center;"><td><div id="toc"></div></td></tr></tbody></table>


Antes de guardar, cambiamos NOMBRE_BLOG por el propio. La parte en gris es opcional y obligatoria sólo para blogs con más de 500 entradas y si se quieren mostrar todas. Si se tienen más de 1000, habrá que añadir otra línea con la misma estructura pero partiendo del último número de la anterior: 1001-1500, 1501-2000, etc. Aunque quizás lo mejor si tienes tantas entradas es que instales este último gadget no como idem sino insertando el código directamente en una entrada (en este caso, todo seguido, sin saltos de línea). De lo contrario podría demorar mucho la carga de la página ya que la primera tarea que realiza el script es precisamente cargar todos los datos de todas las entradas.

Guardamos y ya sólo nos queda trasladar el gadget justo encima de las entradas que parece el sitio más adecuado para mostrar la tabla. Si lo quereis en otro sitio, pues dónde os parezca.

Como cada cual tiene unos colores y unos anchos de columnas distintos, desde la parte Estilo índice categorías, podeis configurar esos atributos modificándolos al gusto.

Reto dedicado a ProyectoZX ;)

Si te gustó esta entrada, quizás quieras promocionarla: votar Votar en Wikio

11 comentarios:

Renzo

genial, una forma mas practica, simple y menos pesada de usar las etiquetas :) (Y)

Oloman, nose si estas familiarizado con CUFON! (usar cualquier tipo de fuente para blog)
podrias hacer un post sobre eso? yo lo estoy usando pero tengo algunas dudas sobre ese tema...
jejeje

Anónimo

Muchas gracias amigo, ves como tienes talento. Espero que algun dia podamos montar algun proyecto ;)

Saludos.

ProyectoZX

Eduardo Sanguino

Hola, muy bueno este post, ya que andaba buscando este truco, pero dime que difencia hay con el truco anterior que públicaste con título indice automático.

Saludos...

Oloman

Renzo: Conocía SiFR, pero no CUFON ¿es más rápido en la sustitución que el primero? Nunca me han interesado estos sistemas precisamente por el tiempo que tardan en hacer su trabajo, pero si me dices que funciona bien, le hecho un vistazo más a fondo (porque someramente ya lo he hecho).

ProyectoZX: Me alegro de que sea lo que necesitabas

Eduardo Sanguino: Es el mismo script pero adaptado. En este caso no muestra TODOS los posts, sino sólo los de determinada categoría (etiqueta). Además, utiliza el propio gadget de etiquetas de Blogger como enlace para ello. Dependiendo de la idea que cada uno tiene en la cabeza, esto tendrá más o menos utilidad.

Renzo

claro que es mejor q SiFR oloman, y te lo platico porque es el mejor, tienes que hecharle un ojo

si no me crees mira en mi blog de pruebas la font que uso para los titulos,

http://pruebafechas1.blogspot.com

no carga ni en un segundo es lo mejor por eso te comentaba ojala agas un post sobre eso ;)

José GDF

Tenía en mente hacer algo parecido con ese mismo script, porque intenté también hacerlo funcionar por etiquetas sueltas, pero te has salido por la elegancia con la que lo has hecho.

Me lo anoto para "la reforma" del blog.

Oloman

Renzo: Para hacer un post, primero tendré que aprender yo cómo funciona ;)

José GDF: El resultado está bien, pero el problema sigue siendo el de siempre: Tarda mucho si hay muchas entradas publicadas en el blog.

Santi

Fútbol es Pasión

Feuer Stolzes

interesante pronto lo aplico a mi blog ^^!
---
Oloman solicito tu ayuda jeje, como puedo quitarle las mayusculas al texto "COMENTARIOS" - dejandolo asi "Comentarios" - se encuentra al lado de la fecha.

Saludos y Gracias!

Oloman

Feuer Stolzes, en h2.date-header tienes que cambiar
text-transform:uppercase;
por
text-transform:none;

Eduardo Sanguino

Hola, nuevamente por tu blog, por sierto muy bueno, quiero preguntarte que puedo hacer para que al entrar en la dirección de mi blog en el buscador de google, salga lo que sale en tu blog por ejemplo: Para mesclar web IFRAME, Banco de imágenes, etcétera. Para dejartelo más claro a lo que me refiero te adjunto una imagen http://www.fileden.com/files/2009/7/2/2496611/005006.JPG me refiero a lo que está encerrado con rojo.

Bueno, espero me puedas ayudar, saludo y gracias.

PUBLICAR UN COMENTARIO


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
Para recibir Oloblogger en tu correo, introduce aquí tu dirección

Blogalaxia Blogesfera Bitacoras.com Twingly Ayuda Blogs Alianzo Wikio Ranking de Buzzear (ES) TOP 100 WEBLOGS Unión Bloggers Hispanos Más tráfico para tu blog Mi blog está incluido en Pixel a Pixel Directorio de blogs Blogissimo Personal Blogs - Blog Top Sites Blogging Blogs - BlogCatalog Blog Directory Top Internet blogs Mi Ping en TotalPing.com Directorio Blogger

Grupo Uniblog

Ir Arriba