28 de agosto de 2015

Como crear un índice para Blogger personalizable por Título o Categorías


Un índice es una lista o relación ordenada de datos que permite ubicar información concreta. En el caso de nuestro gestor de contenidos Blogger, nos va a permitir acceder a cada uno de los artículos publicados por categorías.


Hay muchos ejemplos en la red y desde el punto de vista funcional son válidos pero he querido dar un paso más y en este caso, vamos a personalizar o configurar la forma en que mostramos la información.
En el siguiente ejemplo tendremos la posibilidad de:

  • Ordenar alfabéticamente por Categorías.
  • Ordenar alfabéticamente por Título.
  • Ordenar por Fecha de publicación.
  • Mostrar la fecha de publicación.
  • Definir el texto o marca que aparece en los últimos artículos.
    Ejm: New!!
  • Determinar el número de artículos a los que poner la marca.
Lo primero que hacemos es acceder al panel de control de Blogger y nos situamos sobre la opción Páginas del menú de la parte izquierda

Páginas

A continuación hacemos clic sobre el botón Página nueva



En el campo con el texto Título de la página escribimos Indice y en el área de escritura de mayor tamaño introducimos el siguiente código:

<div id="all-post" class="all-post"></div>
<script>
var conf = {
 sortBy:   'orderlabel',  // forma en que se muestran las artículos publicados
 lastPost: 10,            // últimos post (10) a los que les pongo una marca
 date:     1,             // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
 newPost: 'Nuevo!!',      // texto o marca que aparece en los últimos artículos
 newtab:   1              // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Vamos a analizar los parámetros de configuración:

  • sortBy puede tomar los siguientes valores:

    1. orderlabel: ordena alfabéticamente por Categorías
    2. titleasc: ordena alfabéticamente por Título del Post (de A a Z)
    3. titledesc: ordena alfabéticamente por Título del Post (de Z a A)
    4. dateoldest: ordena el Título del Post por fecha de publicación (del más antiguo al más reciente)
    5. datenewest: ordena el Título del Post por fecha de publicación (del más reciente al más antiguo).

  • lastPost: número de artículos que aparecerán como nuevos, ordenados por última fecha de publicación.
  • date: 0 si no queremos mostrar la fecha de publicación del artículo o 1 para mostrarla.
  • newPost: texto o etiqueta que aparecerán en los artículos nuevos.
  • newtab: 0 para abrir el artículo seleccionado en la misma ventana o 1 para abrir el link en una ventana nueva.
Como indicación final, sustituimos el texto [URL DE TU BLOG] por la dirección de nuestro blog (en mi caso: http://jmacuna73.blogspot.com).

Si además, queremos añadir estilos al Índice para que resulte más atractivo, podemos incluir clases de la siguiente forma:

<style type="text/css">
.all-post ol{
 list-style-type: circle
}
.all-post li a{
  text-decoration:none;
  padding:0 2px;
  color:#445;
  font-size:1.2rem
}
.all-post a:visited{
 color:#445;
 text-decoration:none
}
.all-post a:hover{
 outline:0;
 text-decoration:none;
 color:#eee
}
.all-post li{
  background:#eee;
  padding:.5rem 1rem;
  border-bottom:1px solid #c5c5c5
}
.all-post li span{
  color:#888;
  font-family:Impact,Charcoal,sans-serif;
  font-size:.7rem
}
.all-post li:nth-child(){
  background-color:#f5f5f5;
  border-bottom:1px solid #b5b5b5
}
.all-post li:hover{
 background:#1680c6
}
.all-post {
  margin:3px auto;
  font-size:1rem;
  font-weight:400;
  letter-spacing:1px
}
.all-post ol li strong em{
  font-style:italic;
  color:#d24f18
}
.all-post p a{
  margin:0 0 10px 0;
  padding:10px;
  color: #fff;
  font-size:1rem;
  line-height:16px;
  font-family:'Oswald',sans-serif;
  font-weight:normal;
  text-decoration:none;
  outline:1px dashed #98abb9;
  outline-offset:-2px;
  background-color:#1680c6;
  -webkit-box-shadow:2px 2px 2px #000;
  -moz-box-shadow:2px 2px 2px #000;
  box-shadow:2px 2px 2px #000
}
</style>


Screenshot del Indice aplicando los estilos:



Podéis ver el Índice del blog en el menú de navegación de la parte superior (versión de escritorio) o accediendo a la dirección http://jmacuna73.blogspot.com/p/indice.html




155 comentarios:

Moni Alus dijo...

Hola. ¡Gracias! Lo he implementado en mi blog (http://www.monialus.com.ar/p/contenidos.html) y ha quedado hermosísimo.
No solo es práctico porque carga rápido. Aparte, es apta para la versión móvil. Tengo un Nokia N8 (SO Symbian) y no se pierde un solo detalle.
Por último, y si es que uno piensa que por tener tooodos las entradas desplegables, resulta un poco incómodo de leer, viene a solucionar un inconveniente que lo he visto en el motor de búsqueda: no siempre se encuentra lo que se busca (indexación y otras yerbas). Pues aquí el tema se soluciona; ya que, al desplegarse tooodos los títulos de las entradas, permite buscar por el simple y vetusto (pero efectivo) "Control + F".
Un próximo reto sería agregarle la fecha a cada post, pero estoy pidiendo demasiado.
Un abrazo enorme y, nuevamente, ¡¡¡un millón de gracias!!!

Jose Maria Acuña Morgado dijo...

Gracias a ti Mónica,
me alegra mucho que te haya resultado útil :))
En cuanto a lo de la fecha de los artículos: ¡¡RETO ACEPTADO!!

He añadido un nuevo parámetro de configuración:
date,
además he incluido una clase para darle formato visual .all-post li span{...},
y he modificado la lógica del fichero javascript. La nueva dirección es https://drive.google.com/open?id=0B5G3cbs08P16TE1iVENVd2U5eFE

Un abrazo y siempre es un placer responder tus peticiones!!

Federico Abad dijo...

Muchas gracias, José María. Me has sido de gran ayuda para mi blog colaborativo http://vadebailes.blogspot.com.es/, porque el código que venía usando ha dejado de funcionar. Lo único que me ha quedado por saber es cómo incorporar la barra de menú superior para el tipo de ordenación. Es lo malo de no saber casi nada de HTML. Un saludo.

Abastos 2.0 dijo...

Muchas gracias, é probado varios y este si funciona en mi blog http://blog.abastosdouspuntocero.es/p/publicacion.html, tanto por fechas como por etiquetas. Tuve algún problema, pero ya están solucionados. Muchas gracias

Jose Maria Acuña Morgado dijo...

Gracias a ti Federico :))
Si quieres mostrar el objeto html "select" para seleccionar el tipo de ordenación, introduce el siguiente código:




<select id="orderPost" onchange="orderPostSubmit()">
<option selected="" value="orderlabel">Ordenar alfabéticamente por Categorías</option>
<option value="titleasc">Ordenar por Título del Post (de A a Z)</option>
<option value="titledesc">Ordenar por Título del Post (de Z a A)</option>
<option value="dateoldest">Ordenar por Fecha de Publicación (más antiguo)</option>
<option value="datenewest">Ordenar por Fecha de Publicación (más reciente)</option>
</select>




