Pequeñas diapositivas con imágenes, descripción, enlaces y efectos

Enseñaré una vez más un truco con efectos Jquery, que como muchos saben, casi siempre nos sorprende con sus efectos de transición y demás.
En esta ocasión se trata de una serie de imágenes que van rotando siempre con sus respectivos títulos y enlaces. Y además con transiciones!

Instalar diapositivas en el blog

Para estos vamos a hacer cambios en la plantilla yendo a Blogger → Diseño → Edición de HTML → Presionamos ctrl+f para buscar:
]]></b:skin>
En donde arriba de este código pegamos el siguiente código CSS:

#s3slider {
border:5px solid #000;
width:250px;
height:190px;
position: relative;
overflow: hidden;
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px;
position: absolute;
top: 0;
margin-left: 0;
}

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

.s3sliderImage span {
position: absolute;
left: 0;
text-indent: 0px;
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: block;
top: 0;

/*
if you put
top: 0; ->
if you put
bottom: 0; ->
*/
}

.clear {
clear: both;
}

Cuando hayas pegado ese código busca lo siguiente: </head>
y pega arriba de el mismo, el siguiente código Javascript:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

Una vez hecho los dos pasos, ya terminaste de instalar los plugins jquery para los efectos y el estilo de todos los elementos.
Ahora necesitamos que el elemento se vea en el blog. Vamos a Diseño → Elementos de la página → Añadir un gadget → Modo HTML/Javascript y pegamos el código siguiente:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="URL de enlace de la imagen 1" target="_blank" rel="nofollow"><img border="0" alt="Describe el contenido de imagen 1" width="250" src="URL de imagen 1" height="190"/></a>
<span>Título 1</span>
</li>
<li class="s3sliderImage">
<a href="URL de enlace de la imagen 2" target="_blank" rel="nofollow"><img border="0" alt="Describe el contenido de imagen 2" width="250" src="URL de imagen 2" height="190"/></a>
<span>Título 2</span>
</li>
<li class="s3sliderImage">
<a href="URL de enlace de la imagen 3" target="_blank" rel="nofollow"><img width="250" height="190" alt="Describe el contenido de imagen 3" src="URL de imagen 3"/></a>
<span>Título 3</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Modifica las palabras coloreadas por lo que indican las palabras de cada atributo.
En caso de que hayan problemas, es decir, que no suceda nada. Recordar asignar el gadget siempre en el sidebar o sea en la barra lateral (izquierda o derecha).

IMPORTANTE:
Lo más probable es que este truco no funcionen con las plantillas clásicas de Blogger, es decir las plantillas antiguas. Te recomendamos descargar una plantilla en Btemplates.com o diseñar una plantilla en Blogger con el nuevo diseñador de plantillas de Blogger.

Posteado en: Diapositivas,Gadgets,imágenes,Intermedio,Jquery