Slideshow creado con CSS , facil.

 Esta vez vamos a ver un slideshow muy muy fácil de hacer con css, requiere que peguemos un sólo código dentro de un gadget HTML/Javascript o bien dentro de una entrada como lo hago yo acá a continuación. Aclaro antes que en el código está todo incluido, tanto el script, como los estilos y el html, así se ahorran el trabajo de andar pegando cosas en sus plantillas :)

Bien para llevar este Slideshow a sus blogs van a pegar el siguiente código, como les dije anteriormente, en un gadget HTML/JAVASCRIPT o bien en una entrada como lo hice yo recién. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#MBT-slider').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#MBT-slider {
   width: 590px; /* ANCHO DEL SLIDESHOW - Manténganlo 20px-40PX más grande que la imágen actual  */
   height: 335px; /* ALTO DEL SLIDESHOW  */
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#MBT-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.MBT-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.MBT-sliderImage span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica; /* Fuente de letra */
    padding: 10px 10px;
    background-color: #000; /* Color del fondo de la descripción de la imágen */
    color: #fff; /* Color de la letra de la descripción */
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify; /*  Posición del texto */
}
.MBT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}

.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:130px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 1020px !important;
    height: 500px;
}
</style>


<div id="MBT-slider">
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="right"><h3> Título de la imágen 1</h3>Descripción de la imágen 1 -  BLOGGER</span>
</li>
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="left"><h3> Título de la imágen 2</h3> Descripción de la imágen 2 - BLOGGER </span>
</li>

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="top"><h3> Título de la imágen 3</h3> Descripción de la imágen 3 -  BLOGGER </span>
</li>
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3> Título de la imágen  4</h3> Descripción de la imágen 4 - BLOGGER </span>
</li>

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3> Título de la imágen 5</h3> Descripción de la imágen 5 -  BLOGGER </span>
</li>
<div class="clear MBT-sliderImage"></div> </ul>
</div>
<br/>

Bien, ahora paso a explicarles algunas cosas.
Todo lo que está en color rojo ustedes lo reemplazan por lo que ahí mismo dice, URL de la imágen, título y descripción, eso es sencillo. Luego en azul les dejé marcado las medidas que va a tener el contenedor de las descripciones de las imágenes, eso lo van a tener que ajustar acorde al lugar que lo quieran poner en sus blogs. En los estilos les marqué al lado de algunas los valores que tienen que modificar para que se vea distinto. En este caso el Slideshow lo hice relativamente pequeño porque es uno de muestra, pero ustedes sólo configuran el ancho y el alto y ya está. Luego en la parte del código donde ustedes ponen las imágenes, descripción y título les marqué en negrita las palabras bottom, top, right, left, esto es la posición de cada descripción, si la quieren a la derecha, izquierda, abajo o arriba, simplemente cambian esos valores y listo.

Si quieren agregar más simplemente añaden este código antes de <div class="clear MBT-sliderImage"></div> </ul>.

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>Título de la imágen</h3> Descripción de la imágen 6 -  BLOGGER </span>
</li>

Y si quieren quitar imágenes simplemente remueven la misma parte del código anterior.