Despues, busca la línea var conf = { ... y justo antes del cierre del script </script> añade este código javascript:





function orderPostSubmit(){
var js = document.getElementById('feedPost'),
url = js.getAttribute('src'), script;

conf.sortBy = document.getElementById('orderPost').value;
postTitle.length = postUrl.length = postDate.length = postLabels.length = postBaru.length = 0;

js.parentNode.removeChild(js);
script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'feedPost';
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

Un saludo!!

Jose Maria Acuña Morgado dijo...

Me alegra mucho que te haya servido Abastos 2.0
Muchas gracias por comentar!!

Un saludo.

Moe Bius dijo...

Hola. Gracias! Lo he probado y queda muy bien. El único problema es que únicamente me muestra las entradas del año en cuestión (2015) y no muestra ninguna entrada de los años anteriores.
Tampoco he podido implementar la opción del select.
Gracias por el aporte.

Jose Maria Acuña Morgado dijo...

Gracias a ti Moe Bius!!
Un saludo :))

frediris matos dijo...

es de mucha ayuda la informacion de como ponerle un indice a tu blog.

Radio Pi Manolo dijo...

lo estoy probando y no hay manera de que se vea en mi sitio , alguna sugerencia?? gracias

Jose Maria Acuña Morgado dijo...

No veo cual es el problema!

El siguiente código html genera perfectamente el índice correspondiente a tu blog, Radio Pi Manolo:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="all-post">
<script>
var conf = {
sortBy: 'orderlabel', // forma en que se muestran las artículos publicados
lastPost: 10, // últimos post (10) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
newPost: 'Nuevo!!', // texto o marca que aparece en los últimos artículos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://www.googledrive.com/host/0B5G3cbs08P16c3pVRmJ0aWUyYlU/"></script>
<script src="http://pimanoloradio.blogspot.com.es/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>
</body>
</html>

Radio Pi Manolo dijo...

disculpa ahora si me aparece ,al parecer es un error mio , gracias

Radio Pi Manolo dijo...

como den¡bo modificar el código para que me aparezca como el tuyo ,con opciones de visualización ?? ordenar de la a-z etc..'

gracias

Radio Pi Manolo dijo...

Ya está resuelto todo de lujo --gracias

Radio Pi Manolo dijo...

perdona si soy pesado ,todo bien ,el único problema es que cuando elijo por ejemplo ordenar de la z-a no me recarga y no ordena ,o cualquier otra opción tampoco permanece fijo

no se si me explico

aque puede ser debido ??

Jose Maria Acuña Morgado dijo...

Sólo te falta introducir el id feedPost en tu script de feed, de la siguiente manera:

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

Radio Pi Manolo dijo...

lo tengo puesto pero me sigue sin ordenar
http://k30.kn3.net/9/B/C/B/2/6/D7C.png

no se que puede ser ?' igual no está puesto en el lugar adecuado?

gracias

Radio Pi Manolo dijo...

puede ser por mi tipo de plantilla html ,por que lo estoy poniendo en un post de prueba con la plantilla original de bloggers y si ordena ,no se?

Radio Pi Manolo dijo...

SOLUCIONADO gracias por su paciencia

Jose Maria Acuña Morgado dijo...

Te ha quedado genial Radio Pi Manolo!!
Un saludo.

Marhali dijo...

Hola, José, mil gracias por tu aporte, me salvaste porque no daba con la tecla para hacer un índice. Lo tengo hecho por orden alfabético, pero tengo un problema: no me salen todas las entradas (que son 419), me salen unas 150. ¿Qué estoy haciendo mal? Mi blog: http://lauvaylaparra.blogspot.com
Mil graciasss, eres un sol!

Jose Maria Acuña Morgado dijo...

Hola Marhali, interesante blog :))

Creo que tu problema tiene que ver con un error general de Blogger. Échale un vistazo a esta página que creo que te va a yudar: https://escss.blogspot.com/2015/12/solucion-feed-blogger-sitemap.html

Saludos!!

Marhali dijo...

Mil gracias, chicos, lo he intentao toito tó... y no hay manera :-( Seguiremos investigando, y si doy con la clave la comparto. Un abrazo!

Jose Maria Acuña Morgado dijo...

Hola de nuevo Marhali, he podido echarle un vistazo al índice de tu blog y te puedo confirmar que funciona correctamente ordenando por fechas (del más nuevo al más antiguo).
El problema de ordenar alfabéticamente es que ordena por bloques de 150 artículos (máximo permitido por Blogger) y no en su totalidad.

El código que debes utilizar:


<script>
var conf = {
sortBy: 'datenewest', // orderlabel - titleasc - titledesc - dateoldest - datenewest
lastPost: 0, // nº post con resalte
date: 0, // 0:no date - 1:date
newPost: '', // texto de resalte
newtab: 1 // 0:no target - 1:target: _blank
}
</script>
<ol class='all-post'>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemap.js"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?star-index=1&max-results=150&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemap.js"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?start-index=151&max-results=150&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemap.js"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?start-index=301&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemap.js"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?start-index=451&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</ol>


Saludos!!

Marhali dijo...

Muchísimas gracias, José! Ya adapté el código que me enviaste y, efectivamente, salen todas las entradas ordenadas. Eso sí, en bloques de 150. Al menos, sale todo. Seguiremos esperando a que blogger arregle el error y se puedan ver de un tirón. Te reitero mi agradecimiento, un abrazo grandeee!!

Jose Maria Acuña Morgado dijo...

Otro abrazo para ti Marhali ;)

Paco Ruiz dijo...

Buenos días
Intento poner tu código en una página de mi blog y no obtengo nada.
http://jrmprofundiza2012robotica.blogspot.com.es/p/prueba.html
¿Podrías decirme qué estoy haciendo mal? ¿Falta algo?
Por cierto, ¿podría ponerse en uno de los bloques laterales del tipo "Configurar HTML/JavaScript"? Lo he intentado con el mismo código pero tampoco aparece nada.
Saludos, Paco Ruiz

Jose Maria Acuña Morgado dijo...

Hola Paco,
he estado revisando tu caso y no hay ningún error en programación, todo está correcto.

Lo que ocurre es que el script está diseñado para obtener resultados a partir de la categorización del blog y en tu blog no has asignado las entradas a categorías.

Si te fijas en el script de mi blog http://jmacuna73.blogspot.com.es/feeds/posts/default?max-results=9999&alt=json-in-script, podrás observar que existen etiquetas del tipo y en tu blog no están definidas: http://tecnologia-escolar-eso.blogspot.com.es/feeds/posts/default?max-results=9999&alt=json-in-script

Espero haber sido claro en la explicación.
Un saludo!

Jose Maria Acuña Morgado dijo...

Etiquetas del tipo category quería decir :))

Paco Ruiz dijo...

Para empezar muchas gracias por responder tan rápido.

Lo que pretendo es tener un listado simple con los títulos de cada entrada, ordenados por fecha, nada más. Si Además puede salir en uno de los paneles laterales del blog mejor aún.

No me importa ir entrada a entrada poniendo a mano en el html las etiquetas que me dices, aunque no tengo claro qué debo poner. ¿Sería suficiente poner la misma etiqueta de categoría a todas las entradas? ¿O Blogger tiene alguna opción para hacer esto?

¿Podrías ponerme un ejemplo del código a escribir si es el caso?

Saludos

Jose Maria Acuña Morgado dijo...

Gracias a ti Paco por pasarte por mi blog :)
Te paso una url con indicaciones de como crear categorías en blogger: http://jiestevez.blogspot.com.es/2013/01/crear-categorias-en-blogger.html

Una vez hayas añadido el gadget, el índice debería funcionar sin problemas.
Saludos!!

Paco Ruiz dijo...

Creo que ya me queda poco.
Solo tuve que añadir una etiqueta a cada entrada para que funcionara el script.
En contreto, he probado a añadir una única etiqueta del tipo "<"meta name='Paco Ruiz'">" (sin las comillas dobles) que ni siquiera se ve (realmente solo quiero la lista de títulos).

