Nivo Slider » slideshow con varios efectos :Diversas y Variadas

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(http://3.bp.blogspot.com/-uY-843TxLu4/T3D3Bk4mxoI/AAAAAAAABfo/CL-VgavJWxk/s000/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:

Nivo Slider

32 opinaron:

Graciela: Me encanta! ya lo probaré :D

Besos!; 28.3.12
G: El Slider se ve súper. Lo agregaré !; 17.4.12
Juan Carlos P: Este slider está buenísimo.; 17.4.12
squirrel: este slideshow se ve relamente lindo, quiero agregarlo a mi blog pero como no tengo mucha experiencia en el tema de los odigos, no se si fuese posible que hagas un video de este tutorial, seria genial.
espero que se pueda hacer (:; 10.11.12
Nifeno: La imagen se queda cargando eternamente, no me funciona. T^T

Gracias de todas formas, tienes un blog muy bonito.; 11.11.12
Madrid Suena: Creo que el problema es que no explicas dónde tiene que ir la url del enlace y de la imagen.; 23.11.12
Rosario T. Palacios: Utilísimo y funciona a la primera, ¡muchísimas gracias!; 3.12.12
arturo lozz: oie! como puedo agregarlo mediante block de notas esq no encuentro la etiqeta ]]>; 19.12.12
arturo lozz: oie! como puedo agregarlo mediante block de notas esq no encuentro la etiqeta ]]>; 19.12.12
ALBERTO GARCÍA MÓNICA GONZÁLEZ: como puedo cambiar la posición de la barra de los títulos, para bajarla un poco,gracias; 4.1.13
Gaston Sanchez: Hice todo lo que tu has dicho pero no consegui poner mi slideshow...
Me podrias pasar tu html de las imágenes de tu slide???
Asi copio y pego y veo en que estoy fallando.
Gracias.
Mi pagina es angusbellasombra.com
Quiero poner un slide en la entrada principal.

Slds.; 6.1.13
Noelia: gracias por el post esta muy clarito solo que no visualizo las imagenes por completo,a que se debe al css? este es mi blog nelytapersex.blogspot.com; 10.1.13
AlexxxD888: Hola, sabes que segui cada paso de tu tutorial, incluso puse el /head separado del los codigos, el skin lo puse unido como sale en el video junto al codigo pero resulta que no me funcióna, vi 2 veces el video! incluso en el gadget probé con tu mismo codigo de imagenes pero igual me sale el circulito de cargando y no me sale ninguna imagen! ayuda
Estoy seguro que es un problema de la plantilla HTML pero nose donde porque hice todo pero todo igual! tal ves deva agregar un codigo pequeño especial nose, porfavor ayudame... Gracias; 3.2.13
marcos rodriguez: HOlaa, el slideshow no me sale centrado, sino que alineado a la izquierda que sera?; 12.2.13
Marcos Vargas: solo una pregunta: Como controlas la velocidad del slide?; 20.3.13
Julie Tisdale: como se hace pra cambiar de imagenes¿?; 18.4.13
elevengt: ESTIMADA EXCELENTE BLOG Y MUY BUEN APORTE.
CONSULTA: COMO HAGO PARA QUE AL PRESIONAR EN LAS IMÁGENES ME LLEVE A UNA PAGINA DISTINTA, PERO EN UNA NUEVA PESTAÑA Y NO QUE CAMBIE LA ACTUAL POR OTRA.; 2.5.13
Úrsula: Tengo un problema! No puedo abrir el segundo codigo HTML, el que pone "Ver SCRIPT"... Que hago? Me lo puedes pasar?; 8.5.13
Úrsula: Hola de nuevo!
Ya he conseguido ver el codigo... pero ahora en mi plantilla no tengo esta parte "]]>", me dice cuando la busco que no esta. Hay alguna solución?; 10.5.13
Ana Mª López: hola,he intentado hacerlo y no me sale,donde tiene q ir el slider me salen los numeros 1234,no me salen imagenes,me puedes ayudar?; 15.5.13

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.