JMiur [E]

Esta es una variante muy interesante para crear una Tabla de Contenidos, creada por Abu Farhan que lista las entradas del blog, ordenadas alfabéticamente, organizadas por categoría y con una marca en los últimos diez posts publicados.

Click para ver el ejemplo online.

Utilizarla tal como está es muy simple. Debemos crear una página estática y agregar el siguiente código donde lo único que debemos establecer es la URL de nuestro sitio:
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen"></link>
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://miblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&amp;callback=loadtoc"></script>
De aquí en adelante, todo es un problema de personalización así que vamos a ver esos detalles.

Primero que nada, una aclaración, este script y todos aquellos que utiliza json para leer los feeds tienen, por lo general, un párametro que indica la cantidad de entradas a leer; en este caso y en muchos otros, dice: max-results=9999. La teoría de este número 9999 es que, de esa forma, se leerán TODAS las entradas pero, eso no es cierto ya que, pongamos el número que pongamos, el máximo a leer son 500 y por o tanto, ni esta ni ninguna otra tabla de contenidos, mostrará el 100% de las entradas. Si, por algún motivo, se necesitan mostrar más hay que hacer otra llamada; es decir, crear otra página y cambiar el script indicando desde donde hasta donde se va a leer.

Esto mostraría 500 entradas empezando con el post número 501 (ver ejemplo):
<script src="http://miblog.blogspot.com/feeds/posts/default?&start-index=501&max-results=500&alt=json-in-script&callback=loadtoc"></script>
y esto mostraría otras 500 entradas empezando con el post número 1001 (ver ejemplo):
<script src="http://miblog.blogspot.com/feeds/posts/default?&start-index=1001&max-results=500&alt=json-in-script&callback=loadtoc"></script>
El segundo tema importante es que, si bien podemos usar los archivos tal como los provee el desarrollador, siempre conviene que descarguemos una copia de los mismos para evitar sorpresas.

Por último, la personalizacion del script debemos hacerlas con CSS. En este caso, el estilo se encuentra en el archivo gfdynamicfeedcontrol.css que es un archivo que utiliza Google para mostrar feeds y que podemos modificar a gusto y simplificar bastante ya que contienen una enorme cantidad de definiciones que no se utilizarán en absoluto. Lo básico es esto:
/* el rectangulo donde se mostrará */
#feed-control { /* no requiere definiciones */ }

/* el rectangulo interno donde se mostrará el contenido */
.gfg-root {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}

/* los títulos de cada etiqueta */
.gfg-subtitle {
overflow:hidden;
white-space:nowrap;
}
.gfg-subtitle a { /* cada título es un enlace  */
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-subtitle:hover  { /* efecto hover sobre esos enlaces */ }

/* cada rectángulo con la lista de entradas de una etiqueta */
.gfg-list {
position : relative;
overflow : hidden;
margin: 10px 0;
}
/* cada item de esa lista */
.gfg-list li {
list-style-type: none;
}
/* cada enlace esta en un DIV */
.gfg-listentry {
overflow: hidden;
white-space: nowrap;
}
/* podemos darle fondos distintos intercalados ya que se diferencian los apres de los impares */
.gfg-listentry-odd { }
.gfg-listentry-even { }
/¨* en enlace a cada entrada */
.gfg-listentry a {
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-listentry a:hover { /* efecto hover sobre esos enlaces */ }

/* limpia las flotaciones de algunas etiquetas */ 
.clearFloat {clear: both;}
Y eso es todo; no puede mostrarse mucho más ya que el diseño gráfico dependerá de cada plantilla y de la imaginación de cada uno.

78 comentarios:

Mozz  

Muy bueno!!! Gracias Jmiur ;)

Responder
egoloco  

A LA PIPETA!! Es un genial indice!!

Te quedó espectacular! Lindo juguete, gracias por compartirlo... nos vemos! :D

Responder
Graciela  

Encantadora Jmiur, lo haces fácil :)