Te comento los dos detallitos que me quedan, por si aún me puedes orientar:
1. ¿Cómo hago para que aparezcan todas las entradas en vez de las 10 que vienen por defecto? ¿Pongo un número gigantesco como 10000 o hay alguna forma más elegante de hacerlo?
2. El numerito de orden (1., 2., ...), ¿es posible quitarlo y que solo aparezca el título de la entrada?

Gracias de nuevo

Jose Maria Acuña Morgado dijo...

Paco, puedes añadir el siguiente estilo para las listas ordenadas:


<style type="text/css">
.all-post ol {
list-style-type: none; /*podrías utilizar disc, square, circle, etc*/
}
</style>


Lo puedes poner al inicio del bloque del widget, antes de <div class="all-post">

Daniel Yuste dijo...

Hola José,
Muchas gracias por tu entrada. Llevaba tiempo para encontrar un simple índice por fecha para mi blog y por fin di en el clavo contigo!
Desde mi humilde conocimiento de HTML, sólo quería comentarte dos pequeñas cosas que me gustaría cambiar:
1. Me sale un 1. al lado de cada entrada. Hay forma de suprimirlo?
2. Veo mis entradas en el índice más espaciadas de lo que me gustaría. Hay alguna forma de reducir este espacio?
Muchas gracias!

Daniel
www.objetivo6continentes.com

Paco Ruiz dijo...

En el comentario anterior al tuyo está la solución.
Yo además añadí
margin-left: -35px;
font-size: 12px;
para ajustar el tipo de letra y el espaciado con el margen.

Por si quieres ver cómo me queda a mi (Registro de la bitácora):
http://jrmprofundiza2012robotica.blogspot.com.es/

Jose Maria Acuña Morgado dijo...

Gracias por tu aportación Paco :)

Efectivamente, podemos jugar con la propiedad padding para reducir/ampliar los márgenes entre los textos.

Un ejemplo: padding-left:20px;

Gracias por visitar el blog, Daniel Yuste.
Saludos!!

Oscar TG dijo...

Hola José Maria...agradecer tu solución de la implementación de un indice de entradas, la verdad que funciona bien. Por desgracia a mí no acaba de funcionar con los resultados que esperaba, espero, y si tu puedes, me sugieras una solucion. He implementado el codigo que le pasastes a la compañera Marhali, donde le detallabas un script para que salieran todas las entradas del blog...yo he usado este mismo script, y la verdad que salen las 649 entradas que tengo en el blog, el problema es que cuando cklicas alguna de las entradas del indice, te redirige a una pagina de error. Estoy un poco perdido, ya que no encuentro donde esta el error...pido tu ayuda, cuando puedas, te lo agradecería.

Gracias y un saludo: Oscar

Oscar TG dijo...

Perdón, no he puesto mi blog
http://www.clasicofilm.com/

Jose Maria Acuña Morgado dijo...

Hola Oscar,
en primer lugar te agradezco que te hayas detenido a leer el blog :))

El script funciona correctamente, lo que ocurre es que está diseñado para que los enlaces se resuelvan a través del protocolo seguro https y por lo que veo, tu blog no implementa este protocolo: https://www.clasicofilm.com

Para solucionarlo, al final del bloque del widget, coloca el siguiente código:


<script>$(function(){$('.all-post a').each(function(){this.href=this.href.replace('https:','http:')})});</script>


Lo he probado y debería funcionar sin problemas.
Un saludo!!

Oscar TG dijo...

Magnifico José María...funciona de lo lindo.
Muy agradecido por tu solución y por ayudar a los menos entendidos en estos temas.

Gracias y feliz Navidad !!

Oscar

Jose Maria Acuña Morgado dijo...

Gracias a ti Óscar,
me alegro de que te sirva :))

Feliz Navidad!!

Oscar TG dijo...

Buenos días José María....a dejado de funcionarme el script para el indice de entradas del blog. He cambiado a la nueva solución de la página (https://escss.blogspot.com/2015/12/solucion-feed-blogger-sitemap.html) y parece que funciona a medias, seguramente por que he cometido algún error por mi falta de conocimientos. Es posible que este cambiada la direccion donde está alojado tu script ?

La dirección que tengo puesta es ( https://www.googledrive.com/host/0B5G3cbs08P16c3pVRmJ0aWUyYlU/ )

La anterior no me funciona ( https://dl.dropboxusercontent.com/u/166051553/sitemap.js )

Por favor, si puedes y cuando puedas, agradecería una respuesta.

Un saludo: Oscar

Jose Maria Acuña Morgado dijo...

Hola Óscar, por lo que he podido comprobar,
el propietario del blog EsCss ha cambiado el fichero original ( https://dl.dropboxusercontent.com/u/166051553/sitemap.js ) por este otro:

https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js

Si utilizas sitemapEsCss.js debería funcionarte si problemas :)

Saludos!!

Oscar TG dijo...

Así es como tengo puesto el script:

https://dl.dropboxusercontent.com/u/6104326/script%20prueva.txt

Oscar TG dijo...

Gracias, voy a probar si funciona...

Oscar TG dijo...

Tengo unas 650 entradas en el blog, pero solo mestra 150 entradas, y las repite hasta completar las 650 totales...he cambiado la dirección del script con la nueva que me has puesto, pero sigue todo igual !

Gracias

Jose Maria Acuña Morgado dijo...

He probado y funciona perfectamente con este código:
(revísalo bien porque tiene que funcionar bien)

<script>
var conf = {
sortBy: 'datenewest', // orderlabel - titleasc - titledesc - dateoldest - datenewest
lastPost: 0, // nº post con resalte
date: 0, // 0:no date - 1:date
newPost: '', // texto de resalte
newtab: 1 // 0:no target - 1:target: _blank
}
</script>
<ol class='all-post' id='all-post'>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js"></script>
<script src="http://www.clasicofilm.com/feeds/posts/default?star-index=1&max-results=150&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js"></script>
<script src="http://www.clasicofilm.com/feeds/posts/default?start-index=151&max-results=150&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js"></script>
<script src="http://www.clasicofilm.com/feeds/posts/default?start-index=301&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js"></script>
<script src="http://www.clasicofilm.com/feeds/posts/default?start-index=451&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js"></script>
<script src="http://www.clasicofilm.com/feeds/posts/default?start-index=601&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js"></script>
<script src="http://www.clasicofilm.com/feeds/posts/default?start-index=751&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="https://dl.dropboxusercontent.com/u/166051553/sitemapEsCss.js"></script>
<script src="http://www.clasicofilm.com/feeds/posts/default?start-index=901&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</ol>

Jose Maria Acuña Morgado dijo...

Si tienes alguna duda más, te pido que me la hagas llegar a través de la dirección de correo jm.acuna73@gmail.com para no eternizar la lista de comentarios en el blog :)

Muchas gracias Óscar!

ChicoOtaku dijo...

Muy Bueno :) 10 De 10 :3
Tengo Una Pregunta Se Puede Mostrar Las Entradas De Una Sola Etiqueta Pero Ordenado Alfabéticamente?
Espero Tu Respuesta

Jose Maria Acuña Morgado dijo...

Gracias ChicoOtaku,
las entradas por categorías ya aparecen ordenadas alfabéticamente como puedes ver en el índice de mi blog: http://jmacuna73.blogspot.com.es/p/indice.html (al menos hasta 150 artículos).

Si lo que quieres es que aparezcan las entradas de una sóla categoría, tendrías que ocultar a mano el resto de categorías a través de hojas de estilo pero eso tiene un inconveniente porque si mañana añades una nueva categoría al blog, tienes que añadirla como oculta de nuevo.

Un saludo!!

ChicoOtaku dijo...

Jose Maria Acuña Morgado cual seria el codigo para ocultar las demas etiquetas?

Jose Maria Acuña Morgado dijo...

Hola ChicoOtaku,
necesito que me des instrucciones más precisas para poder ayudarte:

- url de tu blog
- entrada que quieres visualizar (el resto se ocultan)

Si quieres, me puedes enviar un email a la dirección: jm.acuna73@gmail.com

Muchas gracias!!

Federico Abad dijo...

Saludos, José María. El 30 de agosto del año pasado te escribí para agradecerte cuánto me habían servido tus instrucciones para crear el índice alfabético en mi blog colaborativo http://vadebailes.blogspot.com.es/. En aquel momento no leí tu respuesta en la que me explicabas cómo incorporar la barra de tipo de ordenación porque el proyecto se quedó parado. Hoy lo he retomado en una clase y he tenido serios problemas, porque indiqué a los alumnos que podían postear lo que no estuviese en el índice, cuando lo cierto es que el índice solo mostraba 150 de las 286 entradas existentes.
He estado revisando los últimos cambios producidos en el script, y he intentado aplicar tu respuesta a Marhali (11 diciembre) y a Oscar TG (13 de enero), pero no me funciona de ningún modo: al ver la página aparece vacía.
He probado de diversas formas, copiando el código para ellos y pegándolo pero sustituyendo su URL por la de vadebailes.blogspot.com.es. He dejado y he omitido la sección inicial var conf, y he hecho lo mismo con y sin la sección style type="text/css". También he probado a reducir a dos las líneas con start-index, la de =1 y la de =151, porque los post a estas horas son 298. Incluso he puesto el sortBy como 'datenewest' por si fuese un impedimento el de 'titleasc'. El resultado ha sido infructuoso en todos los casos.

¿Tienes alguna idea de dónde está el fallo?

Me gustaría mucho aplicar el código de selección de ordenación que me diste. Te lo agradezco enormemente y te pido disculpas por no haberlo leído en su momento. Pero ahora mismo me conformaría con lograr que se mostrara el índice alfabético completo.
Muchas gracias por todo una vez más. Un saludo.

Jose Maria Acuña Morgado dijo...

Hola Federico,
no tienes porque pedirme disculpas, estoy para ayudar en la medida de lo posible.

Necesito que me facilites una dirección de correo electrónico para poder darte instrucciones precisas. Si no quieres que aparezca tu email en el blog, puedes enviármela a la dirección jm.acuna73@gmail.com

Gracias a ti :)
Un saludo!

