JMiur [E]

Este truco de Oloman es muy bueno. Ya que hay varias formas de crear un enlace a un post aleatorio ¿por qué no hacer una lista con varios de ellos y colocarla en la sidebar?

Sólo debemos agregar un elemento HTML en nuestra plantilla y allí pegar el siguiente código:
<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:/miBlog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>
donde, todo lo que debemos cambiar es miBlog por el nombre de nuestro sitio y, eventualmente, cambiar el valor de maxEntries (que por defecto es 10) por cualquier otro; esa, será la cantidad de títulos a mostrar.

El resultado, será una lista (UL LI) que tomará el aspecto de cualquier otra lista que tengamos y que, puede ser personalizada si agregamos definiciones en el CSS de nuestra plantilla; por ejemplo:
#random-posts {
/* este es el rectángulo donde se mostrará */
}
#random-posts ul { /* la lista */
list-style-type: none;
margin: 0 10px;
}
#random-posts li {
/* los items de esa lista */
}
#random-posts a { /* cada item es un enlace con el título de la entrada */
background: transparent url(unaImagen) no-repeat 5px 50%;
border-bottom: 1px solid #202931;
border-top: 1px solid #202931;
display: block;
font-weight: normal;
height: 16px;
line-height: 16px;
padding: 3px 5px 2px 20px;
}
#random-posts a:hover { /* efecto hover de esos enlaces */
background-color: #101921;
border-bottom: 1px solid #303941;
border-top: 1px solid #303941;
}

33 comentarios:

Pepiche  

Muchas gracias! Voy a implementarlo ;)

Saludos, amigo JMiur!

Responder
Jared  

Realmente muy útil, JMiur existe la posibilidad de ordenar las entradas de manera que siempre se vea la más antigua como primera?

Responder
JMiur  

Suerte con eso, Pepiche :)

Jared: No sabría responderte; imagino que si pero, habría que rehacer todo el script.

Responder
Jared  

Otra consulta JMiur, tengo un problema con uno de mis blogs, cada vez que presiono el botón de 'leer más' dentro de las entradas, me lleva a otro lado, no hacia la entrada en cuestión.
El link es http://goo.gl/nRqA

Responder
JMiur  

Jared:
Es algo ue n ose ve en la plantilla. En realidad, no te envia a cualquier sitio sino que todo el div con los posts no se muestra (blog-posts) , ni siqueira está oculto. Probablemente, algún condicional mal implementado.

Responder
Jared  

muchas gracias JMiur.. a cambiar la plantilla se ha dicho xD

Responder
JMiur  

Suerte con eso :)

Responder
El blog de Bollulleros.  

Buenas Jmiur, ¿Cómo puedo poner un guión ("-")justo delante de cada título de las entradas?.

Gracias. Un saludo

Responder
JMiur  

Simplemente escribiéndolo pero, mucho cuidado porque la URL de las entradas se forma con el título así que, primero lo publicas sin guines, luego, lo editas y le cambias el título. La URL no cambiará.

Responder
El blog de Bollulleros.  

Creo que no me he explicado bien. Lo que yo quiero es que el guión aparezca justo delante de cada uno de los títulos que aparecerá en ese listado de entradas. Es decir:
- Ejemplo de título 1.
- Ejemplo de título 2.
- Ejemplo de título 3.
...

Gracias por responder. No sé si al final he conseguido explicarme. Un saludo

Responder
JMiur  

¿En el script? No sé, tal vez, cambiando esto:

a.appendChild(document.createTextNode(entry.title.$t));

por esto:

var ntitulo = "- " + entry.title.$t;
a.appendChild(document.createTextNode(ntitulo));

Responder
El blog de Bollulleros.  

Wuauuuu!!

Así es. Muchas gracías de nuevo.

Un saludo

Responder
cargohe  

No me funciona ??

Responder
JMiur  

Porque la URL es errónea, dice:
http:/www.cargohedescargas.com/feeds/comments/summary
debería ser:
http://

Responder
cargohe  

ya y nada no sale nada

Responder
JMiur  

