Ando entretenido en una plantilla para Blogger que me apetecía hacer y su autor me pidió un carrousel automático con las imágenes de sus entradas. No hay mucho publicado sobre carrousel automáticos que generen automáticamente el contenido del mismo, así que he usado un script de Abu Farhan que captura las imágenes y los títulos del feed para mostrarlo y lo he animado con JQuery.


Aun no puedo mostraros como ha quedado pero es muy parecido a esta demo, las imágenes se van desplazando automáticamente de izquierda a derecha, el número de ellas que queremos mostrar es configurable por el usuario y pulsando sobre ellas accedes a la entrada publicada.

Para insertarlo debemos colocara antes de ]]></b:skin>

#carrousel ul{
margin:30px 10px;
padding:10px;
width:960px !important;
height:100px !important;
overflow:hidden;
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important;
height: 80px !important;
border: 1px solid #ccc;
background: #f5f5f5;
padding:5px;
}

Aquí deberéis ajustar el ancho del carrousel al tamaño de vuestro blog.

Insertamos la librería JQuery y el plugin del carrousel antes de </body>(los que ya la usáis no es necesario, solo debéis ajustar el plugin para el carrousel, usad el packet.js).

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

Debéis bajaros el plugin, subirlo a vuestra web de alojamiento e insertar su url en el código.

Por ultimo guardamos los cambios y añadimos un elemento HTML a nuestra plantilla, donde insertamos el contenido de este fichero.

No olvidéis insertar el nombre de vuestro blog con su url (www.nombredelblog.blogspot.com) en este apartado donde pongo URL DE TU BLOG.
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