Alejandro Mucientes dijo...

Hola, lo siento pero yo creo la página nueva tal y como dices en tu tutorial..., le doy a ver blog, y todo está igual. ¿Qué me falta por hacer? ¿Cómo paso las entradas que ya tengo creadas a esa nueva página que nos dices para hacer el índice?
Gracias por tu paciencia.

Jose Maria Acuña Morgado dijo...

Hola Alejandro, gracias por comentar.
Si sigues los pasos que describo en el artículo no deberías tener ningún problema para crear una página de índice.
No entiendo que puede estar fallando :(
Saludos.

Marta Ro dijo...

Hola Jose Maria,

muchas gracias por las instrucciones para el índice así como ayudar a "desentrañar" un poco el código, que viene muy bien para los que no tenemos ni idea de programación.

Lo he probado en mi blog y funciona más o menos bien, sin embargo tengo dos problemas:

1. Me numera todas las entradas con un número "1"
2. Si selecciono el orden alfabético que es el que me interesa, sólo muestra 6 entradas en lugar de todas las que tengo (lo sé, son pocas, pero más de 6 jeje)

¿Podrías echarme un cable? Gracias por adelantado

Jose Maria Acuña Morgado dijo...

Hola Marta,
gracias a ti por pasarte por mi blog :)

He estado revisando tu caso y el widget está fallando porque el jueves día 5 de septiembre de 2013 añadiste una entrada sin contenido.

En todo caso, he modificado el script y ahora funciona perfectamente.
He puesto la ordenación en modo ascendente como indicabas y he quitado los numeración de las entradas.

El código que tienes que añadir en tu blog (en negrita):


<div id="all-post" class="all-post"></div>
<script>
var conf = {
sortBy: 'titleasc', // forma en que se muestran las artículos publicados
lastPost: 3, // últimos post (3) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
newPost: 'Nuevo!!', // texto o marca que aparece en los últimos artículos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://www.googledrive.com/host/0B5G3cbs08P16RGo4MUhBWUFBNHM/"></script>
<script src="http://mipropiorecetario.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<style type="text/css">.all-post ol{list-style-type: circle;}</style>


Puedes configurar la forma de ordenación, los últimos post publicados (he puesto 3), mostrar o no la fecha de publicación, etc.

Un saludo!!

Marta Ro dijo...

Mil gracias, eres un sol! ahora sí que funciona a la perfección. La verdad es que cree esa entrada en blanco siguiendo las instrucciones para poner el índice que tenía hasta ahora. Como lo he cambiado por el tuyo ya no la necesito :).

Gracias de nuevo!

Jose Maria Acuña Morgado dijo...

No hay de qué, Ana ;)
Un saludo!!

javi29 dijo...

hola que tal, como sería el código si quiero que aparezcan solo todas las entradas que empiezan con la letra "A"
Es que en mi blog de acordes de canciones tengo mas de 1700 entradas y solo me salen las ultimas 500 en el indice que tengo, quisiera hacer un indice por cada letra aunque no se si así saldrían todas ¿o también solo saldrían las últimas 500?

y si no es posible ¿que me recomiendas?

gracias, saludos!!

Jose Maria Acuña Morgado dijo...

Hola javi29,
gracias por visitar el blog :))

Si sigues las instrucciones del post, debería funcionar perfectamente en orden alfabético. Haz la prueba y si tienes algún problemilla, te echo una mano.

Saludos!!

Sofia martin de nicolas dijo...

Buenas noches Jose María, ayer instale el indice y va genial el problema es que no me aparecen todas las entradas, he intentado con lo que le has dicho a otros compañeros y me da error, como puedo solucionarlo.

Aparte de esto, he colocado el menu encima de la entrada y no hay manera que las pestañas se pongan en horizontal, ¿puede ser un problema de html o de diseño?, gracias por tu ayuda

Ahhh, mi blog es http://www.milideasmilproyectos.com/, muchas gracias por tu ayuda

Sofía

Jose Maria Acuña Morgado dijo...

Hola Sofia, te he enviado un email con instrucciones precisas para que te funcione correctamente.

Gracias por visitar mi blog :))
Un saludo!!

Sofia martin de nicolas dijo...

Muchas gracias Jose María por tu tiempo y por atender mi pregunta, no te creas que todos lo hacen, te he mandado un correo, con alguna duda, he instalado lo que me has dado y solo me salen las anteriores a un año, lo he vuelto a instalar con lo que tenía y lo que me has dado y ahora me salen algunas más, que puedo hacer, en el blog tengo 729 recetas y con varias etiquetas en cada una, muchas gracias de nuevo, perdona que sea una pesada

Saludos

Jose Maria Acuña Morgado dijo...

No te preocupes Sofía :)
Te he contestado vía email.

Jose Maria Acuña Morgado dijo...

He hecho otra prueba ordenando por fecha de publicación más reciente,
parámetro sortBy con valor datenewest y me devuelve 905 entradas.

Sofia martin de nicolas dijo...

Buenos días Chema, perdona la lata que te esoy dando, he puesto como tu me dijiste la fecha y a mi solo me aparecen las entradas del 2015 y del 16, lo he dejado con fecha para que si puedes le eches un vistazo, perdona la tarrabarra,

saludos

Sofía

Natibel dijo...

Buenos días Jose María, muchas gracias por tu entrada.
Ha resultado sencillo de incorporar, pero...no aparecen todas las entradas en el índice, a pesar de que si pinchas en una categoría sí aparecen todas.
Llego un buen rato dando vueltas, pero no consigo descubrir qué he hecho mal, ¿podrías darme luz?
Mi blog es http://lacocinadenatibel.blogspot.com.es/
Mil gracias

Jose Maria Acuña Morgado dijo...

Hola Natibel,
gracias por visitar mi blog :))

El caso de tu blog es similar al de Sofía. Recientemente, Blogger cambió su api de tal forma que ahora no es posible traerse todos los artículos del blog de una sóla vez sino que hay que hacerlo por tramos o bloques de 150 post.

Para ello hay que hacer encaje de bolillo aunque afortunadamente tiene solución.
Necesito que me facilites una dirección de correo electrónico para poder darte instrucciones precisas. Si quieres salvaguardar tu privacidad, puedes enviármelo a la dirección jm.acuna73@gmail.com

Saludos!!

Marhali dijo...

Hola, José María, te escribí hace un tiempo porque no me salían todas las entradas en el índice de mi blog (sólo 150), de http://lauvaylaparra.blogspot.com. El caso es que me contestaste inmediatamente y el índice (de orden alfabético) ha estado funcionando un tiempo... y ya no me funciona :-( Me va a salir un boquete en la cabeza de tanto probar. Me lo podrías revisarrrr? El código que puse fue el de tu respuesta del 13 de enero. Te vamos a enterrar con este tema...

Jose Maria Acuña Morgado dijo...

Hola Marhali,
por lo que veo en el código fuente de tu blog, los índices que has establecido son erróneos.

Literálmente, has escrito:

<ol class='all-post'>
<script src="https://www.googledrive.com/host/0B5G3cbs08P16c3pVRmJ0aWUyYlU/"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?star-index=1&max-results=150&alt=json-in-script&callback=loadtoc"></script>
<script src="https://www.googledrive.com/host/0B5G3cbs08P16c3pVRmJ0aWUyYlU/"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?start-index=151&max-results=150&alt=json-in-script&callback=loadtoc"></script>
<script src="https://www.googledrive.com/host/0B5G3cbs08P16c3pVRmJ0aWUyYlU/"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?start-index=301&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="https://www.googledrive.com/host/0B5G3cbs08P16c3pVRmJ0aWUyYlU/"></script>
<script src="https://lauvaylaparra.blogspot.com/feeds/posts/default?start-index=451&max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</ol>

Cuando el orden de creación por tramos sería:

star-index=1&max-results=150
start-index=151&max-results=300
start-index=301&max-results=450
start-index=451&max-results=600
...

Saludos!!

Victoria Casas dijo...
Este comentario ha sido eliminado por el autor.
Jose Maria Acuña Morgado dijo...

Hola Victoria!

Veo que en tu blog, concretamente en la página http://todoconazucar.blogspot.com.es/p/indice-de-recetas_15.html utilizas un script de terceros que desconozco y no sabría decirte si su funcionamiento es correcto o erróneo.

Gracias por pasarte por aquí y comentar :))
Un saludo!!

Azucena Martin Guillen dijo...

Buenos días José María he puesto el índice como viene y tengo el mismo problema que Sofía no me pone todas las entradas, me podrías echar una mano y decirme como arreglarlo.
Gracias me estoy volviendo loca.

Jose Maria Acuña Morgado dijo...

Hola Azucena, te he enviado un email con instrucciones precisas para que te funcione correctamente.

Gracias por visitar mi blog :))
Un saludo!!

Cristina dijo...

Hola,yo no consigo que salga nada, si le doy a ver la página sale INDICE , pero no aparece ninguna lista... seguro que hago algo mal o me falta poner algo, no? Sólo tengo que crear la página, pegar el texto con la URL del blog y publicar? Se pega en HTML, y en opciones que elijo?
Gracias

Jose Maria Acuña Morgado dijo...

Cristina, sólo tienes que seguir los pasos que describo en el artículo.
Asegúrate de que estás copiando bien el texto, para ello puedes utilizar el bloc de notas de windows.

Si sigues atascada, puedes enviarme un email a jm.acuna73@gmail.com y te indico las instrucciones detalladas.

Un saludo!!

Dalia Sued dijo...

Hola José María,
Hice todo lo que pusiste en la entrada, pero al seleccionar como quiero ver las entradas no pasa nada (o sea no lo listea como elijo), mi indice es http://dsdoramas.blogspot.com/p/indice.html

Otra cosa, trabajas como freelance, tengo un problema con las publicaciones de Facebook que no sale la foto, he hecho todos los tutoriales que aparecen la red, pero no se soluciona, tampoco mi plantilla me deja poner el código de Pinterest, etc.. o sea tengo problemas con casi todas las redes para que se comparta bien, si puedes ayudarme con esto por favor me avisas por esta vía para hacerte llegar mi email.. gracias :)

Jose Maria Acuña Morgado dijo...

Hola Dalia Sued,
he accedido al índice de tu blog y veo que has seguido los pasos pero falta un pequeño detalle para que funcione correctamente.

En el script <script src="http://dsdoramas.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> falta introducir un id con valor feedPost

Es decir, el código correcto es:

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

En cuanto a lo segundo, no estoy seguro de poder ayudarte pero si te parece oportuno, me envías un email a la dirección jm.acuna73@gmail.com detallando todo lo que puedas y vemos que se puede hacer.

Gracias por visitar el blog!!
Si quieres, puedes llamarme Chema :))

Un saludo!!

Sr. Sol dijo...

Hola José,

Antes que nada muchas felicidades por tu blog, es muy enfocado y este post me ha servido bastante. Continúa así!!!

Los único que no pude modificar fue el color y tipografía del mensaje de "Nuevo" en las publicaciones más recientes. Me gustaría que fuera rojo por ejemplo.

https://capturadealmas.blogspot.mx/p/blog-page_28.html


Ojala puedas ayudarme,
De antemano gracias y saludos

Jose Maria Acuña Morgado dijo...

Muchas gracias por visitar el blog, Sr. Sol :)

En la parte de codificación dónde pone literalmente:


.all-post ol li strong em{
font-style:italic;
color:#d24f18
}


tienes que eliminar el elemento em, de la siguiente forma:


.all-post ol li strong{
font-style:italic;
color:#d24f18
}


Ahora sí puedes jugar con los estilos tipo de letra, color, etc.

Saludos!!

Zontir dijo...

Hola! Una saludo Jose! Excelente blog amigo, me pasaba por aquí porque no tengo muchos conocimientos sobre html o xml... Me encantaría tener el indice como el tuyo pero con el background del panel de selección de ordenamiento en color negro... Me eh leído todos los comentarios a ver si alguien tenia esa misma inquietud y si!. Alguien mas quiso tener el panel, pero eh probado el código en verdad no se como utilizarlo, donde colocarlo si en el principio, en lo ultimo. Eh probado en varias partes pero la verdad no doy donde es. Jejeje
Si fueras tan amable de colocar el código. Te lo agradecería muchísimo

Me encantaría que me diera una mano con esto, esperando tu pronta respuesta me despido!

Un saludo!

Jose Maria Acuña Morgado dijo...

Hola Zontir,
facilítame una dirección de email y te doy las instrucciones precisas.

Si quieres conservar tu privacidad, puedes enviármela a jm.acuna73@gmail.com

Saludos!!

Sr. Sol dijo...

Disculpa la demora para responder, muchas gracias por tu apoyo y filantropía.

En seguida probaré lo que me comentas

Saludos

Ángel López González dijo...

