Consejos Blogger: Nivo Slider » slideshow con varios efectos

Hoy les traigo un slideshow de imágenes muy vistoso, bonito y fácil de instalar en nuestro blog.

( ↪DEMO)

El slider se llama Nivo y a continuación les enseñaré cómo instalarlo:

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:

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

3.§ Debajo del código anterior, pegaremos el siguiente script de Nivo Slider o si gustan pueden guardalo en un documento y subirlo en algún alojamiento:

✵ Ver SCRIPT [+/-]

4.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:

#slider-container {
width: 940px;
height: 380px;
background: #FFF;
margin-bottom: 15px;}

.nivoSlider {
position:relative;}

.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:60;
display:none;}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;}

.nivo-caption {
position:absolute;
right:0px;
top:250px;
background: #ffffff; /*color del rectángulo transparente*/
color:#DF7BDA;
opacity:0.8;
width: 100%;
z-index:89;
display: inline;}

.nivo-caption p {
padding:3px;
margin:0;
font-size: 20px;
color: #DF7BDA; /*para modificar color del texto*/
text-align: right;
font-family: 'PT Sans', Helvetica, Arial;
}

.nivo-caption a {
display:inline !important;
color: #DF7BDA;}

.nivo-html-caption {
display:none;}

.nivo-directionNav a {
display:none;
position:absolute;
top:45%;
z-index:99;
cursor:pointer;}

.nivo-prevNav {
left:0px;}

.nivo-nextNav {
right:0px;}

.nivo-controlNav a {
position:
relative;
z-index:99;
cursor:pointer;}

.nivo-controlNav a.active {
font-weight:bold;}

#slider {
float: left;
position:relative;
width:600px;
height:300px;
background: #000 url(http://img833.imageshack.us/img833/4175/loadingpy.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:230px;
bottom:-40px;
}

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZvA2GqAI9MZuqqig89mQS07KcD_LFrw71ClVL8_KuSjGHlE-d5Mzc_i6rVKWeFbNdhaWMovQJ3ztIvlT4EF3XrJojpzcoPRuYVgZWT4M0DQ0WtLzBCU4JypR18SFU4GG3O5w3t69Fd_u/s0/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:7px;
float:left;
}

.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:none;
height:0px;
background:url no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {
background-position: -30px 0;
right:15px;
}

a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
}

.nivo-caption a {
color:#000;
text-decoration:underline;
}

5.§ Finalmente, para agregar las imágenes del slide, armaremos el siguiente HTML en el lugar donde queramos agregarlo (debajo de la cabecera, antes del footer, etc) :

<div id='slider'>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
<a href='#' title=''><img alt='' src='imagen.jpg' title=''/></a>
</div>

6.§ Vamos a vista previa y si todo está bien le damos a Guardar. Ahora pueden modificarlo a su gusto. En la página web del slide podrán ver todos los efectos que pueden agregarse.

Video tutorial

También les dejo el tutorial en forma de video: