Inserta un slider para artículos destacados

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.


S3Slider es una galería de imágenes para mostrar contenido destacado del blog. Quedan perfectos para los blogs tipo revista y sólo requiere de JQuery y S3Slider.
Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sigue estos pasos:

1. Descarga este archivo, descomprímelo y el archivo S3Slider.js súbelo a un hosting.
2. Entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>< script src='URL del archivo s3Slider.js' type='text/javascript'/>< script type='text/javascript'> $(document).ready(function() { $(&#39;#slider&#39;).s3Slider({ timeOut: 3000 }); });< /script>

3. Cambia lo que está en color verde por la URL del archivo que descargaste y subiste previamente.
4. Ahora antes de ]]></b:skin> pega lo siguiente:

/* S3Slider ----------------------------------------------- */ #slider { width: 550px; /* Ancho del gadget */ height: 300px; /* Alto del gadget */ background:#FFF; position: relative; overflow: hidden; margin-bottom:10px; border:1px solid #d7d0c0; } #sliderContent { width: 550px; /* Ancho del gadget */ position: absolute; top: 0; margin: 0; padding:0; } #sliderContent li{ list-style-type:none; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 11px Arial, Helvetica; /* Tamaño y tipo de letra */ padding: 10px 13px; width: 550px; /* Ancho del gadget */ background-color: #000; /* Color de fondo del texto */ filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; /* Color del texto */ display: none; } .clear {clear: both;} .bottom { bottom: 0; left: 0; } .top { top: 0; left: 0; }

5. Por último en un elemento HTML/Javascript pega esto:

<div id="slider">< ul id="sliderContent">< li class="sliderImage">< a href="URL de la entrada">< img src="URL de la imagen" /></a>< span class="bottom">Aquí va la descripción de la entrada.</span>< /li>< li class="sliderImage">< a href="URL de la entrada">< img src="URL de la imagen" /></a>< span class="bottom">Aquí va la descripción de la entrada.</span>< /li>< li class="sliderImage">< a href="URL de la entrada">< img src="URL de la imagen" /></a>< span class="bottom">Aquí va la descripción de la entrada.</span>< /li>< div class="clear sliderImage"></div>< /ul>< /div>

6. Ya sólo cambia la URL de la entrada y de la imagen que será la que se muestre en el slide.

Si quisieras agregar más imágenes añade este código por cada imagen que quieras poner:

<li class="sliderImage">
< a href="URL de la entrada">
< img src="URL de la imagen" /></a>
< span class="bottom">Aquí va la descripción de la entrada.</span>
< /li>

Las imágenes cambian cada tres segundos, si quieres modificar el tiempo entre cada una busca en el primer código donde dice timeOut: 3000 y cambia ese número por otro, por ejemplo en cinco segundos sería timeOut: 5000

En el código que pegamos antes de ]]></b:skin> están las indicaciones de dónde se debe modificar el color del texto, el color de fondo, etc.
Si te das cuenta en el caso del tamaño aparece tres veces, por lo que si cambias el tamaño deberás poner el mismo tamaño en los tres lugares donde se pide.

La descripción de la entrada se muestra en la parte de abajo; si deseas que se muestre en la parte de arriba cambia en el último código donde dice class="bottom" por class="top"

Por último toma en cuenta que este gadget trabaja con JQuery así que si ya tienes Scriptaculous no funcionará.