Basandome en un widget de Abu Farhan, lo he rediseñado un poco con CSS para mostrar las entradas populares tipo slider, lo que le dara un toque mas 'cool' a nuestro blog. Este gadget, que funciona con JQuery, cuenta con dos flechas a ambos lados para mover los posts de un lado a otro con efecto deslizante.
Este es el aspecto que tendra una vez lo hayamos puesto:
Para ponerlo en nuestro Blogspot, lo primero que tenemos que hacer es añadir el gadget de entradas populares. En las opciones ponemos solo imagen en miniatura, para que se muestren solo los titulos de los posts y las imagenes. El gadget esta pensado y diseñado para ponerlo arriba o debajo de las entradas, tu eliges.
Una vez hecho esto, añadimos un gadget HTML/Javascript (este lo podemos poner donde queramos), pegamos el siguiente codigo y guardamos.
<style>
#slider ol,#slider ul,#slider li
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.popular-posts img {
margin-top: 10px !important;
padding:0 !important;
width:100px;
height:100px;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;border:2px solid #515151;
}
#slider .article:hover {
background:#848484;width:115px;height:220px;padding-left:7px;
}
ol, ul {
list-style: none;
}
.wrapper {
width: 560px;
margin: 0 auto;
position:relative;
}
.clear {
clear: both;
}
.display-none {
display:none;
}
#slider {
position: relative;
top: -2px;
z-index: 1;
}
#slider .prev {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
top: 90px;
left: -51px;
}
#slider .next {
position: absolute;
width: 21px;
height: 21px;
display: block;
background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
top: 90px;
right: -51px;
}
#slider #slider-wrapper {
width: 560px;
height: 200px;
padding-top: 40px;
overflow: hidden;
z-index: 999;
position: relative;
}
#slider #slider-inner {
width:9780px;
height:300px;
position:absolute;
}
#slider .article {
width: 100px;
height: 80px;
float: left;
margin-left: 15px;padding-left:7px;color:#E3E622 !important;
}
#slider .article img {
margin-bottom: 10px;
box-shadow: 1px 1px 1px #ffffff;
-moz-box-shadow: 1px 1px 1px #ffffff;
-webkit-box-shadow: 1px 1px 1px #ffffff;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}
.popular-posts img:hover {
border:2px solid #E3E622;
}
#slider .article h2 {
margin-bottom: 15px;
line-height: 18px;
}
.popular-posts a{color:#000000 !important;text-align:center;font-size: 14px;font-weight: bold;font-family: Verdana;}
.popular-posts a:hover{color:#E3E622 !important;}
#slider .article h2 a {
font-size: 20px;
font-weight: bold;
text-shadow: 0 1px 0 #fff;
line-height: 23px;
}
#slider .article .meta-comments a {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0 1px 0 #fff;
}
#slider .article .item-snippet {
margin-left: 15px;
}
#slider .widget-item-control { display: none}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>
