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!
