Como poner en el blog el popular Nivo Slider

Nivo Slider es un plugin para jQuery muy popular, que nos permite crear un slideshow de fotografías o imágenes con diferentes efectos o estilos en las transiciones, lo que lo hace ver muy dinámico y atractivo. Es muy personalizable, y permite agregar leyendas y enlaces a las imágenes.  AnimeXtremo me había comentado que quería implementarlo en su blog, así que llego la hora de ver como ponerlo.

Al descargar el archivo desde su página, encontraremos 3 temas o estilos disponibles que son el "Default", "Orman", y "Pascal", en mi demostración y en el código que agregaré en la explicación, usaré el "Default".

Demostración 

Lo que necesitamos:
1. jQuery
2. Alojar el script y ponerlo en el blog, aunque yo lo facilitare desde aquí, es importante que tu lo alojes y los sustituyas en el código
3. El CSS
4. El HTML donde pondrás las imágenes, leyendas etc,

Cómo poner Nivo Slider paso a paso

Paso 1. Vas a la edición de HTML de la plantilla, y antes de  </head> agregas jQuery:

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

Nota: Si ya lo tienes no lo agregues. Actualmente ya fué librerada la versión 1.7.0 de jQuery, pero según comprobé provoca ciertos problemas en el Slider, por ello puse la versión anterior.

Paso 2. Inmediatamente después agregas esto:

  <script src='//sites.google.com/site/scriptskarla/archivos/Nivoslider.js' type='text/javascript'/>   
<script type='text/javascript'>
   //<![CDATA[
    $(window).load(function() {
    $('#slider').nivoSlider();
});
//]]>
    </script>

IMPORTANTE: En el caso del script  marcado de rojo, te recomiendo ampliamente que alojes el archivo, no vaya a ser que lo borre por accidente etc, etc, para ello, solo copia la dirección del archivo, lo abres en el navegador y la guardas para luego subirla al servidor, y obtener la dirección propia, para luego sustituirla.

Paso 3. Verifica en vista previa y si todo luce bien, guarda los cambios.

Paso 4. Ve a Diseño > Personalizar > Avanzado> Añadir CSS y en el campo, pega el siguiente CSS:

/*
 * jQuery Nivo Slider v2.6
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * March 2010
 */

/* Los estilos del Nivo Slider */
.nivoSlider {
position:relative;
width: 618px;
height:246px;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* Las cajas de control deslizante */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:246px;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Estilos de la leyenda */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
    display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Controles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/
.nivoSlider {
background:#fff url(http://1.bp.blogspot.com/-F3GuKNWETTM/Tsv0LG2vxbI/AAAAAAAAIQ4/7h7e0zg2KzM/s400/loading.gif) no-repeat 50% 50%; /*con fondo blanco*/
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
    width: 618px; /* Ancho de la imagen*/
    height:246px; /*Alto de la imagen */
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
    margin-left:-40px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://2.bp.blogspot.com/-3PPlET9LGCk/TsvzqTQLSjI/AAAAAAAAIQg/-gWXrxopXiE/s400/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://2.bp.blogspot.com/-9YikGTe_eM4/Tsvz4u8mxZI/AAAAAAAAIQs/Qd16Tdfa7Yk/s400/arrows.png) no-repeat 0 0;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
        background-position:10px 0;
left:15px;
}
.nivo-caption {
    font: inherit;
}
.nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
    color:#fff;
}

Notas:

• Hay tres imágenes en el CSS que resalte de rojo, que te recomiendo que alojes en Blogger,para luego sustituirlas respectivamente.
• No remuevas los créditos, así lo pide el autor.
• Si quieres puedes comprimir el CSS
• Viene configurado para mostrar imagenes de 618 x 246 pixeles.

Paso 5. Guarda los cambios en aplicar al blog.

Paso 6. Finalmente lo que falta es agregar el HTML ya sea en una sección del blog o una página estática, en donde pondrás las imágenes, las leyendas, y direcciones web de las páginas que quisieras enlazar al hacer click sobre una imagen si lo necesitaras.

<div class="nivoSlider" id="slider">
<a href="#"><img alt="" src="imagen.jpg" /></a>
                <img alt="" src="imagen.jpg" title="la leyenda de la imagen" />
                <img alt="" src="imagen.jpg" title="la leyenda de la imagen" />
            </div>

El código anterior está listo para mostrar tres imágenes. Sustituye los datos según se muestra y que están resaltados con rojo. En donde está la "#" pones la dirección web a donde quieres que te envié al hacer click sobre la imagen. Si no la quieres elimina:

<a href="#">  y  </a> que envuelve el código de la imagen.

Si no quisieras leyenda en las imágenes, eliminas esta parte de cada imagen:

title="la leyenda"


Si vas a poner mas imágenes repite esto:

 <img alt="" src="imagen.jpg" title="la leyenda de la imagen" />

Si quieres poner mas imágenes con enlace entonces usa esto:

<a href="#"><img alt="" src="imagen.jpg" title="la leyenda de la imagen"/></a>

De manera opcional, se pueden controlar algunos parámetros como la velocidad entre cada transición, controlar el estilo de las transiciones, etc, y en su página  los explican, no los usé en la demostración,  pero estos son los que creo podrían interesar y están resaltados de azul:

<script type="text/javascript">
$(window).load(function() {  
$('#slider').nivoSlider({      
effect: 'random', // el tipo de transición: 'fold,fade,sliceDown'      
animSpeed: 500, // La velocidad entre cada transición      
pauseTime: 3000, // Cuanto tiempo tardará en mostrar cada diapositiva
</script>

Ahora lo que sigue, es disfrutar del slideshow ;)