12 enero 2012

Slider automático de últimas entradas


Ya vimos anteriormente como crear un  slider automático de últimas entradas, ahora lo traigo un poco más personalizado y vistoso. Esta realizado usando un script que captura nuestro feed y luego se usa JQuery para animarlo.
He intentado que el script usado para el efecto sea compatible con otras librerías como scriptaculous o prototype. Si no tenéis estas librerías en vuestra plantilla deberéis eliminar esta parte del código  jQuery.noConflict();  La adaptación a nuestro blog es de lo más fácil posible, ya que se coloca directamente en un gadget Html.
El resultado lo podéis comprobar en mi portada.
Lo he modificado en tres tamaños para que cada cual coloque el más adecuado a su plantilla.

Slider de 600 de ancho por 255 de alto (uso actual de este blog):
En un principio solo deberíais bajaros este archivo, copiarlo y añadir un elemento HTML a vuestro blog y colocarlo sobre el gadget de entradas de Blog.

Slider de 500 de ancho por 255 de alto:
Lo mismo que el anterior pero con este código, este archivo

Slider de 400 de ancho por 200 de alto:
Lo mismo que el anterior pero con este código, este archivo

Modificaciones:
En el código hay que colocar el nombre de vuestro blog, por defecto lleva mi dirección, así que eliminar la parte de amorsevillista y colocar la vuestra.

También es conveniente que subáis una imagen a vuestra web de alojamiento para que en el caso de que no haya imágenes en una entrada, aparezca esta en sustitución. La url de esa imagen debe insertarse donde pone imgr[0], por defecto lleva ésta dirección: http://www.yotufutbol.com/contenido/estadios/spain/ramon%20sanchez%20pizjuan/estadio%20ramon%20sanchez%20pizjuan4.jpg";

El CSS(style) es completamente configurable, pero si no estáis habituados a tocarlo os recomiendo dejarlo tal cual.
Otro aspecto a tener en cuenta sería que el slider solo se visualizara en portada al igual que en este blog,  para ello veremos como ocultarlo en las páginas.
Una vez colocado el slider en vuestro blog, le dáis un nombre al gadget por ejemplo "slider" y a continuación entramos en Diseño | Edición de HTML y SIN expandir plantillas de artilugios buscamos el nombre del gadget que queremos ocultar y en seguida veremos su ID.


Aquí en el mío la id sería HTML10,  pués bien ahora conociendo nuestro id, buscamos en la plantilla </head> y encima de ella colocamos este código:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
#id-gadget {
display: none;
}
</style>
</b:if>

Cambiaremos id-gadget por el ID del gadget que queremos ocultar. y tendremos el Slider solo en la portada del blog.

!Si tenéis alguna duda "ya sabéis" comentario he intentaré solucionarlo!


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

23 comentarios

Gracias por el slider, Antonio.
Queda muy bien en "Sevillismo desde la cuna" y ha sido muy fácil la instalación.

Una vez más gracias por el trabajo que haces para todos lo sque estamos en la blogosfera.

Saludos.

Que pasada!
Que grande crack!
He vuelto a la blogosfera!! :D

Saludos desde http://elreydelgol.blogspot.com/

Hola,

Espero no incomodar con mi mensaje; mi nombre es Estela, y navegando por la red encontré tu web, felicitaciones porque está muy buena. Al igual que a ti, a mi también me gusta todo lo relacionado con los videos, claro que en mi caso los videos son de música, es por eso que administro mi blog youtubemusica.name y otros 03 Directorios Web (PageRank 3, 4 y 5).

De repente te interesa realizar un intercambio de enlaces y así apoyarnos mutuamente.

Si te animas, no dudes en escribirme para concretar el intercambio ;)


Éxitos con tus proyectos.

Saludos


Estela garay
[email protected]

Lo siento pero me es imposible ponerlo en mi blog.
Al principio tenia Scriptacolous y al ver que no funcionaba quite el Scriptacolous y añadi tu gadget (el grande), pero me seguía sin funcionar y probé a copiar el CSS antes de Skin en lugar de dentro del gadget y sigue sin funcionarme...no entiendo que puede ser...
http://sick-of-sport.blogspot.com/

