Indice por categorías | Oloblogger Hace tiempo, Beatiful Beta nos obsequió con un script que permitía mostrar todas nuestras entradas en una tabla, a modo de índice. Un ejemp...

16 de noviembre de 2009

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).

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

¿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

43 comentarios :

  1. 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

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

    Saludos.

    ProyectoZX

    ResponderEliminar
  3. 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...

    ResponderEliminar
  4. 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.

    ResponderEliminar
  5. 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 ;)

    ResponderEliminar
  6. 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.

    ResponderEliminar
  7. 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.

    ResponderEliminar
  8. 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!

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

    ResponderEliminar
  10. 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.

    ResponderEliminar
  11. queria saber si puedes seleccional solo una etiqueta o va a apracer en todas...
    Muchas gracias!

    ResponderEliminar
  12. Hola Petrópolis

    El primer código es el bucle que llevan (casi) todas las plantillas Blogger para ir generando las etiquetas. Se me ocurre que se podría poner delante de la parte verde un condicional, para que sólo se ejecute esa parte cuando estemos con la etiqueta que tú quieres. Por ejemplo:

    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>

    <b:if cond='data:label.name == ETIQUETA_ELEGIDA'>
    <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>

    Si no es la etiqueta en cuestión, pues no se "imprimiría" nada en la pantalla.

    ResponderEliminar
  13. gracias oloman!!! pero tengo otra duda porque resulta que lo que queria hacer es poner una espacie de boton o enlace en una entrada para activar el desplagado del indice??

    ResponderEliminar
  14. Hazlo todo como se explica aquí salvo los puntos 1 y 3. Todo lo demás igual, pero en lugar de esos dos, añades un gadget tipo HTML/JavaScript como este:

    <a href="javascript:showToc('ETIQUETA');" title="Ver todos los posts etiquetados como Etiqueta">ETIQUETA</a>

    Luego sólo tienes que cambiar la palabra ETIQUETA por la categoría que quieras desplegar.

    ResponderEliminar
  15. Gracias lo e podido aplicar exitosamente:)
    Pero a surgido otro problema, El indice que mostraba todas las entradas a dejado de funcionar corrrectamente es decir se despliega y todo normalmente pero no mustra las entradas. Hay alguna manera para que muestre todas las entradas??

    Desde ya gracias por todo!!:)

    ResponderEliminar
  16. ¿Dónde puedo ver eso que me dices para entenderlo?

    ResponderEliminar
  17. Aqui te dejo el link del indice que funciona mal que deveria mostrar todas las entradas

    http://pintagraff.blogspot.com/2009/10/indice.html

    Y este es uno de los indices que funciona correctamente que muestra un indice segun la categoria

    http://pintagraff.blogspot.com/2009/11/tecmicas.html

    Lo que queria decir en el comentario anterior es que si es posible que los dos tipos de indice sigan funcionando normalmente, porque desde la instalcion del indice por categoria, a dejado de funcionar el indice automatico que mostraba todas las entradas??

    ResponderEliminar
  18. Te quedaron muy chulos los botones Bilosony2, pero me temo que no puedes usar los dos sistemas a la vez. El problema es que este y el del índice general están basados en el mismo script pero son distintos. Fallo mío, porque por dejarlo como el otro, uso en ambos el mismo nombre de función y las mismas variables. Habría que cambiar esas dos cosas en uno de los dos para que funcionara y eso es algo farragoso.

    Si quieres puedes solucionarlo usando para el índice general este otro script que te muestra un índice no por fechas, sino por categorías y como en ese caso se usa otro código muy distinto, pues si resultan compatibles.

    ResponderEliminar
  19. y...bueno no se puede tener todo en la vida jeje Por eso instale el indice tipo site map no es lo mismo pero para salir de la mala situacion es bueno:)
    Porcierto me acordava nose si recuerdas que en un comentario te preguntaba como hacer un Tabber con pestañas???Como el de esta plantilla http://dark-orange-bloggets.blogspot.com/ alfin y alcabo no encotre blog de ayuda que me ayude con esto asi que decidi meter mano hasta que me saliera algo parecido y lo logre con este Sprip "jQuery Call" son dos ,uno para darle efecto deslizante y el otro para las pestañas y la instalacion es mas que sencilla igual que la personalizacion de la apariensia puedes ver como quedo el mio en mi blog PintaGraff...

    Si quieres mas info sobre esto asmelo saber..

    Suerte!! y gracias por la ayuda!!!

    ResponderEliminar
  20. Gracias por el aviso Bilosony2. Eso de las pestañas es una de las cosas que tengo en mi lista de tareas pero que siempre voy aplazando. Cualquier día me pongo...

    ResponderEliminar
  21. estoy algo perdida alguien me puede ayudar

    ResponderEliminar
  22. Cuando soluciones lo de tus troyanos... Mientras echa un vistazo a la entrada si en verdad tienes problemas.

    ResponderEliminar
  23. Muy buenas, se podria hacer que al hacer click en la etiqueta se abriese una pagina nueva y cargue en esa pagina la tabla? o que al hacer click en cualquier etiqueta suba al top de la pagina? muchas gracias

    ResponderEliminar
  24. FilmVille ¿viste la demo? La segunda cosa que preguntas es precisamene lo que hace este script: abre una ventana en el propio blog con la categoría seleccionada ¿o es otra cosa a lo que te refieres?

    ResponderEliminar
  25. Gracias por responder tan rápido, me refiero a que si se podría hacer algo para que la tabla no se muestre en la pagina principal al hacer click en la etiqueta, si no que abra una pagina nueva cargue la tabla en esa pagina

    ResponderEliminar
  26. FilmVille, creo que lo que tú quieres es esto o quizás esto otro.

    Si es así, te recomiendo el primero.

    ResponderEliminar
  27. Hola!! oloman!! tengo una duda. Como se podria hacer para que el indice ya aparesca desplegado?

    Noto que los tamaños y las fuentes de la pagina se an desbordado, espero que sea algun cambio en el diseño de tu blog y no un error. :S

    Suerte!!!!

    ResponderEliminar
  28. Bilosony2, esta entrada explica el procedimiento "difícil". Mostrar el índice por categorías desplegado es más fácil
    http://oloblogger.blogspot.com/2009/11/indice-por-categorias-tipo-sitemap.html

    Y sobre el desbordado ¿quieres decir que sale algo mal o simplemente que lo ves distinto? Lo cierto es que he hecho más grande la fuente para no tener problemas con mi presbicia :)

    ResponderEliminar
  29. A!!! era eso!! se me hacia raro que se te aya cambiado por error la fuente de las letras jaja
    Investigue un poco mas a fondo esto y Jmiur me termino dando la solucion te cuento lo que me dijo para que aparesca desplegado:

    "En lugar de usar un enlace para llamar a la función, deberás colocar al final de todo algo así:

    script> showToc(); </script

    Luego pude hacer todo tal cual lo pensaba hacer :D
    Te cuento queria mantenerlo desplegado para poderlo usar como un iframe y utilizarlo onda como lo que explica Jmiur en estos post:

    http://vagabundia.blogspot.com/2010/08/blogger-ultra-super-minimizado-2-parte.html

    http://vagabundia.blogspot.com/2010/08/blogger-ultra-super-minimizado-ultima.html

    Y haci evitar la pesades del script ya que solo lo uso para un par de entradas :D

    Un Saludo!! y Suerte!!!

    ResponderEliminar
  30. Ok. Te quedó muy bien con el estilo que le diste, por cierto :)

    ResponderEliminar
  31. Hola Oloman.
    Me llamo Paco y tengo un problema de parvulario.Para ti sera una chorrada pero yo me estoy volviendo loco y no acierto a pillar el fallo.Ante todo si quieres ayudarme tienes que tener un poco de paciencia,ya que tengo 53 años y ni idea de programacion.Yo voy pillando de aqui y de alla y hago lo que puedo.Si no tienes tiempo lo entenderé perfectamente ya que todos vamos "de bolid" que decimos en Valencia,o sea estresaos.

    Se trata de lo siguiente.Mi mujer y yo nos entretenemos en nuestro blog de cocina,(Puros aficionados que hacemos lo que podemos)"La Cocina de Mesilda"(mesildacuinablogspot.com).
    El problema lo tengo en el indice que me he creado,si entras a "Mis recetas" lo veras enseguida:Cada vez que hago una entrada para un nuevo elemento unas veces se me queda el texto en azul,otras en letra pequeña...
    Yo siempre sigo los mismos parametros:
    - Selecciono fuente,tamaño y color
    - Escribo el texto
    - Seleciono el texto y le asigno el enlace correspondiente.
    Unas veces sale bien y otras... ya lo ves.
    Si puedes decirme algo te lo agradeceria.
    Gracias y disculpa por el "rollazo".
    Paco

    ResponderEliminar
  32. No tienes excusas que valgan Paco, porque no tienes muchos más años que yo :D Esto es sólo cuestión de ponerse y equivocarse muuuuchas veces.

    Sobre lo que preguntas, yo no veo nada raro. Supongo que preguntas por el propio índice y no por las correspondientes entradas. Si no es eso, tendrías que especificar más.

    Si alguna vez te sale un enlace distinto a otro, es posible que sea porque los navegadores distinguen los enlaces ya visitados, asignándoles un aspecto distinto.

    Pero eso sólo es visible para el usuario que lo haya hecho. Es decir, si tú visitas uno de esos enlaces, la siguiente vez que lo veas te aparecerá en otro color, con otro tamaño, etc. pero yo lo seguiré viendo como estaba originalmente, hasta que lo visite.

    Sobre la forma en que ajustas el estilo, personalmente lo haría en otro orden, aunque no es algo muy importante:
    - escribir el texto
    - asignar enlaces
    - seleccionar fuente, tamaño y color

    ResponderEliminar
  33. hola oloman,
    Ya estoy aqui para darte el coñazo :P.Mira yo he hecho todo y bien no he visto ningun problema pero la historia es que no entiendo para que sirve el ultimo paso. yo creo el gadchet y en la vista se ve el espacio que coge ese gadchet sin nombre ni nada pero no se para que sirve. jajaja.disculpame si te molesto para nada pero si me pudieras explicar un poco mas sobre su funcion te lo agradeceria. Saludos y gran post gracias

    ResponderEliminar
  34. Baul Extremeño, ¿viste la demo que se enlaza al principio de esta entrada? Ahí se ve más claro.

    Se trata de poner en la barra lateral unos enlaces que se corresponden con las etiquetas (o categorías) de tu blog, de manera que al pinchar en cada uno de ellos, salga en la propia página una lista de los posts que tienen esa etiqueta.

    Hay otras maneras de hacer un "índice". Pon esa palabra en el buscador de arriba del todo y te saldrán al menos dos más. Una de ellas se llama "Indice por categorías (tipo sitemap)". Esa es más fácil y quizás es la que necesites. Échale un vistazo.

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

    ResponderEliminar
  36. Con la demo te refieres a la foto del ejemplo??es que no se si te refieres a eso. pero mira tengo un problema. tengo mi blog que es baulextremenio.blospot.com y otro que es de prueba. pues la historia es que en baul que es el importante pues me sale la tabla, pero:
    1. no se donde dices que se cambia el ancho y los colores y esas cosas
    2. me sale la tabla pero debajo me sigue saliendo lo mas reciente y yo lo que quiero es que me salgan las entradas relacionadas con la etiqueta que selecciono.
    y otra cosa si solo quisiera que al pinchar me salieran todas las etiquetas relacionadas con el indice sin tabla que tendria que hacer.
    Es que no se como pero asi me sale en el blog de prueba y no se ni como lo hice por que segui los mismo pasos en los dos. no se si me he explicado bien espero que puedas echarme una mano saludos.

    ResponderEliminar
  37. Amigo tus explicaciones no me funcionan, No es par torpes como decis en el titulo del blog??
    Punto 2) Ok copio todo el primer codigo Donde??? que es delante para vos?. Antes o despues del /head
    Punto 4) jaja inentendible por los menos para mi... cree un gayet (en la edicion de elemento de pagina) y le pegue el codgo ahi sin titulo ni nada.
    Guarde todo y en el blog no sale nada.
    quiieeeeerroo hacer un indice de categorias Simpleeeeeee y que funcione

    ResponderEliminar
  38. Baúl extremeño la parte de estilo es la que hay en el trozo de código que va entre etiquetas STYLE. Ahí es dónde puedes alterar o incluir valores para cambiar los colores, anchos, etc.
    No obstante, tras leer este nuevo comentario, me parece que lo que quieres es otra cosa distinta de lo que se explica en esta entrada. Aquí se pretende mostrar un índice de determinada categoría o etiqueta, incrustado en la misma página en la que nos encontramos. Si lo que quieres es que se vean las entradas de determinada etiqueta, al pinchar en su nombre, entonces simplemente añade desde ELEMENTOS DE PAGINA, un nuevo gadget tipo ETIQUETAS.

    Y para Alejandro, una respuesta parecida. Este un caso especial de índice para etiquetas. Si quieres un índice simple para categorías, pasa por esta otra entrada.

    ResponderEliminar
  39. Gracias oloman, eso es lo que queria pero te voy a incordiar con una ultima pregunta. Se puede tener el indice normal y ademas que salga la lista arriba??o son incompatibles?Saludos

    ResponderEliminar
  40. No recuerdo que hubiera ningún inconveniente cuando lo probé. De todas formas, si pruebas y no funciona, como son gadgets, con borrarlos lo tendrás todo como al principio.

    Creas unas etiquetas, las modificas como se explica aquí y luego creas un segundo gadget de etiquetas y lo dejas tal cual.

    ResponderEliminar
  41. Hola Oloman, aqui una vez mas molestándote jeje, sabes... e el blog de beatifoulbeta explican una forma para acelerar el funcionamiento de blogtoc,q es el de cargar todas las entradas un poco ams rápido, dicha explicacion se encuentra aquí: http://beautifulbeta.blogspot.com/2008/06/speeding-up-blogtoc.html

    podrias explicarnos este tip? , ya que no entendí ni un pome, supuestamente hay que mover un pedazo de codigo, pero no entiendo con exactitud, saludos y feliz año nuevo!

    ResponderEliminar
  42. Javier lo que ahí explican no es para que cargue más rápido, sino para que no interfiera en la carga del resto del blog. Lo que hacen en Beautiful Beta es pasar (quitándola de dónde se supone que la tienes ahora) esa línea que indican en primer lugar (sólo esa) al final de la plantilla, por ejemplo, bajo el footer, aunque es posible que también funcione situándola antes de </body>

    ResponderEliminar