-
▼
2009
(117)
-
►
diciembre
(10)
- Crear contenido exclusivo para suscriptores
- Felices Fiestas
- Tynt. Para controlar la copia de tus contenidos
- Una galería con orden aleatorio
- Simular una venta modal
- Technorati sólo para angloparlantes
- Pestaña vertical para usos múltiples
- Rotar botones o banners de forma aleatoria
- Bloctoc. Script para hacer un índice.
- En breve. Problemas Blogger.
-
▼
noviembre
(11)
- Blogumus definitivo
- Cambiar estilo según el tipo de página
- Menús, botones, banners y textos con flash
- Menú de pestañas
- Indice por categorías (tipo sitemap)
- Indice por categorías
- Entradas relacionadas con miniaturas
- Encontrar imágenes licenciadas CC en Flickr
- Modificar la anchura en los enlaces de navegación
- Una ventana (bloque) emergente con un click
- Botón para ofrecer suscripción por correo
-
►
octubre
(12)
- IconTexto. Más iconos gratuitos.
- Modificaciones al sistema de sumarios 2
- Modificaciones al sistema de sumarios
- Gracias
- Las no-claves para tener un buen blog
- Aviso fijo al final de cada entrada.
- Probando fuentes
- Splash screen... o algo parecido
- Plantilla. Oldbook
- Barra de herramientas Wibiya
- Proteger un contenido... pero poco
- Novedades legales y de cortesía.
-
►
septiembre
(15)
- Splush. Gadget para entradas recientes.
- Feed. Qué es y para qué sirve.
- A vueltas con los avatares y con la exportación
- Decora tu blog... en menos de un minuto
- Personalizar avatares comentaristas
- Avatar en comentarios. Restaurar artilugio.
- 20blogs.Tras la tempestad...
- Plantilla Bloggerbloc
- Para que la nube de etiquetas parezca más una nube...
- Etiquetas perdidas Blogger. Cómo funcionan.
- Luz de Gas RadioBlog
- Premios Bitacoras 2009
- Linkwithin. Entradas relacionadas con imagen.
- Imágenes rotativas
- Construye tu propia tira cómica online
-
►
diciembre
(10)
-
►
2008
(110)
- ► septiembre (14)
-
►
2007
(57)
- ► septiembre (5)
Indice por categorías
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).
<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:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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='"javascript:showToc(\"" + data:label.name + "\");"' expr:title='"Ver todos los posts etiquetados como " + 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&start-index=501&max-results=1000&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 ;)
Entradas que también podrían interesarte:
































11 comentarios:
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
Muchas gracias amigo, ves como tienes talento. Espero que algun dia podamos montar algun proyecto ;)
Saludos.
ProyectoZX
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...
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.
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 ;)
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.
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.
Fútbol es Pasión
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!
Feuer Stolzes, en h2.date-header tienes que cambiar
text-transform:uppercase;
por
text-transform:none;
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