Muchas gracias por el listado, es estupendo.

No consigo eliminar los 1. que aparecen en todas las entradas, me gustaría, bien eliminarlo o que fueran correlativos. He visto en comentarios anteriores que esta pregunta ya te la han hecho dos veces. He seguido lo que les dices pero no lo consigo.

Te dejo el enlace a ver si me puede dar solución.

http://www.alopezletrado.com/p/blog-page.html

Anticipadas gracias.

Jose Maria Acuña Morgado dijo...

Hola Ángel,
encantado de que te pases por mi blog!!

La solución es sencilla pero requiere de conocimientos de programación a nivel de css.
Pasos a seguir:

1- en el bloque de código que has introducido en tu índice busca la línea .all-post ol li strong {
2- a continuación del cierre de la llave } de ese bloque de código introduce (en negrita):


.all-post ol li {
list-style-type: none;
}


Si en lugar de ocultar la serie numérica deseas que aparezcan círculos, discos o cuadrados, sustituye el término none por circle, disc o square.

Espero haberme explicado con suficiente claridad :)
Saludos!!

Ángel López González dijo...


Perfecto, muchísimas gracias.

A modo de agradecimiento, recomiendo tu blog.

Gracias.

https://twitter.com/Alopez_Letrado/status/761659180876955648

Mispli dijo...

Hola JM, lo primero felicidades por tu blog es genial. Yo tengo uno privado y quisiera poner un índice pero no me deja. Se puede hacer de alguna forma? gracias

Jose Maria Acuña Morgado dijo...

Hola Mispli,
lo que sugieres no es posible ya que para la implementación del índice hay que acceder a la API de Blogger de acceso público.

Saludos!!

Adrian Delgado dijo...

Es posible agregar una imagen de la entrada y un extracto del texto? gracias.

Jose Maria Acuña Morgado dijo...

Gracias por la visita al blog, Adrian.

Siento decirte que el widget está diseñado para mostrar los títulos de los post.

Un saludo!!

Buenas ideas dijo...

Hola, gracias por el código... Me funciona, pero con una "pega": no aparecen todas las entradas de la categoría correspondiente... Es decir: en la categoría "Android" aparecen sólo 3 entradas... cuando en realidad son 14. Y así en todas, no se visualizan el nº exacto de entradas de cada categoría.

Es un blog de software libre: http://juegoabaloriossoftware.blogspot.com.es/

¿A qué puede ser debido?... Gracias anticipadas!

Tapestry Workerman dijo...

Hola José María.

Me había desaparecido el contenido de la página y gracias a tí, lo he recuperado ;)

Este inconveniente no es el único que me ha surgido de un tiempo a esta parte, al principio fueron artilugios que dejaron de funcionar correctamente, más concretamente la representación de imágenes del propio blogger, y otros pausaron su reproducción automática aún estando presentes en la página.

Hay que darle play para que arranque y me gustaría que se reprodujeran automáticamente, si supieras/pudieras sacarme del entuerto, te ponía un par de velas, jeje...

Gracias por tu inestimable ayuda ;)

Un saludo, Tapestry.

Jose Maria Acuña Morgado dijo...

Hola Tapestry Workerman,
no entiendo tu pregunta.

En este post hablo de como crear un índice para Blogger y me preguntas por el slider de presentación de imágenes, o eso creo.

Podrías darme más detalles, gracias.

Ángel López González dijo...

Buenas noches José Maria:

Como figura en comentarios más arriba, instale la lista, y estuvo funcionando perfecta durante meses.

De repente un día entre y me di cuenta de que no iba.

El caso es que normalmente, no va, pero abriendo y cerrando la pagina, actualizando en el editor de blogger, alguna vez (las menos, sí va).

No le encuentro explicación al problema....

A ver si me puedes ayudar.

http://www.alopezletrado.com/p/blog-page.html

Gracias.

Ángel López González dijo...

Aclaración: he probado el código cortándolo y pegándolo en un probador de código y sale perfecto...luego entiendo que es algo externo lo que le afecta...

Ángel López González dijo...

rectifico, funcionó, pero solo una vez....me estoy volviendo loco....

Jose Maria Acuña Morgado dijo...

Buenos días Ángel,
no te vuelvas loco, la explicación es bien sencilla.

Inicialmente, tenía alojada el script de carga del índice en Google Drive pero su servicio de alojamiento web dejó de estar disponible desde el 31 de agosto del presente año.
Por tanto, tuve que migrar el código a otro repositorio de acceso público.

Todas las entradas del blog en las que importaba librerías alojadas en Google Drive están actualizadas y ahora apuntan a GitHub.

En tu caso concreto, accede al widget y:

- sustituye la línea https://www.googledrive.com/host/0B5G3cbs08P16RGo4MUhBWUFBNHM/ por
https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js

Un saludo y perdón por los inconvenientes causados.

Oscar TG dijo...

Hola José Maria, tenia tu script (el alojado en google drive) ahora ya no funciona y lo he cambiado por el nuevo (Github) pero no me funciona, esta claro que por mi ignorancia en estos temas. Serías tan amable de comentar que es lo que hago mal.

http://www.clasicofilm.com/

Agradecido y un saludo: Oscar

Jose Maria Acuña Morgado dijo...

Hola Óscar, el problema es que utilizas el protocolo seguro https para trearte los post a través de la lectura del feed de tu blog y el navegador no sabe resolverlo:


https://www.clasicofilm.com/feeds/posts/default?star-index=1&max-results=150&alt=json-in-script&callback=loadtoc


Tienes que usar el protocolo http:


http://www.clasicofilm.com/feeds/posts/default?star-index=1&max-results=150&alt=json-in-script&callback=loadtoc


Saludos!!

Oscar TG dijo...

Hola José Maria, lo he cambiado (https por http) y sigue sin funcionar...He cambiado también la linea de dirección del script de https a http. Al refrescar la página aparece momentaneamente el listado, pero desaparece al instante.

Siento persistir en el problema, soy muy torpe...me puedes ayudar por favor ?

Saludos: Oscar

Oscar TG dijo...

Hola José Maria, ya esta solucionado y funcionando. Quiero agradecerte tu gran ayuda !

Un fuerte saludo.

Oscar.

Oscar TG dijo...

Me he adelantado en decir que estaba solucionado...solo salen 150 resultados y tengo unos 1500...como hacer para que salgan todos ?

Perdón por mi pesadez, gracias.

Oscar

Jose Maria Acuña Morgado dijo...

Hola de nuevo Óscar,
a decir verdad a mi también me tiene un poco desconcertado.
He estado haciendo pruebas con la url de tu blog y ahora no funciona, no sé si será debido a algún cambio en el algoritmo de lectura de los feeds.
También he probado a cargar los script de forma dinámica y de esta forma sí muestra resultados pero me devuelve un máximo de 865 entradas (te envío el código de pruebas por email).

Lo siento pero no te puedo dar más datos porque desconozco que está ocurriendo.
Un saludo!!

Anónimo dijo...

Hola,
Tengo un blog de recetas y mi índice de recetas ha dejado de funcionar. Estaba usando un código que copie en su momento de tu post pero que ahora ha dejado de funcionar.
He probado a cambiar
script src="https://www.googledrive.com/host/0B5G3cbs08P16c3pVRmJ0aWUyYlU/">
por
script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js">
pero no consigo que vuelva a funcionar. Te agracedería que me indicaras que puedo hacer para que vuelva a funcionar...
Un saludo y gracias por adelantado

Jose Maria Acuña Morgado dijo...

Hola,
he hecho pruebas en local con tu blog http://entrepotasgalegas.blogspot.com y funciona correctamente.

El código del widget (en negrita):


