Lista de entradas al azar | Oloblogger Ya hay una buena colección de entradas en este blog dedicadas a diferentes cacharritos que muestran cosas de forma aleatoria. Pero todavía n...

4 de enero de 2010

Lista de entradas al azar

Ya hay una buena colección de entradas en este blog dedicadas a diferentes cacharritos que muestran cosas de forma aleatoria. Pero todavía nos quedaba uno pendiente. Se trata de un gadget javascript, que nos muestra un número de enlaces de texto predeterminado por nosotros, que apuntan a otras tantas entradas escogidas de forma aleatoria.

Estas que hay a continuación, son un ejemplo y refrescando podreis comprobar que cada vez salen unas entradas distintas:




La implantación es muy sencilla, como casi siempre.

Desde Elementos de Página añadimos un nuevo gadget tipo HTML/JavaScript y allí pegamos lo siguiente:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Antes de Guardar, cambiamos NOMBRE_DE_TU_BLOG por el propio. Una vez salvado, ya podemos moverlo a otra posición de la barra lateral o a otra ubicación.

El valor de var maxEntries = 10; es el que determina el número de entradas a mostrar y por tanto, el que habria que cambiar para mostrar más o menos entradas.

Creando el ID random-posts y las clases para listas correspondientes, podremos personalizar la apariencia de salida. Esto ya habría que insertarlo en la plantilla, antes de b:/skin. Para ponerlo en el propio gadget, habría que hacerlo entre las etiquetas <style type="text/css"> y </style>

#random-posts {
/* Estilo general */
}
#random-posts ul {
/* Estilo general de la lista */
}
#random-posts ul li {
/* Estilo general de cada elemento de la lista*/
}

¿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

