Puede ser interesante permitir al visitante del blog navegar aleatoriamente por las entradas del mismo.
Es algo parecido a los posts relacionados pero, en este caso, independientes del tema concreto o de la etiqueta con la que hayamos podido marcar la entrada.
He buscado en Internet y he encontrado dos posibles soluciones que me han gustado.
La primera es un vínculo que se hace desde un texto o desde una imagen.
La segunda es un listado de hiperenlaces que se carga automáticamente cada vez que se abre el blog.
Vayamos por partes.
Solución I.
Lo estás viendo en la columna lateral izquierda del blog.
En este caso es un vínculo a partir de una imagen (un dado en concreto).
Hay que colocar este fragmento de código entre las etiquetas <head> y </head> de la plantilla del blog:
<script type='text/javascript'>
//<![CDATA[
var _yourBlogUrl = "http://angelpuente.blogspot.com";
function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl;
for(var i = 0; i < json.feed.entry[0].link.length; i++) {
if (json.feed.entry[0].link[i].rel == "alternate") {
theUrl = json.feed.entry[0].link[i].href;
break;
}
}
if(theUrl) {
window.location.href = theUrl;
}
}
//]]>
</script>
Después añadimos un gadget del tipo HTML/Javascript escribiendo este fragmento de código:
<a title="post aleatorio" href="javascript:randomPost();">
El texto que quieras que aparezca
</a>
El código quedaría algo así:
<a title="post aleatorio" href="javascript:randomPost();">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM6MZDlesTW25MdObKFakFufBKiVwijIyio7cYe7B5QQzAbXr_sjKgUTu8vKE0G54ThJNoh-UpwTX0AViVbJ5XvQVrq9JHTpLSlTyFayitKxnvXLUbmlheYTA03i6TndD2EgB7/s1600/dado.png" />
</a>
Solución II.
Consiste en colocar directamente en un gadget del blog del tipo HTML/Javascript este 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://angelpuente.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>
<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://angelpuente.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>
En ambos casos tienes que cambiar el angelpuente de la URL por la cadena de texto que corresponda a la dirección de tu blog.
Información obtenida de:
Son de poetas (idea inicial)
Braulio Aquino (solución I)
Ayuda para Blogs (solución II)
Información obtenida de:
Son de poetas (idea inicial)
Braulio Aquino (solución I)
Ayuda para Blogs (solución II)
5 comentarios:
WOW MUY UTIL :)
Lo probaremos... gracias Angel.
Muchas gracias, me ha sido muy útil. Yo antes tenía un botón que mostraba una entrada aleatoria a partir de los enlaces del blog que tenía guardados en del.icio.us. Pero recientemente me enteré que me habían cancelado la cuenta en del icio us.
Mucho mejor la opción que propones tú.
Saludos!
Fenomenal, muchas gracias, he usado la opción 2 y no he tenido ningún problema.
Alguna idea de como hacer que en lugar de post busque páginas aleatorias
Publicar un comentario