<div id="all-post" class="all-post"></div>
<script>
var conf = {
sortBy: 'orderlabel', // forma en que se muestran las artículos publicados
lastPost: 10, // últimos post (10) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
newPost: 'Nuevo!!', // texto o marca que aparece en los últimos artículos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="http://entrepotasgalegas.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Entre Potas Galegas dijo...

muchas gracias por tu ayuda, he vuelto a comprobarlo y ahora funciona el índice perfectamente!! Un saludo

Jose Maria Acuña Morgado dijo...

No hay de qué :)

Jesús Delgado dijo...

Hola, llevo varios días como loco intentando que me vuelva a funcionar el indice de recetas, y ahora con tu código html ya me funciona, aunque se parece mucho a los demás, pero este si que funciona. Gracias.

Saludos.

Jose Maria Acuña Morgado dijo...

Gracias a ti Jesús :)

Un saludo!

La cajita de Nieves y Elena dijo...

Hola Jose María, tenemos un blog http://www.lacajitadenievesyelena.com/ en el que el índice, después de rebuscar mucho en internet códigos y mas códigos no sale como queremos, no salen todas las entradas y como todas tienen varias etiquetas no las reparte en cada una, Sofía, una bloguera que ha solucionado este problema contigo nos ha dicho que te preguntáramos, espero que nos puedas ayudar.
Nuestro email es: lacajitadenieveselena@gmail.com
Un cordial saludo
Nieves y Elena

Jose Maria Acuña Morgado dijo...

Gracias por confiar en mi ;)
Os he enviado un email a la dirección facilitada.

Un saludo.
Chema.

Ángel López González dijo...

Nada que perdonar, mil gracias José María, solucionado, eres un crack!!!!

P.A Cervantes dijo...

hola necesito ayuda para crear un indice este es mi blog y me gustaria poner un indice donde salgan numerados los nombres de los capitulos de mi fic y que al darle click nos mande al capitulo en cuestion

intente con este codigo que nos ofreces , le cambie parametros a dateoldest (desde el prologo hasta el capitulo 95)le puse la direccion de mi blog :

https://winchestermexicopue.blogspot.mx/

pero no me salio por favor no dejen de responderme gracias


Marta Ro dijo...

Hola de nuevo José María, ya hace tiempo que me ayudaste con este tema y ahora me gustaría ir un pasito más adelante.

Gracias por haber resubido los scripts a otro servidor, yo estoy actualizando el índice de mi blog después del cambio del servidor y quería aprovechar para adaptarlo al cambio de imagen que hice en mi página.

El caso es que me gustaría sustituir el texto "Nuevo!!" por una pequeña imagen que he diseñado y que tengo alojada online. Aunque he avanzado un poquito sigo bastante pez en estos temas, y lo poco que he intentado no me ha dado resultado. ¿Sería viable hacerlo a través del CSS?

Muchas gracias de nuevo!

Marta

Jose Maria Acuña Morgado dijo...

Hola Marta,
me gustaría poder ayudarte pero entro en tu blog, en la sección ÍNDICE DE RECETAS (http://www.marocooking.com/p/indice-alfabetico_18.html) y aparece la página vacía.
Cuando lo tengas resuelto, me avisas y le echo un vistazo a lo de la imagen.

Un saludo!

Marta Ro dijo...

Buenos días Jose María, lo siento por el problemilla, ya está solucionado. Como no tengo mucha idea de programación no sé si será fácil incluir la imagen o no, si no lo es lo dejaría así y ya está.

Y ya que estoy aprovecho para preguntarte otra duda que tenía. ¿Cómo puedo ocultar del índice las entradas con una etiqueta concreta?

Muchas gracias de nuevo por tu ayuda.

Un saludo,

Marta

Jose Maria Acuña Morgado dijo...

Hola Marta,
a la primera pregunta (incluir imagen), la respuesta es sí

Pasos a seguir:

1- el parámetro newPost tiene que tener valor, en este caso ponemos un blanco en codificación javascript

newPost: '\xa0'

2- añadimos la siguiente clase al final y antes del cierre de la etiqueta </style>

#all-post ol li strong::after{
content: url(https://imagen.png);
}

Sustituye la dirección https://imagen.png por la de tu imagen

En cuanto a lo segundo (ocultar determinadas entradas), lamento decirte que no es posible ya que no disponemos de un identificador para cada item.

Un saludo!!

Marta Ro dijo...

Mil gracias Jose María, el índice ha quedado genial, eres una máquina!

En cuanto al tema de ocultar entradas, no pasa nada, es mal menor.

Muchas gracias por tu trabajo desinteresado. Un saludo!

Marta

Jose Maria Acuña Morgado dijo...

No es para tanto ;)
Gracias a ti Marta.

Saludos!!

Condotosoyyo dijo...

Muchas gracias por el aporte, me funcionó de una.
http://www.condotosoyyo.com/p/indice_20.html

Jose Maria Acuña Morgado dijo...

Me alegro mucho de que te haya sido útil :)
Gracias por visitar el blog y por comentar.

Un saludo!

Ricardo García dijo...

Hola josé, excelente artículo, pero no me funciona cuando publico la página con el código (https://alfadelcentauro.blogspot.com), más en la vista previa sí aparece como debería ¿por qué? ¿què podría estar haciendo mal?. Allí te dejo 2 screen shot.

https://drive.google.com/open?id=0B5FL7VzERLOTQkl4Y2lwMkg1VVE

Jose Maria Acuña Morgado dijo...

Hola Ricardo,
he probado a introducir el código relativo a tu blog y me funciona correctamente.
El código es:

<div id="all-post" class="all-post"></div>
<script>
var conf = {
sortBy: 'orderlabel',
lastPost: 10,
date: 0,
newPost: 'Nuevo!!',
newtab: 1
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="https://alfadelcentauro.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


Un saludo!

Ricardo García dijo...

Lo pegué y nada, sigue saliendo correctamente en vista previa pero no cuando lo publico, mi enlace no funciona :(

Jose Maria Acuña Morgado dijo...

Prueba con este otro link al que añado el parámetro alt=json:

https://alfadelcentauro.blogspot.com/feeds/posts/default?alt=json&max-results=9999&alt=json-in-script&callback=loadtoc

He hecho una prueba en local y funciona bien el índice de tu blog con ambos script.

Ricardo García dijo...

Que raro, me sigue sin funcionar, y el gadget de etiquetas lo tengo activado, ¿no me faltará algo más activar, veo que la dirección dice "feed" no será eso que no he configurado?

Jose Maria Acuña Morgado dijo...

Dime la url del índice de tu blog y le echo un vistazo, please.

Ricardo García dijo...

¿Es el mismo de cada etiqueta? porque no me aparece un url general, solo por etiquetas: https://alfadelcentauro.blogspot.pe/search/label/Archivo%20de%20Sue%C3%B1os

Jose Maria Acuña Morgado dijo...

No entiendo lo que me quieres decir Ricardo,
lo que te estoy pidiendo es el página de tu blog dónde has creado el índice.

La de mi blog es
http://jmacuna73.blogspot.com.es/p/indice.html

Ricardo García dijo...

Ya creo haber encontrado el problema. No le di "guardar disposición" en la pestaña diseño después de "actualizar" al agregar la página a la columna. Borré la página y volví a pegar el código. Gracias por tomarte el tiempo de responder Jose!, saludos desde Perú :)

https://alfadelcentauro.blogspot.pe/p/contenidos.html

Jose Maria Acuña Morgado dijo...

No hay de qué, Ricardo.
Otro saludo para tí ;)

Prof. Claudio Maza dijo...

Hola Jose Maria, antes que nada agradezco el aporte que has hecho y valoro tu constancia al momento de responder los comentarios.

Me ha funcionado de maravilla el indice pero me gustaría saber como hacer para que conste en la etiqueta de cada apartado entre parentesis el numero de elementos que están incluidas del modo por ej.: "avisos (5)" si tuviese 5 entradas.

Ademas de lo anterior como ubicar los elementos exactamente debajo de la etiqueta sin ese espacio tab.

Desde ya muchas gracias y espero tu respuesta. Saludos.

Jose Maria Acuña Morgado dijo...

Hola Prof. Claudio Maza,
necesito conocer la página Indice de tu blog (su url) para poder realizar pruebas.

Gracias por visitar el blog y por comentar.
Un saludo!

Prof. Claudio Maza dijo...
Este comentario ha sido eliminado por el autor.
Prof. Claudio Maza dijo...

Hola Jose Maria, gracias por tu interés. Mi blog esta en construcción y su dirección es http://profclaudiomaza.blogspot.com.ar/

La pagina indice es http://profclaudiomaza.blogspot.com.ar/2015/07/indice.html

Y si lo que solicitas en realidad es el script puedo enviartelo por correo electronico.

Espero tu valiosa opinión. Desde ya muchas gracias.

Paco Ruiz dijo...

Hola Jose
Llevo mucho tiempo con tu código y script en mi blog y me viene de perlas. Gracias.

Este verano dejó de funcionar pero cambié algo (que no recuerdo ahora) y volvió a funcionar.
http://tecnologia-escolar-eso.blogspot.com.es/

De nuevo no funciona y ando perdido.
Te comento que pongo etiquetas tipo "meta=Paco Ruiz" (por poner algo) para que no salgan categoría (no sé si se podría hacer más simple).
Solo necesito una lista ordenada por fechas en la que se indique cuáles son los más nuevos. El script va en un panel lateral (Bitácora).

Cuando tengas un rato y si no es mucha molestia, a ver si puedes echarle un vistazo y puedes indicarme cómo lo pongo en marcha de nuevo.

Gracias
Paco Ruiz

PD.
¿Podría poner todo el script completo en el panel? Por supuesto indicando autor y procedencia.

Paco Ruiz dijo...

NADA, NADA, ni echarle cuenta al comentario anterior
He seguido dándole vueltas al código y ya funciona de nuevo el listado de entradas

Saludos
Paco Ruiz

Jose Maria Acuña Morgado dijo...

Hola Paco,
me alegro de que te funcione :)

