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...
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

3 comentarios:

  1. Gracias Pizcos por compartir este carrusel tan estupendo, por cierto el anterior carrusel que tenias también era muy bonito, pero no se si lo explicaste o no vi la entrada. Saludos.

    ResponderEliminar
  2. Muy bonito y con estilo. El único problema que le veo es ese cambio repentino en los colores al acabar la transición, en vez de mantener el mismo color para cada post todo el tiempo, pero me gusta mucho :)

    ResponderEliminar
    Respuestas
    1. para dar el color individual uso "nth-of-type" en el css, eso hace que se asigne a la posicion y como queria hacerlo asi, la verdad es que no he buscado otra solucion, para asignarlo a cada entrada tendria que hacerlo con jQuery y no se si lo lograria ;)

      Eliminar