60 comentarios :

  1. Hola!!!!!!!!


    Que el 2010 sea tu mejor año, y seguro que todo depende de vos, poniéndote metas claras y haciendo todo para cumplirlas…..

    Un abrazo de oso.

    ResponderEliminar
  2. Los deseos son recíprocos Común. Un saludo.

    ResponderEliminar
  3. Oloman!! Gracias por el interés, si que he visto la respuesta, pero quiero hacerlo con tiempo, que me cuesta... después de reyes lo miraré. Si lo preguntñe en varios sitios ;)

    Muchiiisimas gracias!!!

    Besitos y Felices Reyes!!!

    ResponderEliminar
  4. Gracias por toda la ayuda que nos prestas, acabaremos haciendo algo en condiciones, blogger mediante.

    Saludos y buen 2.010 !

    ResponderEliminar
  5. Siempre se aprende algo nuevo...:)

    Hola!!!
    Tengo un problema y noce si ese problema ya lo abran posteado en el blog..Se trata de un gadget de picasa para mostar las ultimas fotos que subo a mi blog o albunes de picasa pero el problema es que funciona mal en muchos blogs los primeros dias va todo bien y despues deja de mostar las fotos nuevas y se queda ahi.. Tienes alguna solucion? o gadget para renplazarlo??

    Desde ya Gracias y Suerte!! :)

    ResponderEliminar
  6. Anónimo5/1/10, 4:38

    Feliz 2010 oloman gracias por tu ayuda

    ResponderEliminar
  7. Yo también me adhiero a los saludos...
    Feliz comienzo de año Oloman.
    Tengo una consulta:
    Tengo un problema con el favicon de uno de mis blogs (http://a4000.blogspot.com/)Ya no aparece mi favicon sino el de Blogger. Al principio salía normal, ahora ya no.
    Empezó desde que incluí el widget que permite mostrar otros blogs actualizados (Feed)
    ¡Quiero ver mi favicon!
    :)

    ResponderEliminar
  8. Creo que es posible hacer los mismo, pero con una etiqueta en concreto, ¿verdad? Es cambiar lo que hay antes del interrogante en:

    <script src="http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>

    por

    http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/default/-/ETIQUETA

    Voy a probar a ver si me sale.

    ResponderEliminar
  9. Vale, funciona perfectamente, es posible hacerlo por etiquetas también.

    Lo que pasa es que no lo he hecho todavía en el blog bueno, sino en uno de pruebas, pero funciona.

    ResponderEliminar
  10. ** Encar **, nada, nada... a tu ritmo :)

    Blogger mediante, Agente Mulder, Blogger mediante ;). Gracias y te deseo lo mismo.

    Bilosony2™, los dos únicos sistemas que conozco con Picasa, son este y este.

    Anónimo, no hay de qué y también un feliz año para tí.

    Felicidades Reyqui. No sé que es lo que pasará, pero yo sí lo veo: un cuadrado dividido en cuatro con colores rojo y azul y con una R en el centro.

    José GDF. Siempre aportando ideas y detalles. Muchas gracias por la observación.

    ResponderEliminar
  11. Hola !

    Casi nunca escribo pero siempre entro, aunque no incluya muchas de las cosas que aki nos enseñas, hoy, te lo agradezco multiplicado por 2, una, porque soy asiduo lector (ya lo haia dicho, no?) y la otra, que ahora SI incluí tu recomendacion :D y me gusto!....

    Gracias nuevamente, gustazo siempre el entrar aqui!

    ResponderEliminar
  12. Bueno, yo tampoco tengo incluidas todas las cosas sobre las que he escrito. Están para usarse cuando hacen falta, ni antes, ni después. Un saludo.

    ResponderEliminar
  13. muy bueno, para algo servira en mi blog, una vez mas gracias por la ayuda que nos brindas, Saludos!!!

    ResponderEliminar
  14. Parecía complicado, pero probé y funciona de lo lindo.
    Saludos Oloman.

    ResponderEliminar
  15. ¿Cómo puedo poner un buscador de post al azar como el tuyo? He utilizado el buscador y no aparece nada.

    El mail de mi blog es:elartedelafotografiajavierlota@yahoo.es

    GRACIAS

    ResponderEliminar
  16. Hola Javierlota.

    El buscador que hay aquí muestra resultados "normales" de búsqueda. Seguramente te refieres a sacar UNA entrada al azar.

    Si es eso, en el enlace lo tienes. Un saludo.

    ResponderEliminar
  17. Hola Oloman: ¡Feliz año!
    Estoy probando en mi test-blog un truquillo que encontré en Templates Novo Blogger (http://templatesparanovoblogger.blogspot.com/2009/08/isfirstpost-exemplo-2.html) para resaltar el primer post de la página inicial -o sea, el último que se publica- y me ha quedado de vicio (aunque he tenido que apañarle alguna cosuca, je!) y me quedaría mejor si pudiera presentar el post con el consabido "Leer más" ya que normalmente mis entradas son largas.
    En la entrada de prueba le coloqué el leermás de blogger, pero no se ve enlace donde clikar para seguir leyendo :( y entonces ya me hice el lío, por el que te hago la consulta. ¿Qué puedes aconsejarme?
    De antemano, gracias por tu generosidad.

    Is mise: Mujerárbol en blog de pruebas http://porprobar3.blogspot.com/

    ResponderEliminar
  18. Si haberlo visto muy a fondo, la cosa parece que trata de crear una clase distinta (first) e incluir esta clase mediante un condicional para el primer post.

    El sistema de Blogger no lo conozco, pero me suena que hay que ponerlo manualmente en todos los posts. Por otra parte, me ha parecido ver que usas el mismo sistema que yo para hacer los posts resumidos. ¿Por qué no pruebas a meter esto último dentro del condicional para el FirstPost? Sin borrarlo de su ubicación original, lo copias aquí también.

    Creo que puede funcionar, pero no lo puedo ver porque el código ya sale interpretado.

    ResponderEliminar
  19. ¡Horrores fritos, Oloman! en el test-blog ha salido estupendamente tal como me decías, pero en el definitivo... nooor. Debo haber metido la patuca en algo, porque me sale un mensaje de que un "head" no tiene cierre, y no encuentro donde está el fallo. Me temo que tendré que cargar la plantilla original (tengo copias, uff).
    Gracias por tu interés, de todos modos. Grrandeee.

    ResponderEliminar
  20. Por supuesto: la que está frita es la de la pregunta 17, M.A.
    Estoy viendo que, al introducir los nuevos códigos, Blogger se los adapta por su cuenta, y de ahí que hayan desaparecido cosas inexplicablemente. No he sido yo quien las ha quitado sino ELLO mismo... ayss, que latas.
    Bueno: me consuela ver que la clase FirstPost ha quedado Okis, pero no hace caso a los estilos que le he puesto; y además persiste el problema de que no consigo que aparezca resaltada
    Eeen fin.
    http://mjarb.blogspot.com/

    ResponderEliminar
  21. No sé si has puesto el código del FirstPost, pero en este último blog que me has puesto, lo que seguro que no hay es clase "first" alguna. Así es imposible que coja el estilo.

    ResponderEliminar
  22. ... No, era en el anterior, donde me quedó estupendamente.
    En mjarb entre los cambios que hace la plantilla blogger al guardarse y algún error que sin duda cometí no me salió, hice un buen lío (con avisos de error q no supe arreglar) y tuve que cargar la plantilla de nuevo. Por cierto: me sorprendió que, al cargar desde una copia de hace pocos días, no se me fue ningún widget, ¿es eso normal?
    Volveré a intentar lo del First en otro momento. Gracias de todos modos, por tu interés y forma de enseñar.

    ResponderEliminar
  23. Sí es normal, porque la plantilla almacena también los espacios y los nombres de los gadgets, así que cómo coincidían con los que tenías actualmente, se trasvasaron bien.

    El problema surge cuando la plantilla guardada tiene por ejemplo 4 gadgets y tú actualmente tienes 6 y además tres de ellos son distintos a los que había en la plantilla guardar ¿Donde meter tantos y cómo insertar los tres nuevos? Pues de ninguna manera. Ahí es cuando la cosa se fastidia.

    ResponderEliminar
  24. ¿Cómo puedo poner esto como tú?

    Oloman © 2009
    Basado en un diseño de Evan Eckard © 2008,
    bloguerizado por GosuBlogger
    Aviso legal. Política de privacidad.

    ResponderEliminar
  25. Depende de tu plantilla. Es sólo un texto con enlaces. En un principio se puede colocar en un gadget HTML/JavaScript que luego tendrías que mover justo debajo del cuerpo de las entradas.
    Otra manera es insertando el código directamente en la plantilla. Necesitaría tu URL para una mayor concreción.

    ResponderEliminar
  26. Anónimo1/2/10, 2:29

    Buenas... Me gustaría poner delante de cada frase, de cada título de las enradas un guión o un punto para diferenciarlos un poco. ¿Cómo lo puedo hacer?.

    Muchas gracias

    ResponderEliminar
  27. Hola

    Tendrías que añadir a la parte del estilo los ID que se dan en la última parte del post. Desde allí podrás configurar las listas (UL, LI) para que salga algo delante, según se explica en este otro post.

    ResponderEliminar
  28. NO me funciona, que lastima, tengo tiempo buscando este gadget y da error

    ResponderEliminar
  29. Ese mismo código está ahora funcionando en el post, por lo que debe estar bien. Sólo tienes que copiarlo y cambiar lo marcado en verde por la dirección de tu blog.

    Un saludo.

    ResponderEliminar
  30. Muy buen gadget, me ha gustado mucho, ya que quizas asi se pueden encontrar entradas que los usuarios nunca han visto. Ya lo agrege a mi blog ^^.

    Bendiciones!

    ResponderEliminar
  31. Esa es la idea Reggae Soul.

    ResponderEliminar
  32. Gracias por el tip pero como lo pongo en una entradA? quiro tener una entrada a parte para mostrar entradas aleatorias.

    Gracias!!

    ResponderEliminar
  33. Hola.

    En una entrada es igual, solo que tendrás que quitar los saltos entre línea y línea del código. Es decir, hay que escribirlo todo seguido sin pulsar intro para diferenciar líneas. Así está puesto aquí.

    ResponderEliminar
  34. Hola Oloman

    Excelente post, solo una cosilla como puedo borrarle el punto inicial a cada entrada..


    Saludos

    ResponderEliminar
  35. En la parte final se indican las clases que configuran el aspecto de la lista. Sólo tendrías que añadir a la última
    list-style-type:none;

    ResponderEliminar
  36. ¿Hay alguna forma de que no se muestren entradas de alguna etiqueta concreta? Es decir, si por ejemplo tengo tres etiquetas, que las entradas al azar que se muestren sean sólo de dos de esas etiquetas pero no de la otra...

    ResponderEliminar
  37. Sólo conozco una manera y es justo al contrario de la que propones. Sabría hacer cómo mostrar una sola etiqueta y es cambiando el feed que termina en SUMMARY por otro como este:
    http://NOMBREBLOG.blogspot.com/feeds/posts/default/-/ETIQUETA

    Supongo que si lo haces dos veces con etiquetas distintas, podrías mostrar esas dos que dices y excluir la otra. Lo aconsejable sería reducir el número de enlaces a mostrar a la mitad para cada una.

    ResponderEliminar
  38. Sí, eso ya lo había visto en los comentarios anteriores... pero si en lugar de las tres del ejemplo son 41, esa solución ya no es tan útil... :)

    Gracias, de todos modos

    ResponderEliminar
  39. Efectivamente, no es nada útil en ese caso, pero como decía, no se me ocurre otra manera. De todas formas, tampoco sería muy normal tener 41 etiquetas ;)

    ResponderEliminar
  40. Genial el aporte, crees que exista la forma para que la lista muestre tambien una imagen y una breve descripción de la entrada, estoy estaria mejor que las entradas relacionadas, gracias por tu ayuda

    ResponderEliminar
  41. Fuego, eso no está a mi nivel todavía. Para mí, lograr hacerlo sería de nota :D

    ResponderEliminar
  42. grandioso Oloman, me fascino pero como dice fuego quedaria bien una imagen en forma de icono pequeño :D Saludos!!

    ResponderEliminar
  43. Tengo un problema porque no se me encaja bien en el blog, tengo 3 veces el gadget para 3 etiquetas distintas, pero me aparece el simbolo de editar debajo de cada uno y queda muy mal, parece como si el ancho no entrase.
    Como podría hacer que este gadget solo entuviese en la portada?
    ranhada.blogspot.com
    Muchas Gracias

    ResponderEliminar
  44. Nando, el problema realmente es que por un motivo que desconozco, has puesto este código de más, que es el que genera esos símbolos.
    <img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" height="18">

    Realmente no funcionan. Sólo es una imagen.

    No obstante si quieres verlo sólo en la portada, tendrías que usar condicionales. En el buscador podrás encontrar un post con su uso.

    ResponderEliminar
  45. Pues la verdad es que no se porque fue. Lo volvi a copiar y ya me funciona. Muchas Gracias!!!!!
    Ahora tengo otro problema, le meti los condicionales que tienes en el post, pero el problema es el título, que me da problemas, si borro todo no me aparece el título del gadget y si no lo borro pues me aparece en las entradas tambien. ¿?

    ResponderEliminar
  46. Nando, se podría hacer de otra manera, pero lo más fácil es no poner título al gadget y escribir el texto correspondiente como parte de este código. Sería simplemente escribiendo al principio del todo.

    ResponderEliminar
  47. Muchas gracias Oloman me estas ayudando un monton.
    Es una buena idea lo de poner el titúlo pero como le cambio luego el tipo de letra y el tamaño? si no no resalta.

    ResponderEliminar
  48. Lo puedes meter dentro de un DIV con una etiqueta STYLE en la que le des estilo:
    <div style="font-size:14px;font-weight:bold;">
    CODIGO GADGET
    </div>

    ResponderEliminar
  49. Lo Ultimo ya para que me quede perfecto.
    Me gustaría que cuando pinche en el enlace aleatorio se abra una nueva ventana, como lo hago?

    ResponderEliminar
  50. Nando, para eso ya hay que modificar el script, por lo que tendría que ponerme a experimentar. JavaScript con json no es mi fuerte, por lo que me llevaría demasiado tiempo darte el código bueno. Todo esto te lo comento porque no me importa currar en cosas de interés general, pero en mi opinión, ni es útil ni bueno, obligar a los usuarios de una página a abrir los enlaces en una nueva ventana --> http://goo.gl/1AaJb

    ResponderEliminar
  51. Ok, la historia es que mi blog es de recetas, entonces con entradas aleatorias hice un menu del día, lo bueno sería que estas entradas cambiaran solo cada día, supongo que eso es imposible, por eso quería que por lo menos cuando pinchen en un plato del menu se abriese otra ventana para que siguiesen viendo el menu en la otra, si no al volver el menu ya cambio.

    ResponderEliminar
  52. Ahora entiendo Nando, pero realmente tu problema no es la ventana nueva. Yendo al origen de las causas, en tu caso es el propio gadget, puesto que tú lo que necesitas es otra cosa y con esto hiciste un apaño.

    No se me ocurre como mostrar una lista aleatoria y que esta permanezca todo el día invariable, si no es mediante una base de datos dónde se guarde diariamente, cosa de la que no disponemos en Blogger.

    ResponderEliminar
  53. Anónimo5/1/12, 2:10

    Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  54. Buenas Oloman, enhorabuena por el blog y los contenidos, de lo mejor de Internet. Quería hacerte una consulta y no se si esta es la entrada apropiada pero es la más parecida que he encontrado... Quiero que las entradas de mi blog aparezcan ordenadas de forma aleatoria, es decir, no colocadas de más modernas a más viejas, es eso posible?

    ResponderEliminar
    Respuestas
    1. Voy a ser breve... no.

      Bueno, no me gusta ser tan taxativo. Yo creo que no porque nunca he visto nada parecido. Lo único que se me ocurre y requeriría javascript, sería que después de mostrar una página con varios, se reordenaran aleatoriamente, pero en cada página saldrían siempre los que tocan, no otros.

      Eliminar
    2. Ok perfecto, me lo imaginaba porque no había encontrado nada al respecto. Muchas gracias de todas formas, se quedará así.

      Eliminar
  55. Hola Oloman, quiero utilizar este truco pero en las entradas. Mi idea es copiar el primer script en la plantilla y colocar manualmente el que escribe las entradas en cada post. Pero no lo logro. Quisiera saber como es la manera correcta de hacerlo.
    Saludos.

    ResponderEliminar
    Respuestas
    1. La manera es copiando y pegando el código de este artículo, tal cual lo ves, en tu entrada. Luego tras la etiqueta de apertura SCRIPT, añades esto //<![CDATA[ y justo antes de la de cierre, esto otro //]]>

      Con esos símbolos el intérprete no se lía y te ejecuta eso como código. Pero ojo con la pestaña que utilizas, porque esto no se puede pegar desde REDACTAR, sino sólo desde la de HTML. Por otra parte, cuando grabes la entrada, si posteriormente la vuelves a editar, a veces el código JavaScript aparece con saltos de línea que no debería tener y casca el invento. A mí me pasa cada dos por tres.

      El CSS ya lo colocas dónde quieras, en la plantilla o en la misma entrada. En este último caso, habrás de meterlo entre etiquetas STYLE.

      Eliminar
  56. Hola, lindo blog, me sirvió el código que muestra entradas al azar, pero mi pregunta es si se puede señalar solo algunas entradas que se muestren al actualizar, no todas. ¿Como se hace, que le modifico alguna id o etiqueta?

    ResponderEliminar
    Respuestas
    1. Hola Jonatan. Lo que tendrías que hacer en primer lugar sería etiquetar todos los posts susceptibles de salir en esa lista con una etiqueta específica para ello, por ejemplo "azar". También puedes usar una pre-existente si te cuadra la cosa.

      Luego, en lugar de la dirección http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/summary que figura en el código tendrías que usar esta otra
      http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/default/-/NOMBRE_DE_LA_ETIQUETA

      Eliminar