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(){
$("#PopularPosts1 ul").carouFredSel({
auto : {
items : 1,
duration : 3000,
easing : "linear",
pauseDuration : 10000,
pauseOnHover : true
}
});
});
</script>
<script src='URL ALOJAMIENTO PLUGIN' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#PopularPosts1 ul").carouFredSel({
auto : {
items : 1,
duration : 3000,
easing : "linear",
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...
Cada día hay más herramientas online que nos permiten acceder a información de manera sencilla o compartirla de diversos modos. No todas nos sirven, no todas duran en el tiempo, algunas aparecen publicitadas en muchos sitios y uno quiere probarlas y son "privadas" o prometen que un futuro harán algo pero, por el momento, son inaccesibles para los simples mortales. algunos sitios de "noticias" se especializan en eso, en promover lo inexistente pero ... algo siempre queda.