30 comentarios:

  1. hay algo que no me queda claro desde donde descargo el plugin y exactamente cual es el plugin que dtengo que descargar?

    "Debéis bajaros el plugin, subirlo a vuestra web de alojamiento e insertar su url en el código."


    saludos

    ResponderEliminar
  2. upssssss se me olvido el enlace... ahora mismo lo pongo ;)

    ResponderEliminar
  3. por alguna razón no me corre http://alfreblok.blogspot.com/

    ResponderEliminar
  4. Alfredo sigue las instrucciones tal como las explico .. y en el feed pon tambien las tres www .... y metelo en un elemento HTML

    ResponderEliminar
  5. Bien, e revisado los pasos 4 veces, y nada corregi lo que me dijiste (puse los script antes de b:skin y no antes del /body)pero ya lo corregi, lo de las www. tambien. la duda que tengo es el plugi que hay que bajar: ¿hay que bajarlo y descomprimirlo? en ese caso, bienen 4 archivos. 3 son .js:
    Jquery.carouFredSel-4.4.1-packed.js
    Jquery.carouFredSel-4.4.1.js
    Jquery.js

    eh probado cambiando por los 2 CarouFredSel donde dice URL ALOJAMIENTO PLUGIN, y nada! o ¿quizás sea algo mas de mi plantilla?

    ResponderEliminar
  6. descomprimelos y usa solo el packed... quita el slider3 ese que tienes..puede que sea incompatible...

    ResponderEliminar
  7. Alfredo... Blogger habia modifcado una cosa del script..lo he metido en un fichero para su descarga y que no haya problemas..

    ResponderEliminar
  8. ok carlos pude hacerlo funcionar, pero la sidebar derecha se me va abajo! :( perdona por dar tantos problemas :/

    ResponderEliminar
  9. Alfredo tienes la sidebar-wrapper incluida dentro del main-wrapper deberias sacarla de ese div como esta la otra (sidebar-wrapper2)

    ResponderEliminar
  10. Ahora sí, Gracias Maestro! te pasaste Carlos! bendiciones!

    ResponderEliminar
  11. EDS en que blog quieres ponerlo, dejalo puesto y avisame para ver cual es el problema

    ResponderEliminar
  12. Hola... gracias por contestar...
    lo quería poner en este blog...

    www.energiadelsur.blogspot.com

    en el cuadro donde dice "entradas aleatorias"

    ResponderEliminar
  13. igual, no te hagás drama
    ya le encontraré la vuelta ;-)

    ResponderEliminar
  14. Que gran trabajo y que bien va el Slide ¡ :D

    ResponderEliminar
  15. Simplemente meowlicioso, no se si es porque me corre lenta mi conexión o no pero no se mueve, puse el pack del plugi y actualicé también el jquery que va en 6 y yo tenia el 4.1.1 :) pero ya que esten las entradas encima de mis post es genial

    Ya era hora de pasarme por mi hado padrino para aprender cositas no? :)

    besos ronroneados en mi enorme abrazo ^_^

    ResponderEliminar
  16. en internet explorer 7 y 8 me toma las imagenes en tamaño original... no lo puedo modificar con el css

    ResponderEliminar
  17. EDS revisa el css..el otro dia estuve mirando tus dudas y el width lo habias quitado.. colocalo tal como lo pongo aqui ;)

    ResponderEliminar
  18. Era tan simple el problema, había una "comilla simple" perdida en el css, firefox y chrome me lo ignoraba pero ie8 y ie7 me lo tomaba y me deshabílitaba todo el css que le seguía a esa comilla. El width lo quité pero no me ha generado problemas, que vea ahora... :)
    Un detalle... quise buscar este post en el buscador del blog con "carrousel" y no lo encuentra,
    si lo busco en Google con "pizcos.net corrousel" aparece en primer lugar.

    Gracias por la ayuda, ¡Muchas gracias!

    ResponderEliminar
  19. Hola Pizcos, excelente el carrousel, me sirve mucho ya que tengo un blog de peliculas y pues en la parte superior muestro las ultimas gracias a tu carrousel pero vi en la pagina del plugin que hay una opcion para ponerle dos botones ala izquierda y derecha para que cuando uno le haga clic muestre las demas imagenes sin nesesidad de que se muevan todas solas automaticamente, es posible configurarlo para que quede asi? espero tu respuesta, gracias x todo un abrazo salu2.

    ResponderEliminar
  20. Hola Pizcos, esto es un genial aporte, pero no logro hacerlo andar, en el pasado también intente con los sliders automáticos pero tampoco pude.

    Este es el blog en el que estoy probando: http://goo.gl/6Ihk1


    Espero puedas echarme un mano
    Muy agradecido como siempre con tus geniales aportes.

    ResponderEliminar
  21. Watesam la url de tu feed NO esta bien pones http: ... y seria http:// ..por otro lado tienes 2 veces incluido jquery en la plantilla, quita el que tienes arriba del HTML..

    ResponderEliminar
  22. dcanimex si ves las paginas de ejemplos elige el que quieras, sigues las instrucciones de este post y sustituye el html, css y la llamada del script por el del ejemplo...

    ResponderEliminar
  23. Pizcos, amigo intente hacer lo que me dices pero no logro nada :( ojala me puedas hechar una mano con esto, muchas gracias x todo.

    ResponderEliminar
  24. Hola, muy buena tu página ante que todo, te quería preguntar yo necesitaría que se muestre una gran cantidad de entradas y traté de configurar el valor 18 por defecto que viene pero si es superior a eso no me lo toma, ese es el límite? o hay manera de que sí pueda mostrar mayor cantidad de post? mil gracias!

    ResponderEliminar
  25. Cosademaestro Blogger tiene limitaciones, llegado a cierto "peso" no muestra mas entradas, es para evitar la demora en las cargas de las paginas y no se puede hacer nada :)

    ResponderEliminar
  26. Hago todo como me decis y las imagenes salen de cualquier tamaño. Espero respuesta, gracias.

    ResponderEliminar
    Respuestas
    1. Mucho Huevo... siguiendo las instrucciones debe funcionar pero si no lo dejas puesto no puedo adivinar por que no funciona..

      Eliminar
  27. Que tal Pizcos, esta es como la 4ta vez que te escribo pidiéndote ayuda porque vi en la pagina de ejemplos que se puede poner dos botones ala izquierda y derecha para que cuando uno le haga clic muestre las demas imagenes sin nesesidad de que se muevan todas solas automáticamente, como te dije antes ya envié varios comentarios con la misma pregunta pero ninguno es contestado hasta ahora, disculpa si te molesto demasiado y espero que esta vez por fin me contestes, muchas gracias por todo Pizcos.

    ResponderEliminar
    Respuestas
    1. lo se, tengo muchos comentarios pendientes de responder..disculpame ..a ver si saco tiempo y respondo a todos...

      Eliminar