Buen lunes, besos!

Responder
Víctor  

Como aporte me gustaría mostrar un site que me hice para mostrar varias formas de crear los famosos blog toc:

http://sitemap.laplegariadeunpagano.com/

Aquí resumo varios tipos, la página la subí a 110mb.com que permite dar una URL por archivo subido y allí alojé un sitemap (para adultos):

http://sitemap.laplegariadeunpagano.com/sitemap.xml

Usando esto y añadiento esa dirección como sitemap en herramientas para webmaster pues he tenido creo buenos resultados.

Ja, ja, si no está caido el hosting de 110mb.com suele ser de mucha utilidad.

Responder
Anahí  

JMiur, ¿porqué a mí me queda la pagina "encogida", y no abierta como a usté? ¿¿eeeehhhh?? :o
http://elrincondeanahi.blogspot.com/p/indice-por-categorias.html
Slds.
pd: lindo lunes, hay solcito.

Responder
Manfenix  

Probando...y gracias!!!

Responder
José María  

Gracias.

Responder
Dña. Urraca  

Esto me interesa, pero tengo (como siempre) dos preguntas. He visto el ejemplo y te aparece por orden alfabético, ¿sale así o le has dado alguna orden para que sea así?, y la segunda, en mi caso hay entradas que corresponden a mas de una categoría ¿esto puede crear algún conflicto?, ah y se me ocurre una última cosa ¿que pasa con las categorías que en un futuro puedas crear, aparecen directamente o tienes que volver a modificar algo? Ya lo se te complico la vida, :D pero es que sino te aburrirías.

Responder
Dña. Urraca  

Vale me he fijado mas detenidamente en el ejemplo, y retiro lo de las entradas que salen en mas de una categoría, queda contestado, no conflicto.

Responder
Dña. Urraca  

Vale estoy muy torpe también retiro lo del orden alfabético, acabo de caer del guindo, si creo la pagina estática YO, YO lo meto en orden alfabético. ¡Que mal estoy por dios!

Responder
Dña. Urraca  

:D he caído de nuevo, también añado YO la nueva categoría en la página estática. Total no hay preguntas, solo bochooorrrno de lo espesa que estoy. Voy a ver si encuentro a la reina de corazones y definitivamente me extirpa la cabeza.

Responder
JMiur  

Es interesante asi que vale la pena probar.

Anahí
Porque en alguna parte le indicas eso, que se muestre oculto con display: none; pero, no logro identificar dónde, aparentemnete, dice:

<div style="display: none;" id="98812997793014043" class="post-body">

si es así, cambialo para que diga display: block; y de ese modo, aparecerá abierto por defecto.

Dña. Urraca:
Aparece por orden alfabético por defecto, no he modificado absolutamente nada del script porque, simplemente, no lo comprendo en absoluto :D
Por lo que leí en el post del autor, reconoce categorías diferentes, en mi caso, a veces hay dos o tres en una misma entrada y no he visto que eso produzca conflictos.
Si las categorías cambian, ya sea porque se agregan, se eliminan o modifican, el script detectará los cambios y no hay necesidad de modificar nada; usa los feeds así que simplemente, se adapta a ellos. No habrá problemas.

Ah no, ahora que he respondido, borre todo lo anterior :D
Eso me pasa por leer de arriba hacia abajo :D

Responder
Fende Testas  

¿Habría alguna de forma de filtrar algunas categorías?

¿Alguna idea?

Responder
Anahí  

Muchas gracias, JMiur, pero no encuentro ese "id" en la plantilla.
Slds.

Responder
JMiur  

Fende: ¿Con este scropt? No tengo idea, somplemente, no lo entiendo en absoluto :D

Anahí: Me imaginé porque se ve "raro". En alguna parte de la planilla, se debe estar ocultando el post-body pero no es algo que logre ver en el código fuente, debe estar en la plantilla misma. Podrías enviarme por mail el código y el del post en si mismo así me fijo. En alguna parte debe estar :D

