29 septiembre 2011

Slide automatico de ultimas entradas

De nuevo vengo con otro Slider, pero ha diferencia de los otros este es automático, mediante un script que recoge nuestro feed y luego se usa JQuery para animarlo.


Tan solo copiar el código y añadir un elemento HTML a vuestro blog, siguiendo estos pasos:

Incluir la url de vuestro blog donde dice home_page = "DIRECCION URL DE TU BLOG/";
 
En la parte que pone URL DE LA IMAGEN QUE SE MUESTRA SI NO HAY NINGUNA EN EL POST"; deberéis colocar una imagen, para que en el caso de que no haya imágenes en una entrada, aparezca esta.


CODIGO:

Ver código aquí

Este slide está configurado a 500px de ancho por 245px de alto y se puede modificar tanto en ancho como en alto. Si no conocéis el CSS mejor dejarlo como está, y si tenéis problemas, comentarlo y soluciono.

!!!! A DISFRUTARLO !!!!!

42 comentarios

Antonio, estoy intentando hacer funcionar este slide pero no lo consigo, he puesto la dirección de mi blog en el código pero aun asi no me funciona, a ver me echas un cable. Gracias.

@Jesús Gómez
Confirmo que a mi tampoco me sale ademas lo quiero a 500 de ancho ;)

@Jesús Gómez
Solucionado Jesús, había un pequeño fallo, pero ya está corregido, aún así te comunico que para verlo debes desinstalar el otro slide.

Saludos.

@El Sevillista
Selu, solucionado y preparado a 500 px.

Saludos.

Si, ya funciona aunque en mi blog no queda muy bien que digamos y me da algunos fallos con las imagenes y los marcos, no se por qué será, gracias Antonio.

Hola Antonio.

Le escribo porque después de realizar todo lo que pide anteriormente para el funcionamiento del slide, a mí sigue sin funcionarme. Desconozco el motivo por completo. Un saludo.

Antonio, ya lo he solucionado eliminando el otro slide que tenía en la página. Un saludo.

Feliz año y enhorabuena por tu gran blog!

Tengo un problema con este Slide en mi Blog, funciona perfectamente, pero nosé como hacer que quede más vistoso como el que tú tienes...y el primer paso que quería hacer es mostrar menos entradas, y no las 7 que muestra por defecto, como cambio eso? Gracias :P

@Artime95
Perdona pero se me olvidó quitar que es como el que tengo en portada, este actual es manual y lleva un código diferente.

De todas formas si quieres colocar solo 5 entradas cambia esta parte del código:

#slideshow .slides-nav li a {
height:40px; (antes 25px)


#slideshow .slides-nav li a img.thumbnail {
width:35px;(antes 25px)
height:35px;(antes 25px)

Perfeeeeeeecto! Muchas gracias crack... y por último... ¿cuál es el tamaño de las imagenes que se reproducen? No consigo ajustarlo...

Me esta dando muchos dolores de cabeza lo del tamaño de imagen... Segun el codigo las imagenes se muestran a 400px x 250px pero, aunque las convierto con programas como el Paint a ese tamaño, la imagen para nada queda ajustada en el slider...

@Artime95
Una vez mandada la entrada, el feed rescata la imagen original,aunque la reedites cogerá siempre la primera.
A partir de ahora coloca ese tamaño en las entradas, 400x250, verás como yá se visualizará bien.

como coloco ese tamaño en las entradas?

@Artime95
Cuando crees un post el tamaño de la imagen que coloques en él, debe ser de 400px de ancho por 250 de alto.

exactamente en q parte se coloca el codigo gracias

plantilla-diseño-añadir un gadget-html/javascript-pegas el código y guardas.

Antonio haber si me puedes ayudar...m sale las entrada pero no la imagen...ya sabes quien soy, joaquin y ya sabes como entrar en mi blog si puedes ponerme te lo agradeceria mucho abrazos, cuidate y gracias.

Ah por cierto si puedes ponermelo mas grande el slide te lo agradeceria...gracias!

Hola que tal! Tengo un problema... puse este slider en mi blog: http://nutricdietic.blogspot.com.es/ Es un blog nuevo y de momento tengo 9 entradas con mis amigos, el problema es que tengo para que en el slider solo salgan 8 entradas, pero me siguen saliendo 9 cuando pasan las entradas automaticamente y tengo miedo que cada vez que publique una entrada me sigan saliendo más. Si podrias ayudarme te lo agradecería!