Un saludo!

Jose Maria Acuña Morgado dijo...

Hola Prof. Claudio Maza,
he podido conectarme al índice de su blog y he realizado los ajustes necesarios para llevar a cabo las dos peticiones que me hizo.

Necesito un email para enviarle el código modificado.
Si prefiere salvaguardar su intimidad, puede hacerlo en la dirección de correo jm.acuna73@gmail.com

Gracias!!

Adrian Delgado dijo...

Hola amigo, primero que todo gracias por la ayuda y por el codigo, lo utilizo mucho en mi web.

El problema que tengo es que en una etiqueta en particular tengo mas de 150 entradas, es posible mostrarlas todas?

Te dejo el enlace:
http://www.vampiro.cl/2016/09/taumaturgia-rituales.html

Gracias y perdona las molestias.

Jose Maria Acuña Morgado dijo...

Hola Adrián,
he estado haciendo algunas pruebas con el link que me has proporcionado y no hay manera de que muestre más de 150 entradas por categoría, al margen del tipo de ordenación.
Como he comentado anteriormente, es debido a un cambio en las apis de Blogger :(

Un saludo!!

RG Animex dijo...

Hola :D necesito Ayuda me podrías decir si se puede ordenar por etiquetas digamos en una solo pagina solo se muestre las entradas de la etiqueta "ACCION" :)

Aqui mi web: http://www.rganimex.com/p/indice.html

Jose Maria Acuña Morgado dijo...

Gracias por la visita al blog, RG Animex.

Siento decirte que el widget está diseñado para mostrar todos los títulos de los post.

Un saludo!!

Dolores Platt dijo...

Buenas Tardes muchas gracias por este post... queria ver si se puede hacer para una sola categoria me gustaria que en mi blog www.laloladice.com en una pestana me aparezcan solamente las entradas que esten catalogadas como resena...

y en el indice http://www.laloladice.com/p/indice-de-recetas.html segui unas instrucciones hace rato pero no me aparecen toooodas las entradas por categoria, tu me podras ayudar?
Gracias!

Jose Maria Acuña Morgado dijo...

Gracias a ti por visitar el blog :)

1- este gadget se ha implementado para mostrar el índice completo del blog por lo que mostrará todas las categorías incluidas en el mismo.

2- he podido comprobar que en el índice de tu blog utilizas código diferente al que muestro como ejemplo aquí. En todo caso, he hecho una prueba en local y las entradas que facilita el widget devuelve los mismos resultados.

Ejemplo:

<div id="all-post" class="all-post"></div>
<script>
var conf = {
sortBy: 'orderlabel', // forma en que se muestran las art?culos publicados
lastPost: 10, // ?ltimos post (10) a los que les pongo una marca
date: 1, // 0:no aparece la fecha de publicaci?n | 1:mostramos la fecha de publicaci?n
newPost: 'Nuevo!!', // texto o marca que aparece en los ?ltimos art?culos
newtab: 1 // 0:abre link en la misma ventana | 1:abre link en ventana nueva
}
</script>
<script src="https://cdn.rawgit.com/jmacuna/index-blogger/master/index-blogger.js"></script>
<script src="http://www.laloladice.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Prof. Claudio Maza dijo...

Hola Jose Maria, te escribo nuevamente recurriendo a tu consejo. Tu script me ha sido de mucha ayuda y quisiera saber si hay alguna manera de modificarlo para que muestre las categorias unicamente y clickearlas y recién en ese momento desplieguen su contenido.

Espero tu respuesta. Gracias!

Jose Maria Acuña Morgado dijo...

Hola Prof. Claudio,
como podrás comprobar, te he enviado un email con algunas instrucciones al respecto.

Saludos!

Carli dijo...

Hola, qué tal? Mi nombre es Carli y me encantaría tener un indice como el que tienen en esta página, ahi al costado, que ordena a las entradas por año, mes y eso... intento poner el código pero me lo publica como si fuese una entrada!
Yo quiero un indice igual a ese, y mi blog es hhtp://bienvenidoamicerebro.blogspot.com.ar
Alguno me puede pasar el link tal cual lo tengo que poner? Es en el apartado de "Paginas"? Porque me lo sube como entrada. Espero la respuesta y muchas gracias!

Jose Maria Acuña Morgado dijo...

Hola Carli,
no puedo acceder a tu blog porque no es de acceso público (tu blog solo admite a lectores invitados).

En todo caso, si quieres crear el índice como sección y no como artículo, lo debes hacer desde el apartado Página.

Gracias por visitar el blog.
Un saludo!

Ricardo García dijo...

Hola José, sabes el atributo "nuevo!!" se queda en todos los enlaces de mis contenidos, y no en los que van apareciendo como nuevos, ¿cómo podría mejorarlo? saludos

https://alfadelcentauro.blogspot.pe/p/contenidos.html

Jose Maria Acuña Morgado dijo...

Hola Ricardo,
el atributo lastPost tiene valor 10.

Eso quiere decir que aparecerá el texto Nuevo!! en los diez últimos artículos publicados en tu blog. Puedes cambiar ese valor para que muestre los que consideres oportunos.

Un saludo!!

Ricardo García dijo...

Muchas gracias José María! :D

Jose Maria Acuña Morgado dijo...

No hay de qué, Ricardo ;)