Responder
Peduwan  

Me encanta, como siempre muy sencillo, ya esta funcionando
http://webrto.blogspot.com/p/mapa.html
agradecido contribuyes al empoderamiento de individuos y sociedades

Responder
JMiur  

Me alegra que fuera sencillo, Peduwan.

Responder
Javierlota  

¿dónde hay que poner el CSS?

Gracias

Responder
JMiur  

Puedes ponerlo con el resto del CSS, entre las etiquetas <b:skin> y </b:skin> o antes de </head>:

<style>
............ aquie pones el CSS
</style>

Responder
Javierlota  

Será mi torpeza...

Pero he hecho lo que me dices y veo el índice igual que antes.

¿Podrías echarle un vistazo a esta página de mi blog de pruebas?

http://adlfbeta.blogspot.com/p/prueba.html

Responder
JMiur  

¿ cuáes son las propiedades CSS que quieres usar? aAsta ahí, sólo veo las que indica esta entrada que son las mínimas elementales. El resto, ya es un tema personal de gustos. Por ejemplo, si quisiera que los subtítulos fueran de colo rojo pondría:

.gfg-subtitle a { color:red !important; }

Responder
Javierlota  

Gracias Jmiur,

Una última pregunta...

¿Qué y dónde habría que poner para cambiar el color de los espacios blancos de detrás de los títulos de las entradas y de los subtítulos

Responder
JMiur  

Los colores de fondo, ahora están definidos por estas dos propiedades por defecto:

