Nivo Slider en el blog

Nivo Slider en un popular y vistoso plugin que usa JQuery, y que nos permite mostrar imágenes con variados estilos y efectos de transición y agregarles enlaces y leyendas. Y aunque su versión original era para WordPress (había que pagar por el plugin para incluírlo), para blogger lo sacaron completamente gratuito (otro punto a favor para el gigante de Mountain View) personalizable y todo.

Puedes ver una demostración aquí.

Implementarlo en la plantilla de blogger solo requiere de un poco de atención, nada del otro mundo. Primero con los artilugios expandidos, pega jQuery, la última versión, antes de </head>

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

O esta version, por si la anterior te trae problemas.

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

Recuerda que si ya tienes agregado jQuery en tu plantilla no debes ponerlo otra vez o el script te dará dolor de cabeza.

Ahora, justo después de ello agrega lo siguiente:

<script src='//sites.google.com/site/scriptskarla/archivos/Nivoslider.js' type='text/javascript'/>   

 <script type='text/javascript'>

   //<![CDATA[

    $(window).load(function() {

    $('#slider').nivoSlider({effect: 'fade'});

});

//]]>

    </script>

Siempre da vista previa primero por si algo sale mal. Si todo está ok, pega el script antes de ]]></b:skin>

/*
 * 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
 */

.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;
}

.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:246px;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}

.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;
}

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yJyHs2Sw9lydq9W9PUFaLaM2AQOMEBUHLbbtWCwuXptYya-NnSf8HUR8OUOVf1fweLftJ8z1JaZ7bJFC8LzQbQEZiyGJkDAD62-NsNQmb2eLx5q_iKgQF_pn4-e_5aQ1-U2rdrYcytCv/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;
    height:246px;
}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHujb6mxfrGNyT7Z4MBvy2fBHdNiP_-kNy5tYM9R7oyYmaVam027SzFFrzPASMt5EPU7IwDYyh9BG2ypdg2aErzGcPSDrt29whDnRYGqKJm-ORMSdQ5I_iXU1CEzT92tH-9CgiMP_1Mi27/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAWo4fK6n-cQ8WkqpNfiYdi33nQe73Y9uC0H6sPPwAHnXqWgK6PkQapNJSuj22-NwADc7_CT4iN8uT2tLp95Wcnu-AxCmtki7eBxNmZcfelglsedPhGaVHnI1wDeYTCBYYJ8sj310Z0jZ4/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;
}

Nuevamente vista previa, si todo está ok, busca ahora <div id='main-wrapper 2'/> y hasta el cierre de este div </b:section> (para que las imágenes salgan debajo de la cabecera del blog) y debajo pega lo siguiente:

 <div class="nivoSlider" id="slider">
<a href="#"><img alt="" src="url-imagen" title="agregar-leyenda"/></a>

<img alt="" src="url-imagen" title="agregar-leyenda" />

<img alt="" src="url-imagen" title="agregar leyenda" />
<img alt="" src="url-imagen" title="agregar-leyenda" />
<img alt="" src="url-imagen" title="agregar-leyenda" />
</div>

Lo que puedes personalizar:

Primero que nada lo que está en verde son los créditos del autor que no debes borrar, así lo pide él y es una petición legítima pues recuerda que es el dueño del script y lo cede gratuitamente.

El efecto de transición es ‘fade’ (el que yo elegí), puedes escoger entre fold, ramdom, sliceup, etc.; el ancho de las imágenes es 618px y el alto 246px, el mismo del slider; puedes jugar con las medidas hasta buscar la que más se adapte a lo que quieres, pero recuerda que tiene que coincidir con el ancho y alto del slider. En los enlaces de las imágenes cambia # por la dirección de tu blog, en url-imagen pones la url de tu imagen.

El script esta para mostrar cinco imágenes, no es recomendable poner más pues afectaría la carga de tu blog (lo hará más lento, de seguro) y si quieres agregar alguna leyenda a las imágenes cambias agregar leyenda por la frase que quieras ponerle, o si no eliminas esa parte, o lo dejas en blanco.

Por lo demás, no creo que me falta explicar nada más.