06 noviembre 2009

Slideshow de artículos destacados

Pase de imagenes con links a entradas que creas importante, también se podría llamar así.


Como vereis, he añadido ahí al lado un script dinámico, un pase de imagenes, un slideshow, pero con links hacia entradas que más relevancia creo que tienen. En realidad, es fácil de hacer, todo es cuestión de ponerse un rato con css y html...pero os lo simplificaré para que podais añadirlo en vuestro blog. Está hecho con jquery, con el plugin s3slider, y es válido para Blogger, Gamefilia, Wordpress, y cualquier web. Además pesa poco.

Preparativos
Antes de hacer nada, os recomiendo que tengais un dominio web, en mi caso uso tripod, podeis usar los links de mi dominio pero no lo recomiendo. Necesitas descargar este archivo, y subir a tu dominio los archivos “jquery.js” y “s3Slider.js”. Una vez hecho esto, copia los links de la ubicación de esos archivos.

HTML
Ahora empezamos con HTML. En primer lugar decir que todas las imagenes que subas deberán tener el mismo tamaño que especifiques en css más abajo, si no lo haces darán lugar a deformaciones. Y sin más, pega los links de los archivos que deberías haber subido, tal y como está lo rojo sobre /head:
<!-- Archivos slideshow -->
<script src='http://usuarios.lycos.es/animally/show/jquery.js' type='text/javascript'/>
<script src='http://usuarios.lycos.es/animally/show/s3Slider.js' type='text/javascript'/>
<!-- Archivos slideshow -->
  </head>

Ahora, bajo body, pegamos lo siguiente. el valor 4000 se refiere a los milisegundos entre imagen e imagen.
  <body>
<!-- Archivos slideshow -->
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<!-- Archivos slideshow -->

El siguiente lo ponemos sobre ]]>. En este hay varias variables que determinarán nuestro slideshow, como la fuente de letra que usará, el tamaño de las imagenes, la posición de la barra descriptiva...así que cambialas a tu gusto, o déjalas como están y tendrás el mismo slideshow que yo.

El siguiente tiene las imagenes de 200x120 y el texto en la parte inferior.
<!-- Archivos slideshow -->
#s3slider {
width: 200px; /* mismo ancho que las imagenes */
height: 120px; /* misma altura que las imagenes */
position: relative; /* importante */
overflow: hidden; /* importante */
}#s3sliderContent {
width: 200px; /* mismo ancho que las imagenes */
position: absolute; /* importante */
top: 0; /* importante */
margin-left: 0; /* importante */
}

.s3sliderImage {
float: left; /* importante */
position: relative; /* importante */
display: none; /* importante */
}

.s3sliderImage span {
position: absolute; /* importante */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 200px;
background-color: #000;
filter: alpha(opacity=70); /* opacidad de la caja de texto */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
bottom: 0;

/*
si pones
top: 0; -> la caja de texto se mostrará en la parte superior
si pones
bottom: 0; -> la caja de texto se mostrará en la parte inferior
*/
}

.clear2 {
clear: both;
}
<!-- Archivos slideshow -->
]]></b:skin>

Poniendo el Slideshow

Una vez configurado eso, vamos a ponerlo (elementos de página en Blogger, gadget HTML/Java). Para ello, pegamos lo siguiente:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://TUENLACE1"><img src="http://TUIMAGEN1"/></a>
<span>Imagen 1 sobre X temar</span>
</li>
<div class="clear2 s3sliderImage"/>
</ul>
</div>

¿Veis la parte de <li class="s3sliderImage"> hasta </li>? Esa es la parte correspondiente a una imagen y un link más una pequeña descripción. Así que, cuantas más veces pegues esa parte, más imagenes usarás. Recomiendo un máximo de 8 imagenes, para no tener líos. Yo uso 5, y me queda el código del elemento así:
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/11/card-sagas-wars.html"><img src="http://img690.imageshack.us/img690/8950/41109.gif"/></a>
<span>Ahruon y Orkimides, son los...</span>
</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/11/en-esta-generacion2.html"><img src="http://img690.imageshack.us/img690/1953/21109.gif"/></a>
<span>Y bueno, todavía quedaron c...</span>

</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/10/tanda-de-videos-24-malas-elecciones.html"><img src="http://img11.imageshack.us/img11/6619/241009.gif"/></a>
<span>Lo que parece bueno muchas...</span>

</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/10/megaman-9-analisis-e-impresiones.html"><img src="http://img687.imageshack.us/img687/7881/211009.gif"/></a>
<span>Por hablar de algo, hoy os...</span>
</li>
<li class="s3sliderImage">
<a href="http://animally-pensando.blogspot.com/2009/10/jueguiles-gratuiles-ii-runman-el-sonic.html"><img src="http://img23.imageshack.us/img23/147/41009.gif"/></a>
<span>Para que luego digan que lo...</span>
</li>
<div class="clear2 s3sliderImage"/>
</div></ul></div>

Y el resultado, es el que veis a la derecha arriba.

Como veis es fácil de hacer, confio que os sirva de ayuda, no tenía otra cosa que hacer que escribir esto.

Nos vemos, nakamas.

1 han dicho algo:

Anónimo dijo...

Todo bien, pero te falto imagenes o un Demo.
Saludos!