Carrousel de entradas populares en Blogger con jQuery

Hace, otra vez, mucho tiempo que no escribo nada sobre cosas para Blogger, para matar el gusanillo os explico el carrousel de entradas populares que acabo de poner, realizado usando el gadget que te proporciona Blogger, CSS y jQuery para animarlo.

1.-  Añadís el gadget de Entradas Populares desde el Panel/Diseño. Seleccionar más de cinco entradas y solo thumbnails.

2.-  En el CSS de vuestro blog añadís

.PopularPosts li {
list-style:none;
width: 200px;
float: left;
padding: 5px;
}
.PopularPosts .item-thumbnail {
float:none !important;
}
.PopularPosts .item-thumbnail img{
width: 180px;
height: 180px;
}
.PopularPosts .item-title {
margin-top: -190px;
padding: 20px 5px 5px;
position: relative;
width: 170px;
height: 155px;
text-align:center;
overflow:hidden;
font-weight:bold;
background: #304957;
opacity:0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
}
.PopularPosts .item-title a {
font-size:22px;
overflow:hidden;
line-height:26px;
}
.PopularPosts .item-title a:hover {
color:#fff;
}
.caroufredsel_wrapper {
width:1000px !important;
overflow:hidden;
margin:0 auto !important;
padding: 0 20px;
}
#PopularPosts1 li:nth-of-type(1) .item-title{
background:#f32a2a;
}
#PopularPosts1 li:nth-of-type(2) .item-title{
background:#dbabcd;
}
#PopularPosts1 li:nth-of-type(3) .item-title{
background:orange;
}
#PopularPosts1 li:nth-of-type(4) .item-title{
background:#6a8ce1;
}
#PopularPosts1 li:nth-of-type(5) .item-title{
background:#84c659;
}

Algunas cosas a tener en cuenta:

.- Ajustar el ancho del Carrousel en .caroufredsel_wrapper (width)
.- Para item-title uso márgenes negativos y posiciones relativas por que si no, no va el efecto del cambio de color
.- El tamaño de las imágenes esta establecido en 180x180px, si queréis modificarlo deberéis ajustar los márgenes y tamaños de item-title
.- Los colores se pueden cambiar en #PopularPosts1 li:nth-of-type(X)

3.-  Script para animar el carrousel. Esta realizado con un plugin de jQuery por lo que debéis tener implementada esa librería para que funcione. Debéis bajaros el plugin, subirlo a vuestra web de alojamiento e insertamos la librería jQuery (los que ya la usáis no es necesario) y el plugin del carrousel antes de </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='URL ALOJAMIENTO PLUGIN' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#PopularPosts1 ul&quot;).carouFredSel({
auto : {
items : 1,
duration : 3000,
easing : &quot;linear&quot;,
pauseDuration : 10000,
pauseOnHover : true
}
});
});
</script>

Os he explicado como utilizarlo con el gadget de entradas populares pero en realidad sirve para cualquier lista que queráis convertir en un carrousel...