.gfg-subtitle { background-color:#E5ECF9; }
.gfg-listentry-odd { background-color:#F6F6F6; }

Responder
Javierlota  

He conseguido cambiar algunas cosas pero lo que me queda en blanco no lo consigo.
Échale un vistazoaquí.
Y gracias por tu paciencia.

Responder
JMiur  

Son las definiciones que te dije. No sé que color quieres usar. Coloca esti y no tendrán ningun color:

.gfg-subtitle {background-color:transparent !important;}
.gfg-listentry-odd {background-color:transparent !important;}

Responder
Javierlota  

Gracias Jmiur

¡¡¡AL FÍN!!!

Lo conseguí ;)

Anda que tanto querer cambiar el color y con ponerlo transparente me sobraba.

Responder
JMiur  

Me alegro :D

Responder
SATYRA  

me interesaría usar esta tabla de contenido, pudiendo escoger las etiquetas que me interesan.

Sería posible? O me toca borrar todas las etiquetas que no me cuadran en el Índice?

muchísimas gracias!

Responder
JMiur  

No sé como debería modificarse el script para conseguir eso.

Responder
VRedondoF  

Buenos dias J.Miur.
hace tiempo vi que habias desarrollado o explicabas como hacer un listado de entradas por titulo y que se podian ordenar por fecha y/o por orden alfabetico , que ademas mostraba todas y no solo 500.
Pues lo estoy buscando , le he dado mil vueltas a las etiquetas y nada que no lo encuentro ... estoy seguro que lo lei en tu blog .. pero nada que no soy capaz de encontrarlo ... no se que titulo le pusistes.
De verdad que le he dedicado tiempo a buscarlo ...
Me puedes indicar cual es ??
Un saludo y gracias anticipadas por atenderme.
Saludos

Responder
JMiur  

Es algo que puedes ver en esta entrada.

Responder
GUSTAVO EDUARDO MENDOZA RAMIREZ  

Como modifico el arcivo css de google?

Responder
JMiur  

El archivo no lo puedes modificar, lo que puedes hacer es descargarlo, modificarlo y agregarlo en tu plantilla.

Responder
CUENTAGOTAS  

Hola JMiur, yo se que es mucho pedir pero me podrias indicar como crear una tabla de contenido como lo tienes tu en la cabecera, es decir que pueda mostrar según la etiqueta y como lo hiciste para que mostrara en 3 partes.

Gracias

Responder
JMiur  

Trataré de hacerlo aunque, en realidad, no tiene secretos; son entradas comunes escritas manualmente.

Responder
CUENTAGOTAS  

Después de vagar largas horas en este único lugar se aprende mucho, pero para quienes no manejamos javascript ni ningún otro lenguaje de programación es dificil realizar estos hacks por cuenta propia, así que aquí va mi petición a JMiur, "por favor podrías indicar los pasos que tengo que seguir para implementar la tabla de contenido por etiqueta como lo tienes tu en la cabecera".

Como bien lo dices no es ningún secreto y también es cierto que todo lo que tienes implementado en este blog lo explicas paso a paso, así que si me indicas cuales son los enlaces a seguir quizas lo pueda hacer.

Una vez más gracias.

Responder
JMiur  

Lo que está en la entrada de prueba e lo que excplica este mismo post.

Lo que uso en el menú del blog son entradas comunes, escritas manualmente.

Responder
piXel  

Estos script están buenos... pero siempre me pregunte si se pueden modificar en algún punto para que muestren las entradas de un cierto año!..

A ver si me explico un poco mejor.. he visto algunos script muy similares que ordenan por fecha, pero cuando empezás a tener muchas entradas la página se hace eterna... creo que una idea para solucionar un poco esto es dividir las entradas según el año que fueron publicadas y armar varias páginas..

No pido un script que haga todo sino que tenga alguna variable donde se pueda ir poniendo el año y después vas creando varias entradas para cada año, linkearlas después es cuestión de un poco de trabajo..

Bueno.. algo de eso para recomendar??

Responder
JMiur  

Lo desconozco.

Responder
quiensonora  

Hola JMiur, primero permiteme felicitarte por un año más en el ciberespacio virtual, y que vengan muchos más...

Bueno aquí va mi pregunta, ¿cómo hago para que me quede ordenado alfabeticamente como este blog: "http://subsindo-sukair.blogspot.com/p/index-subtitle.html" y en lugar de que se muestre verticalmente lo haga horizontal hacia abajo?

Espero se pueda hacer algo porque verticalmente ocupa mucho espacio y me sobra demasiado espacio a la derecha.

Saludos y bendiciones.

Responder
JMiur  

Saludos, quiensonora:
No parecería que allí se esté usando ningún script sino que esa página está hecha manualmente.

Responder
Martín Rocha  

Quedo genial JMiur peor como se le puede quitar el borde que le encuadra?
Este sistema es el que aplicaste en tus indices o es otro?
Saludos JMiur.

Responder
JMiur  

Los índices de este blog están hechos a mano.

Tienes que decirme la dirección del ejemplo para ver de qué borde se trata.

Responder
Martín Rocha  

Lo aplique a esta pagina estatica: http://www.dimensionpeliculas.com/p/lista.html
Saludos JMiur.

Responder
JMiur  

Poniendo esta regla de estilo:

.gfg-root {border:none !important;}

Responder
Martín Rocha  

Genio ! quedo impecable Jmiur ahora si =D
En el otro post te envie la direcion del blog en el que tengo el problema de las imagenes en la sidebar.
Un saludo que andes bien JMiur.

Responder
Houdini  

JMiur, Buen dia, mi consulta es, realice todo el procedimiento lo cual salio bien, pero al aplicar la tabla o lista de otro blog en mi blog todo sigue igual salvo las url de las etiquetas o archivo del mes se mantiene del bloo mio cuando debería ser del blog q enlazo. por ejemplo si pruebas crear la lista de tu blogs de pruebas en este blog las url de tu blog de prueba se mantendría pero los enlaces de las etiquetas mantiene la de este blog, podrias ayudarme con eso por favor...

Responder
JMiur  

No entiendo lo que dices. Si me muestras un ejemplo, tal vez lo comprenda.

Responder
Houdini  

aqui te dejo el enlace http://3milagros.blogspot.com/2011/10/ejemplo-alfa.html

Responder
JMiur  

No es este el script que usas sino el de esta otra entrada y en ese, n oestácontempalco que el enlace a la fecha que aparece como título, sea un enlace a un sitio distnto así que debes modificar esta aprte del script:

document.write('<p><strong><a target="_blank" href="'+postYearMonth2[b]+'">'+temp1+"</a></strong></p><ul>");

y en lugar de href="'+postYearMonth2[b]

poner:

href="http://nds.romstone.net'+postYearMonth2[b]

Responder
Houdini  

Gracias por ayudar, si es factible tal correcion, pero pensé q había otra forma de configurar para que se adapte para cualquier otra web o blog, en caso de que quiera crear tablas de diferentes webs tendría yo que crear un .js para cada uno de ellos... Sera posible poner un codigo que lea cualquier dominio..
gracias

Responder
JMiur  

Sí, claro. Si el script te da los enlaces a cada entrada, basta parsear cualquiera de ellos para saber cuál es la URL base del dominio. Hay que parsearla y rearmar el script.

Otra forma es crear una variable global con ese dato y usarla:
var dominio = "http://nds.romstone.net";
.........
href=dominio + postYearMonth2[b]

Responder
Análisis Histórico  

No funca noc si es mi plantilla :S
http://macabbidelevantar.blogspot.com/p/mapa-de-sitio.html

Responder
JMiur  

¿Y dónde está el script http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js?

Veo otro pero no sé si hace lo mismo: http://dl.dropbox.com/u/647003/CiudadBlogger/Scripts/tableindex.js

Responder
TrucosVariosPC  

Este código, debajo o encima de que código debo ponerlo?

/* el rectangulo donde se mostrará */
#feed-control { /* no requiere definiciones */ }

/* el rectangulo interno donde se mostrará el contenido */
.gfg-root {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}

/* los títulos de cada etiqueta */
.gfg-subtitle {
overflow:hidden;
white-space:nowrap;
}
.gfg-subtitle a { /* cada título es un enlace */
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-subtitle:hover { /* efecto hover sobre esos enlaces */ }

/* cada rectángulo con la lista de entradas de una etiqueta */
.gfg-list {
position : relative;
overflow : hidden;
margin: 10px 0;
}
/* cada item de esa lista */
.gfg-list li {
list-style-type: none;
}
/* cada enlace esta en un DIV */
.gfg-listentry {
overflow: hidden;
white-space: nowrap;
}
/* podemos darle fondos distintos intercalados ya que se diferencian los apres de los impares */
.gfg-listentry-odd { }
.gfg-listentry-even { }
/¨* en enlace a cada entrada */
.gfg-listentry a {
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-listentry a:hover { /* efecto hover sobre esos enlaces */ }

/* limpia las flotaciones de algunas etiquetas */
.clearFloat {clear: both;}

JMiur  

EL CSS va donde quieras; entre etiquetas <style> </style> o con el resto en <b:skin>

Responder
TrucosVariosPC  

Perdone, porque en mi blog: http://www.trucosvariospc.com aunque yo cambie los códigos del CSS se sigue viendo de igual aspecto, es decir, si yo pongo este código:

/* el rectangulo donde se mostrará */
#feed-control { /* no requiere definiciones */ }

/* el rectangulo interno donde se mostrará el contenido */
.gfg-root {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}

/* los títulos de cada etiqueta */
.gfg-subtitle {
overflow:hidden;
white-space:nowrap;
}
.gfg-subtitle a { /* cada título es un enlace */
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-subtitle:hover { /* efecto hover sobre esos enlaces */ }

/* cada rectángulo con la lista de entradas de una etiqueta */
.gfg-list {
position : relative;
overflow : hidden;
margin: 10px 0;
}
/* cada item de esa lista */
.gfg-list li {
list-style-type: none;
}
/* cada enlace esta en un DIV */
.gfg-listentry {
overflow: hidden;
white-space: nowrap;
}
/* podemos darle fondos distintos intercalados ya que se diferencian los apres de los impares */
.gfg-listentry-odd { }
.gfg-listentry-even { }
/¨* en enlace a cada entrada */
.gfg-listentry a {
/* cualquier tipo de propiedad, color, fuente, etc */
}
.gfg-listentry a:hover { /* efecto hover sobre esos enlaces */ }

/* limpia las flotaciones de algunas etiquetas */
.clearFloat {clear: both;}






se ve de igual forma en mi blog que si pongo este otro:

.gfg-root {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 12px;
}
.gfg-subtitle {
font-size: 14px;
font-weight: bold;
color: #36C;
background-color: #E5ECF9;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
margin-bottom: 5px;
}
.gfg-subtitle a {
color: #36C;
}
.clearFloat {
clear: both;
}
.gfg-list {
position: relative;
overflow: hidden;
text-align: left;
margin-bottom: 5px;
}
.gfg-listentry {
line-height: 1.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding-left: 15px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.gfg-listentry-odd{
background-color: #F6F6F6;
}




A que se puede deber, que debo hacer?
Esto lo puedes ver en: http://www.trucosvariospc.com/p/explorar.html

JMiur  

El único CSS agregado en tu blog que tiene que ver con esto es uno que está condicionado para que sólo funcione en versiones de Internet Explorer inferiores o iguales a la 7:

<!--[if lte IE 7]>
....................
<![endif]-->

TrucosVariosPC  

ya le he quitado la codificacion, pero sigue igual, es decir aunque yo cambie el cs no cambia el aspecto.

JMiur  

¿Y cuál es la propiedad que quieres cambiar? Por lo que se ve, las reglas de estilo son las reglas por defecto y no es necesario copiarlas todas sin solamente, cambiar o agregar aquellas que queremos modificar.

No todas se cambian igual, dependerá de la plantilla que se este usando; por ejemplo, si quisiera cambiar el color de fondo del título de cada categoría debería agregarle la palabra !important y poner esto:
.gfg-subtitle {background-color: yellow !important;}

si quisiera cambiar el color de los textos de cada entrada, como son enlaces y ya están definidos en la plantilla, debería agregar una regla como:
#feed-control li a {color: green;}

No existe una solución universal, todo dependerá de lo que quieras hacer.

Responder
Vero Rodriguez  

Hola! copio el codigo css antes de head o despues de skin y de cualquier manera ,al guardar los cambios me aparece el codigo escrito en el blog, no lo interpreta. quizás no lo este poniendo donde debería, tengo una de las plantillas nuevas de blogger. gracias por la ayuda

JMiur  

Si estás hablando del CSS, puedes ponerlo dentro de <b:skin> </b:skin> o colocarlo dentro de etiquetas <style> </style>

Vero Rodriguez  

Muchas Gracias, funciono. Ahora me gustaría quitarle el color blanco de fondo que tienen algunos renglones ¿que deberia modificar? GrACIAS.

JMiur  

Tendría que ver tu ejemplo para intentar responder eso.

Responder
Vero Rodriguez  

http://www.soberaniaalimentariaparaveryescuchar.blogspot.com.ar/p/lista-de-videos.html
aqui esta mi ejemplo con esos colores no se leen bien por eso necesitaba cambiarlos, gracias!

JMiur  

Tendrías que sobrescribir el estilo agregando esta regla:
.gfg-listentry-odd {background-color: #COLOR;}
con el código de color que quieras, en este momento el valor es #F6F6F6

Es que hay un fondo para las líneas pares y las impares; llegado el caso, las otras deben cambiarse con:
.gfg-listentry-even {background-color: #COLOR;}
aunque en este momento, no tienen ningún color definido.

Vero Rodriguez  

Muchas graciasss!

Responder
♥ Ana  

Buenos días JMiur
He puesto ésta tabla de contenidos en mi blog, ya he pasado la barrera de las 500 entradas en el blog y me gustaría, si pudiera ser, que se vieran todas en una misma página, para probar he añadido la segunda llamada al script debajo de la primera en la misma entrada y lo que hace es que me duplica la tabla de contenidos, lo he puesto de ésta forma:
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen"></link>

<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>

<script src="http://vientoybambu.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

<script src="http://vientoybambu.blogspot.com/feeds/posts/default?&start-index=501&max-results=500&alt=json-in-script&callback=loadtoc"></script>
, si quieres ver como queda, te pongo la dirección:
http://vientoybambu.blogspot.com/2008/09/indice-del-blog.html
Muchas gracias de antemano

JMiur  

No creo que eso sea una buena idea porque la carga demorará mucho y nadie tiene paciencia suficiente como para recorrer mil entradas pero, de todos modos, la url del script para la primera página debería ser:

http://vientoybambu.blogspot.com/feeds/posts/default?&start-index=1&max-results=500&alt=json-in-script&callback=loadtoc

y la segunda:

http://vientoybambu.blogspot.com/feeds/posts/default?&start-index=501&max-results=500&alt=json-in-script&callback=loadtoc

aunque, ahí deberás resolver dónde se muestra la primera y donde se muestra la segunda ya que si ambos divs tienen el mismo ID, no verás los resultados de ambas llamadas sino siempre la de la última.

♥ Ana  

Hola de nuevo
Lo he puesto tal y como me has dicho pero, sigo viendo las dos llamadas al script, en la primera me faltan un par de entradas que se añaden en la segunda llamada pero, al añadirse esas dos en la segunda llamada se quitan otras dos que estaban en la primera, no se si me explico, no se ve un índice completo con las 502 entradas que tengo publicadas, se ven dos índices con 499 entradas cada uno, con dos entradas que son diferentes en ambos, que es lo mismo que me pasaba antes
He visto en otros blogs, por ejemplo el de Gem@ y el de Ciudad Blogger que tienen más de 500 entradas y cargan bien, aunque no se si tienen éste mismo sitemap
Gracias

JMiur  

Por lo que voy entendiendo, lo que quieres es mostrar las entradas ordenadas por etiquetas y este script hará eso pero, cuando lo ejecutas una segunda vez, vas a tener el problema de tener que "unir" los resultados del primero con los del segundo.

Tal como lo veo, sería más sencillo intentar usar otro tipo de script que no cargue todos los feeds sino los de cada etiqueta de modo individual. De ese modo, ese máximo de 500 sería para cada etiqueta.

♥ Ana  

Siii, eso es lo que quiero, me gustaría que todas las etiquetas de mi blog se ordenaran por orden alfabético
Te explico, yo tenía un sitemap cogido de El Potro (Ciudad Blogger), y hablando con él me recomendó que hablara contigo ya que le pregunté acerca de el sitemap que él tiene puesto en su blog y lo cogió de ésta entrada tuya, también me comentó de poner el script por etiquetas, te pongo un ejemplo de como me dijo él que lo pusiera:
<script src="http://vientoybambu.blogspot.com/feeds/posts/default/-/Arroces?max-results=500&alt=json-in-script&callback=loadtoc">

</script><br />



<script src="http://vientoybambu.blogspot.com/feeds/posts/default/-/Aves?max-results=500&alt=json-in-script&callback=loadtoc">

</script><br />
Ésto lo probé con éste sitemap tuyo también y lo que sucede es que también me repite algunas etiquetas, en resumen, que tampoco me vale y supongo que será por el tipo de script, así que si tú me puedes recomendar uno que haga eso de cargar las etiquetas de modo individual, te lo agradecería mucho, no veas el tiempo que llevo a vueltas con lo del sitemap, hasta me he puesto a hacer uno manualmente por si no encuentro un script que lo haga

Aparte de eso, abusando un poquito de ti, jejeje ¿me podrías decir si se puede separar una sola entrada del blog en 3 ó 4 columnas sin usar tablas?, se que se puede separar en dos pero, ya no se hacerlo en más columnas

Un abrazo

JMiur  

A ver. Efectivamente, lo razonable es usar un script por etiquetas o mejor dicho, varios scripts, todos similares pero, uno para cada una de ella. No hace falta que sea este en particular; puede ser cualquiera; en esta otra entrada hay otro ejemplo.

Pero, si una entrada tiene más de una etiqueta, se repetirá. Eso ocurrirá con cualquiera, se mostrará ordenada.

No estoy seguro de entender eso que dices de separar en columnas; si te refieres a mostrar columnas de textos, puede separarse en tantas como espacio exista y eso puede hacerse con CSS pero dependerá de cómo esté estructurado; si me muestras un ejemplo, puedo intentar verlo y dar algún detalle extra.

♥ Ana  

Hola
Mis entradas tienen solo una etiqueta, aunque alguna de esas etiquetas tiene varias palabras, por ejemplo: Empanadas y pizzas, no se si eso influye en algo
Voy a mirar ésta entrada que me dices a ver si así consigo poner un índice en condiciones o me vuelvo loca en el intento, jejejeje

Lo de separar una entrada en tres columnas, me refiero a lo que dices tú: mostrar varias columnas de texto, pero, sólo en una entrada del blog, digamos que, el resultado querría que fuera similar a lo que tienes tú en tu pestaña Blogger, que tienes cada etiqueta dividida en tres columnas de texto, la entrada que quiero dividir en columnas tiene un ancho de 970px

Saludos y pasa un buen fin de semana

Responder
♥ Ana  

Aquí vuelvo
Después de haber intentado hacer lo de las columnas en una entrada y de haber mirado por Internet, vengo aquí, te lo pregunto a ti y hace un rato lo he podido hacer yo, así que siento mucho haberte molestado para eso, lo conseguí, ¡¡estoy toda contentuela!!, jajaja, ahora a ver si consigo lo del índice que, detrás de eso llevo más tiempo pero, soy muy persistente, así que algo conseguiré hacer
¡¡Graciassss!!

JMiur  

Me alegra que lo de las columnas esté resuelto. De todos modos, esta entrada explica el tema si es que usas listas.

En cuanto a las etiquetas; si las entradas sólo tienen una, no debería haber ninguna clase de repetición sin importar la cantidad de palabras que tenga cada etiqueta.

♥ Ana  

Hola Jmiur, solo venía a comentarte que conseguí poner un índice alfabético por etiquetas, creo que lo hice como tú me dijiste , aunque, en un principio, no lo entendí, he usado el mismo script pero, cada vez que pongo una etiqueta, pongo también la dirección del scritp, así lo he puesto:

<script src="https://la-dirección-del-script?"></script>

<script src="http://vientoybambu.blogspot.com/feeds/posts/default/-/Arroces?max-results=500&alt=json-in-script&callback=loadtoc">

</script>

Lo he repetido tantas veces como etiquetas tengo y me está funcionando, jejeje, además he alojado el script en un servidor (que tampoco sabía como se hacía y ya he aprendido)
Y, aunque no lo he hecho con ésta tabla de contenidos tuya sino, con otra, me apetecía venir a decirte que , por fin, ¡¡lo he conseguido!! y, es que estoy muy contenta porque llevaba tiempo detrás de ello

Sigo con la idea de poner un índice por etiquetas con las miniaturas de cada entrada pero, eso aún no lo he conseguido, si veo que no me sale, lo haré manualmente, con mucha paciencia

Muchísimas gracias por tus ayudas

JMiur  

Sí. Eso decía; poner un script por etiqueta y listo. Es la mejor solución

La página que te mostraba hace lo mismo pero un poco más automáticamente. El resultado final es el mismo así que adelante.

Me alegra que se haya solucionado el tema :-D

Responder
 
CERRAR