Entradas populares con imágenes y efecto acordeón

Desde hace algún tiempo Blogger creó un gadget de entradas populares para poder implementarlo en el sidebar de nuestro blog, con las mismas características que Linkwithin; pero este gadget, si bien da un aspecto bastante agradable, el único “inconveniente” es que permanece estático, sin ninguna otra atribución más que de “mostrar” de manera casi impersonal las entradas anteriores que hemos publicado.

Pero gracias a Abu Farhan, aquí hay un gadget que, además de mostrar las entradas populares de nuestro blog, hace que dichas entradas se muestren de manera rotativa, con efecto de “acordeón”, lo que hace que este gadget sea más atractivo a la vista, y que de seguro, nos ayudará a tener un poco más de visitas.

Puedes ver este demo para que tengas una idea más clara de qué se trata.

Para implementarlo, solo debes hacer lo siguiente: Vas a Diseño, Añadir Gadget, HTML-javascript, y pega lo siguiente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://nombre-de-tu-blog.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Cambia lo que está en azul, el número de entradas que quieras que se muestren de acuerdo a tu preferencia, y en donde dice nombre-de-tu-blog, pones la dirección de tu blog, das en vista previa para asegurarte que todo está bien y listo, tendrás un gadget que te muestra las entradas populares bastante simpático

Imagen flotante al pie de la página con texto “deja tu comentario”.

Para muchos (si no es que para todos) es importante que los demás nos dejen su comentario o cualquier opinión de nuestro blog  o de alguna entrada en particular; y que mejor si reforzamos (más bien “forzamos” al lector) con una “recomendación” o sugerencia, ayudados por una imagen estática, de que nos deje su comentario.

Aquí puedes ver el Demo de la entrada con la imagen estática al pie de la pantalla.

Conseguir esto es muy fácil. Solo debes pegar este sencillo código en un archivo html.

Vas a Diseño, Añadir Gadget,  HTML/Javascript y pega este código:

<br /><a style="display:scroll;position:fixed;bottom:0px;right:0px;" href="nombredetublog.blogspot.com"><img src="URL de tu imagen" /></a><br />

Sustituye lo que está en azul por la dirección de tu blog y por la url de tu imagen, lo pones en cualquier lugar, das vista previa y, si todo está como lo planeaste, das en guardar cambios. Y listo. Así de sencillo es poner este truco en el blog.

P.D: Puedes poner cualquier imagen que desees, siempre que no exceda del tamaño recomendado, ya sabes, por aquello de la estética.