Slider de imágenes con jQuery

Este es una carrusel muy fácil, que podemos ingresar en cualquier entrada de nuestro blog, o un gadget y colocarlo en cualquier parte de nuestro blog. (Normalmente encima de las entradas de nuestro blog)
Se compone de JQuery,  con un contenedor general e imágenes simples, que pasan automáticamente.

Este sera el resultado

Lo primero que tenemos que hacer es irnos a:
Tema> Editar HTML 
comprobamos que tengamos instalado la libreria de jQuery .
Si no la tenemos buscamos }]]></b:skin> , y añadimos justo antes este codigo.

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

Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Ahora guardamos nuestra plantilla.
Para poner las imagenes donde  queremos que aparezcan ponemos este codigo

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
<div><img src="URL_IMAGEN1"/></div>
    </div>

Cambios lo marcado en azul por la url de nuestra imagen.
Si queremos añadir mas imágenes pegamos esta linea antes del ultimo </div>
<div><img src="URL_IMAGEN1"/></div>

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso