lunes, 17 de diciembre de 2012

Gadget de entradas al azar

Una practica forma de mantener a nuestros lectores por mas tiempos en el blog es mostrandoles contenido interesante y es por eso que hoy traigo el gadget de entradas al azar el cual como su nombre lo indica va mostrando entradas diferente o al azar cada vez que los lectores dan un click en nuestro blog.

El gadget se ve de la siguiente manera:

 

Lista de entradas al azar


Para agregar este gadget vamos a Diseño,Elementos de Pagina,Añadir Gadget,HTML Javascript y pegas el siguiente codigo:

<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 5;
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>
 Reemplazas lo que esta en azul por el nombre de tu blog y guardas,Si quieres añadir mas de 5 entradas al gadget solo cambia el numero 5 que esta en azul por el numero de entradas que quieres que se muestren en el gadget.

 

Enlace de entradas al azar

La anterior forma es para agregar una lista de entradas al azar pero tambien se puede agregar en forma de enlace como el siguiente:


Para agregar este gadget vamos a Diseño,Elementos de Pagina,Añadir Gadget,HTML Javascript y pegas el siguiente codigo:

<script type='text/javascript'>
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<a href="#random" onclick="feelingLucky()" title="Entrada al azar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6pklKRHqDpx5B9F6EVcUFVl8NcZgUg8_GNo8m7eIAr_w2vk9UHxwJOCzENszeV1Bsawzvhaodlz4DYdCgw49lSwVsufZrl60xgsmVpfWP0E8BtFTRCJw1rsmrFaPfdrNflpa1Nm98pYAH/s1600/2edma7d.png" valign="middle" border="0" /> Ver una entrada al azar</a>
 El enlace que esta en azul es la URL del dado que muestra el gadget pero si quieres puedes cambiarla reemplazando esta URL por la URL de tu imagen.


No hay comentarios:

Publicar un comentario