Saludos.

Busca esta parte del código: numposts = 10; //

y cambias 10 por 8.

Genial =) Como habrás visto he utilizado muchos de los trucos de blog que has puesto!! Muchas gracias de verdad!!

Dónde pongo el código? En qué parte del html mío? En un gadget?

Tato, el slider está configurado para imágenes de 300px de ancho por 215 de alto.

Intenta colocar esas medidas cada vez que crees una entrada y se visualizará perfectamente.
Gracias por el comentario y Saludos.

Hola, amor sevillista...

Me podrias ayudar por favor con mi slider... logre centrarlo, pero las flechas estan fuera de lugar....

Esta es la dirección

http://nomanchestuvida.blogspot.mx/

Saludos y gracias de antemano por tu ayuda...

Miguel, Cambia el left:-30px; que está dentro de #prevBtn, #nextBtn cámbialo por: left:80px; por ejemplo, y vas observando como queda, y aumenta o disminuye su tamaño dependiendo como te quede.

Funcionó!!!!

Muchas gracias amigo.

¿Me puedes dar tu opinión de experto sobre mi blog? ¿Crees que pueda monetizarlo?

Un Saludo desde México.

Hola, me encanta este slide, lo he puesto pero se ve mal por el tamaño, en mi blog twngo un espacio de 615 px, y me gustaria que fuese de ese tamaño, y no conozco mucho de codigos y me gustaria si puuedes ayudarme? este es mi blog http://todouc.blogspot.com/ nose si tambien podrias cambiarle colores para que combine porfavor, de antemano muchas gracias

Raúl, te dejo el slider totalmente configurado para tu blog DESCARGAR.
Puedes ver la DEMO AQUÍ.

Te recomiendo que las imágenes que subas en las entradas tengan estas medidas para que se visualizen correctamente en el blog: 365 DE ANCHO POR 265 DE ALTO.

muchas gracias :) esta espectacular, pero surgio un problema, es que en mi blog http://todouc.blogspot.com/ no se ven las 5 entradas sino que solo 3... que podrá ser?

Raúl, busca esto en la plantilla: #HTML12 li { y elimina de ese css el trozo: height:100px;, era de un antiguo slider que ya no usas.
Lo mejor sería que borraras todo lo relacionado con el CSS de #HTML12.

No encuentro esos códigos que me mencionas...
Esta es mi plantilla https://sites.google.com/site/todouc/archivos/TodoUC.xml?attredirects=0&d=1 podrias verlos tu?

Raúl te he enviado un email en respuesta a contacto.todouc@gmail.com

Hola, buenas noches :)
Yo sigo empeñada en colocar un bonito slide en mi blog, pero hasta ahora no he podido lograr algo que me guste :( O no funcionan, o no son de mi agrado...
Ahora que veo éste, me encuentro con que el código ya no existe, me manda a una página de miarroba (webcindario) que ya no existe. Ya leí todos los comentarios, y al parecer el código desapareció antes de los últimos, porque ninguno menciona que ya no existan.
Amor Sevillista, ¿habrá alguna posibilidad de obtener de nuevo ese código? Te lo agradecería de corazón :D
¡Dios te bendiga!

Ah... Y en el demo que mencionas el slide no se mueve, no aparece ninguna imagen.

LaProfe, ya está solucionado el código.
Gracias por la observación.

¡Muchísimas gracias! :D

Ya puesto el slider (y funcionando perfectamente) me doy cuenta que no queda bien estéticamente hablando, pues es muy ancho para la columna derecha, y muy angosto para ponerlo bajo la cabecera... Al hacerlo más ancho, la imagen queda corrida a la izquierda, y entre la imagen y los títulos queda un espacio muy antiestético. Al parecer ese valor es el único que permite modificaciones.
Por otro lado, las imágenes no se redimensionan, aparece sólo un fragmento de ellas.

LaProfe hazme administrador de tu blog y mañana si tengo tiempo te instalo un Slider correvtamente

¡Qué súper amable eres, Amor Sevillista!

Mira, te acabo de avisar que ya pude poner el otro slider, el carrusel... Sólo me quedó una pequeña duda, y ahí te la planteo. Si acaso aún ocupo más ayuda, ahí me dices cómo hacerte administrador, porque creo que no sé cómo hacerlo :P


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"