Si se trata de eso llamado Post Aleatorios, ahi lo veo.

Responder
cargohe  

aveces sale y aveces no, es raro.
Gracias

Responder
Oloman  

Vaya, este post tuyo se me escapó cuando lo publicaste y lo he visto ahora.
Gracias por la referencia, pero tengo que aclarar que el truco no es mío. Lo que ocurre es que no recuerdo dónde lo ví y por eso no puse la fuente. Sólo recuerdo que lo leí en inglés. Al César lo que es del César.
Saludos

Responder
JMiur  

Por la referencia, nada, ni se menciona :)

La aclaración de la autoría, vale. Siempre hay quien le busca la pata al gato en estas cosas. En lo personal, no me preocupa porque sé quién es quién (o lo intuyo) :D

Responder
León  

Gracias Jmiur, me funciona perfecto.
El tema es que mi pregunta original es como hacer que esto mismo se vea solo en las entradas particulares, ocupando el lugar que normalmente ocupan las entradas relacionadas.

Responder
JMiur  

Haciendo lo mismo que con los psots relacionados, por ejemplo, colocándol oen el footer de cada entrada y condicionándolo de este modo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
........ aqui el DIV y el SCRIPT
</b:if>

Responder
León  

No funciona... me pone: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The content of elements must consist of well-formed character data or markup. :S :(

Responder
JMiur  

SI va directamente en la plantilla, cambia los símbolos & por &amp;

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

Responder
El Tonto de la Colina  

Gracias por el widget. Desde hace tiempo habia estado buscando algo así, y que pudiera agregarlo a mi blog usando mis poquísimos conocimientos de HTML.

Saludos.

Responder
Dani  

¿Existe alguna forma de que las entradas que se muestran se correspondan con una etiqueta (o etiquetas) determinada? Es decir, que si yo tuviera, por ejemplo, 3 etiquetas, se mostraran entradas de sólo dos de esas etiquetas, bien escogiendo cuáles mostrar, bien cuál no se mostraría. ¿Alguna idea de qué modificar en el código para lograr algo así?

(Gracias.)

Responder
JMiur  

Podría ser, tal vez, rehaciendo el script pero no sabría decirte cómo.

Responder
Dani  

En los comentarios de la entrada original de Oloman encontré cómo hacer para que salgan entradas de una etiqueta concreta (sustituyendo en el código http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/summary por http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/posts/default/-/ETIQUETA). Ahora tendré que seguir investigando a ver si encuentro a partir de aquí la forma de añadir la url de más etiquetas o hacer que no se muestre una en concreto...

Responder
nEjO  

hola tengo una duda: existe alguna forma de hacer que al abrir el blog el visitante vea una entrada aleatoria? es decir que al entrar a "miblog.blospot.com" lo lleve a una entrada diferente cada vez que ingresa al blog sin necesidad de de dar click en algun enlace? me explico? es decir que no tenga que dar click en "entra aleatoria" sino qeu con el simple hecho de entrar al blog siempre le saldra una entrada diferente? se puede?

Responder
JMiur  

Tal vez redireccionando la página con JavaScript pero es algo que no recomendaria en absoluto ¿Para qué hacer semejante cosa?

Responder
Mayer  

una pregunta, para que se muestren entradas con una etiqueta determinada, por ejemplo si he creado 10 entradas con etiqueta noticias, otras 5 entradas con otra etiqueta, lo que me interessa es que en la pagina principal del blog solo me salgan las entradas con la etiqueta noticias, nose si me he explicado.

Saludos, Mayer

Responder
JMiur  

El resultado de hacer sería un poco incrolable aunque puede hacerse. Deberías tratar de ver como funciona el LOOP de Blogger y cómo adaptarlo porque no hay una condición que permita hacer eso y no hay una respuesa genérica; dependerá de como está armada cada plantilla. Es engorroso pero posible.

Responder
Xavier Figueroa  

hola... como hago para ponerla en el post-footer como entradas relacionadas??? Gracias...

Responder
JMiur  

Colocando el DIV random-posts allí, donde quieras que se vea.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR