Hay una entrada de Pizcos que trata como su título indica sobre un "Carrousel automático con las imágenes de las entradas de tu blog"
Los pasos a seguir son muy sencillos y el resultado es muy vistoso solo hay que ubicar cada código proporcionado en el sitio correspondiente y queda a gusto de cada uno personalizar las imágenes.
Por costumbre modifico la plantilla de arriba hacia abajo, así que lo primero que encuentro son los estilos y es lo que vamos a añadir justo antes de ]]></b:skin>
#carrousel ul{
margin:30px 10px;
padding:10px;
width:550px !important; /* ancho del carrousel */
height:100px !important; /* alto del carrousel */
overflow:hidden; /
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important; /* ancho de la imagen */
height: 80px !important;
border: 1px solid #ECA475; /* color del borde */
background: #BB2B17; /* color de fondo */
padding:5px; /* espacio entre la imagen y el borde */
cursor: pointer;
display: inline-block;
position: relative;
-moz-transition: opacity .3s linear; /* efecto opacidad de la imagen */
-webkit-transition: opacity .3s linear; /* efecto opacidad de la imagen */
-o-transition: opacity .3s linear; /* efecto opacidad de la imagen */
transition: opacity .3s linear; /* efecto opacidad de la imagen */
}
#carrousel img:hover {
background-color: #0FF; /* color de fondo al pasar el cursor */
opacity: .5;
filter:alpha(opacity=50);
}(Es importante que el ancho del carrousel no sea mayor que el espacio disponible en nuestro blog)
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.
A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>
Justo después añadimos directamente a la plantilla el plugin y un pequeño script que podemos copiar desde el siguiente archivo de texto. De esa forma evitamos alojamientos externos y los consiguientes problemas que ocasionan.
Guardamos los cambios y nos dirigimos a Diseño para editar un nuevo gadget de HTML, en su interior añadimos el contenido de este archivo de texto.
Encontraremos al final de ese archivo AQUÍ-URL-DEL-BLOG es necesario sustituir esa parte por la url de nuestro blog.
Y eso es todo ver ejemplo en el footer de este blog
