Gadget de Entradas Populares con Efecto Slider

Las entradas populares es quizas uno de los gadgets mas usados por los usuarios de Blogger asi que personalizarlo un poco y darle un poco de estilo a este gadget no viene nada mal.

Con el truco de hoy el gadget se convertira en una especie de pequeño slider, ya que las entradas tendran un efecto de deslizamiento en el area del gadget,mejor pongo una imagen para que entiendan mejor el truco.

Para agregar este truco a tu blog primero debes tener el gadget de entradas populares, si ya lo tienes solo debes pegar en un gadget HTML/JavaScript lo siguiente:

<style type="text/css" media="screen">
#PopularPosts1 { 
overflow:hidden; 
margin-top:5px; 
width:100%; 
padding:0px 0px; 
height:310px;

}
#PopularPosts1 ul { 
width:310px; 
overflow:hidden; 
list-style-type: none; 
padding: 0px 0px; 
margin:10px 0px 0px 10px; 
}
#PopularPosts1 li { 
 width:290px; 
padding: 5px 5px; 
margin:0px 0px 5px 0px; 
list-style-type:none; 
float:none; 
height:80px; 
overflow: hidden; 
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY9Zyh7Z3rfbqPZE4Wr67uEjzknhOXkMkYabO7OgKoCG29X8hxADUBcYdp11yCV6KlTjVe6rJDa2XZtq7PMhTE6ZiItv_WMjU8-kX82P4TkP4QkFUd3Bs9srPECYdJx-hVSiDuVHjglTQ/s400/popular+posts.jpg) repeat-x; 
border:1px solid #ddd; 
}
#PopularPosts1 li .item-title { 
    
    font-size:1em; 
    margin-bottom:0.5em; 
}
#PopularPosts1 li .item-title a { 
text-decoration:none; 
color:#7CA2C4; 
font:bold 12px verdana; 
height:18px; 
overflow:hidden; 
margin:0px 0px; 
padding:0px 0px 2px 0px; 
}
#PopularPosts1 li img { 
float:left; 
margin-right:5px; 
background:#EFEFEF; 
border:2px solid #7CA2C4; 
}
#PopularPosts1 li .item-snippet { 
  overflow:hidden; 
font-family:Tahoma,Arial,verdana, sans-serif; 
font-size:10px; 
color:#289728; 
padding:0px 0px; 
margin:0px 0px; 
}
#PopularPosts1 .item-snippet a, 
#PopularPosts1 .item-snippet a:visited { 
    color:#3E4548; 
    text-decoration: none; 
}
#PopularPosts1 .spyWrapper { 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
}
#PopularPosts1 { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
}
.tags span, 
.tags a { 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
}
a img { 
    border: 0; 
}
--> 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
$(function () { 
    $('.popular-posts ul').simpleSpy(); 
}); 
</script> 
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Consideraciones
- Para que el gadget se vea como yo lo tengo debes activar las imagenes en miniatura y el fragmento.

Puedes ver el gadget funcionando en mi blog. Imprimir artículo