@Artime95
Me alegro, no me dió tiempo a contestarte.

Hola lo intente colocar y no me funciona..de repente arranca bien pero no muestra el resto del blog, ademas por moomentos se tilda y muestra todas las entradas en vertical, no se..ademas es posible configurar el ancho y el alto del slide?
soy novato en esto y no tengo demaciado conocimiento. agradeceria tu respuesta

Debes copiar el código tal cual y entero, como te falte una coma por ejemplo ya deja de funcionar.

El Slider es posible aplicarle un ancho y un alto si te fijas bién en el código no reviste mucha dificultad.
Ahora eso sí, cambiando el ancho principal debes cambiar el ancho en las distintas etapas del slider.

Hola tengo un problema se que estaras cansado de leer este tipo de cosas pero seria muy interesante para mi tu ayuda .. he insertado el codigo en mi web www.omnilifeperu.com y funciona bien el unico problema que tengo es que no logro hacer que solo se vea el slider en la portada .. he seguido los pasos que indicas para ocultarlo pero no he logrado tener exito .. te indico lo que hice:

1.-Coloque el nombre "slider1" al slider en un elemento de mi plantilla

2.-Busque si efectivamente la plantilla me reconoce el nombre "slider1" y lo reconocio perfectamente.

3-Agrego la equiqueta el codigo antes de head



4.- cambio el id-gadget por "slider1"

5.- le doy gurdar para ver lo cambios y el slider se sigue mostrando en las entradas individuales.

Dato: Revisando la portada de tu blog he visto que no le asignaste un nombre al gadget slider de tu blog ..como asi lo llegaste a ocultar de las entradas? .

Gracias estare a la espera de tu respuesta. un abrazo desde Peru.

Debes cambiarlo no por el tituló sino por la ID= que seria HTML 1 o 2 o 3 etc..

Excelente, wow, mil gracias, Fenomenal, de 1era
Me encanto, y lo fácil que es de ponerlo a funcionar....

Una pregunta??
Como podrían los recuadros a la derecha del slider
bajar, osea solo salen 5 y están estático
Me gustaría que se vieran los 10 recuadros de las
ultimas 10 entradas
GRACIAS!!
Desde RD!!!

Hola! Te consulto: Tenia un ratador automáticao de entradas en mi blog que ERA NOMBRE.blogspot.com.ar y cuando coloqué un dominio personalizado que termina en NOMBRE.com.ar dejó de funcionar. Quise instalar este que proponés y no funciona tampoco. SABÉS A QUE SE DEBE Y COMO LO SOLUCIONO?? MUCHAS GRACIAS!

Para responder tu consulta, deberías dejar la dirección exacta de tu blog para analizar el motivo y ver que problema lo ocasiona.

Saludos.

Antonio la dirección es contactoynegocios.com.ar (del comentario 10) y antes era contacto-negocios.blogspot.com
Saludoss

Te he mandado email con posibles soluciones, espero que te salga todo bien.

Saludos.

Antonio reenviame los mails a esta dirección [email protected] porque no habilité aún el que figura en la pçagina. Un millón de gracias. Abrazo

hola como hago para que el gadget no salge en la pagina de inicio solo en las entradas individuales

Leonardito lee el comentario 19.5 de esta página> y sales de dudas.

Hola genial el trabajo que haces.
Me gustaria comentarte una duda, tengo un slider similar a este pero quiero que solo m salga en la portada, que debo hacer.
Gracias

Blog: yosisedefutbol.com
correo: [email protected]

Gracias por comentar pero observo que ya lo has solucionado.

Enhorabuena por tu blog y me gustaria saber como quitar del slidershow las noticias pequeñas y dejar solo que salga en grande

R.Guijarro prueba este que lo he modificado un poco haber como te resulta: Descargar slider

PD: Procura subir las imágenes de los post con una medida de 450px por 250px. (quedarán centradas en el slider)


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"