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:


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

60 opinaron:

Graciela

Me encanta! ya lo probaré :D

Besos!

Jéssica YK

» Graciela:
Qué bueno que te gustó !

S@lu2<

Responder
G

El Slider se ve súper. Lo agregaré !

Jéssica YK

» G:
Seguro quedará lindo en tu blog.

S@lu2

Responder
Juan Carlos P

Este slider está buenísimo.

Jéssica YK

» Juan Carlos P:
Qué bueno que te gustó, gracias poe el comentario !

S@lu2

Responder
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 (:

Jéssica YK

» squirrel:
Espero que te haya sido de yuda el tutorial :)

S@lu2

Responder
Nifeno

La imagen se queda cargando eternamente, no me funciona. T^T

Gracias de todas formas, tienes un blog muy bonito.

Jéssica YK

» Nifeno:
El problema persiste o lo pudiste solucionar, para ayudarte .

S@lu2

Responder
Madrid Suena

Creo que el problema es que no explicas dónde tiene que ir la url del enlace y de la imagen.

Jéssica YK

» Madrid Suena:
Sí lo menciono tanto en el video tutorial como en la entrada.

En el paso 5.§ hay una caja de código. La url del enlace se coloca en lugar de # y la url de la imagen se coloca donde dice imagen.jpg

Si necesitas alguna ayuda para colocar el slide, no dudes en avisarme.

S@lu2

Responder
Rosario T. Palacios

Utilísimo y funciona a la primera, ¡muchísimas gracias!

Jéssica YK

» Rosario T. Palacios:
Gracias a ti por la visita y por el comentario.

S@lu2

Responder
arturo lozz

oie! como puedo agregarlo mediante block de notas esq no encuentro la etiqeta ]]>

Responder
arturo lozz

oie! como puedo agregarlo mediante block de notas esq no encuentro la etiqeta ]]>

Responder
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

Jéssica YK

» Alberto García Mónica González:
Para ello busca esta porción de código del CSS:

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

El valor que está resaltado en negrita (top:250px;) es el valor que debes modificar si quieres subir o bajar la parte del título. Si le bajas el valor, la barra estará arríba. Si el valor aumenta, la barra estará en la parte inferior.

S@lu2

Responder
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.

Jéssica YK

» Gaston Sanchez:
Claro, te lo dejo, pero es el mismo que está en el tutorial:

<div id='slider'><a href='#' title='Tengo tu mismo color...'><img alt='' src='http://1.bp.blogspot.com/-nF--CX7CuAs/T3JDfR53TiI/AAAAAAAABf0/p1eDLLNMynE/s000/coffee1.jpg' title='Tengo tu mismo color...'/></a><a href='#' title='...y tu misma procedencia...'><img alt='' src='http://3.bp.blogspot.com/-SYY7Rq178iE/T3JDgPuyQzI/AAAAAAAABgM/ZA5JqvSH92o/s00/coffee3.jpg' title='...y tu misma procedencia...'/></a><a href='#' title='Somos aroma y esencia...'><img alt='' src='http://2.bp.blogspot.com/-RIrRPC0ZjWA/T3JDfjiD2_I/AAAAAAAABgA/SSgtgpzhCAA/s000/coffee2.jpg' title='Somos aroma y esencia...'/></a><a href='#' title='...y amargo es nuestro sabor.'><img alt='' src='http://4.bp.blogspot.com/-HS_lxhvIl2E/T3JDgTQW-OI/AAAAAAAABgY/po8UuAvItRE/s000/coffee4.jpg' title='...y amargo es nuestro sabor.'/></a></div>

S@lu2

Responder
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

Responder
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

Jéssica YK

» Alexx888:
Tendría que revisar tu plantilla para ver qué está sucediendo.
Si seguiste todos los pasos y no te funciona, envíame una copia de tu plantilla. Descárgala siguiendo las instrucciones de
este post y envíame el archivo a mi correo que encontrarás en la parte superior izquierda (donde dice Contacto).

S@lu2

Responder
marcos rodriguez

HOlaa, el slideshow no me sale centrado, sino que alineado a la izquierda que sera?

Jéssica YK

» marcos rodriguez:
Pásame el link de tu blog para revisarlo y ayudarte.

S@lu2

Responder
Julie Tisdale

como se hace pra cambiar de imagenes¿?

Jéssica YK

» Julie Tisdale:
En el paso 5.§ reemplaza "imagen.jpg" por la URL de tu imagen.

S@lu2

Responder
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.

Jéssica YK

» elevengt:
Para que el link se abra en nueva pestaña sólo agrega target="_blank" al final de cada enlace. Por ejemplo :

<a href='aqui_link' title='' target="_blank">

También, si deseas saber más sobre los enlaces, te puede ser de utilidad este post: http://diyva.blogspot.com/2009/06/sobre-enlaces-o-links-1.html

S@lu2

Responder
Úrsula

Tengo un problema! No puedo abrir el segundo codigo HTML, el que pone "Ver SCRIPT"... Que hago? Me lo puedes pasar?

Responder
Ú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?

Jéssica YK

» Úrsula:
Sí está. Lo que tienes que hacer es dar un clic dentro de la plantilla, luego presionar CTRL+F aparecerá una casilla dentro de la plantilla ahí escribes ]]></b:skin>

S@lu2

Responder
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?

SongfulnamesS Belisario Condori

ya me solucione el problema
gracias
a ver fijate
que tal me quedo
http://songfulmovies.blogspot.com/

Responder
SongfulnamesS Belisario Condori
Este comentario ha sido eliminado por el autor.
Responder
HECHO EN FIME

a mi no solo me funciona el pagina principal, en las entradas no carga el slider, coloque el slider sobre las entradas

Responder
Celer

gracias muchas gracias :)

Responder
Danny Lever

Hola, gracias por el tutorial. Tengo dos problemas
1. Las imágenes me salen alineadas a la izquierda y lo deseo entrado.
2. No he podido cambiarle el tamaño a las imágenes
e agradecería que me dijeras como solucionar ambos problemas. Este el link de mi blog http://lever-tutorialinformatico.blogspot.com/

Responder
Inmaginarte
Este comentario ha sido eliminado por el autor.
Responder
Inmaginarte

Hola:

lo primero, mil gracias por tu blog y por dedicar tu tiempo a echarnos una mano. Mira, por fin he conseguido poner el slideshow en mi blog pero me gustaría que ocupara todo el ancho de la página y que las fotos no estuvieran alineadas a la izquierda sino centradas. ¿Me podrías decir cómo hacerlo? Llevo horas sin conseguirlo. Mil gracias

Responder
Jhon Jairo Gordo Pinzon

hola gracias por el aporte, quisiera cambiar el color del rectángulo, de transparenta a blanco me puedes decir como lo puedo hacer gracias

Responder
Ignacio Sobrevilla

Hola, muy bueno tu post.
Me gustaría saber como puedo cambiar el color de los títulos de las imágenes, y como puedo dejas un margen entre el slideshow y el principio de mi entrada principal, ya que he incluido el html ahí en vez de en un gadget para que no salga en todas las entradas de mi blog. un saludo, y de nuevo mil gracias.

Responder
giovanni

hola
me sale cargando infinitamente y no se visualiza las imagens

Responder
Freddy HCO

Hola cordial saludo
que debo realizar para que me quede centrado
este es el blog:
http://serviciosamigableshco.blogspot.com/
gracias por tu ayuda

Responder
Gonzalo Del Carpio Zavaleta

no me sale el slideshow, haber si por favor revisa mi blog como ha quedado www.djgonzalostream.blogspot.com no se en que pueda haber fallado

Responder
Lozzle Rainbow

Hola !
Me ha encantado tu entrada ! pero tengo un pequeño problemita ! Se tarda cargando muchísimo ! He hecho todo tal cuál pero me sigue saliendo ese problema ¿Que puedo hacer?

Responder
Romertheroots

Hola amiga buenas tarde como esta ? Primeramente te escribo por tus videos son muy buenos y explican muy bien para construir un blogger .
Te escribo ya que tengo un problema con la parte del slider yo descargue una plantilla que es este modelo http://boardmag.blogspot.com/ el muchacho que la creo me paso el link de descarga la tengo todo bien pero la parte superior e inferior del blog esta sin el slider http://romertheroots.blogspot.com/ así me sale hice lo que tu esta explicando pero nada no me funciona para ver si me puedes ayudar con este problema que tengo ..

De ante mano gracias .
Saludo desde Venezuela

Responder
Maou-san Blacklist
Este comentario ha sido eliminado por el autor.
Responder
Maou-san Blacklist

Una pregunta , quisiera saber como puedo quitar los puntitos de abajo que son para darle click a cierta imagen , cuando lo pongo en mi plantilla se posan encima de mis entradas y es algo molestoso y aparte las imagenes salen alineadas a un lado , quisiera que estuvieran al centro, dejo un link a mi pagina , gracias de antemano http://maou-san.blogspot.com/

Responder
Maou-san Blacklist

Otra consulta , instale el slider en otra plantilla aparte de la que ya mencione y me sale el logo de imageshack diciendo imagen no disponible y es la imagen que corresponde al loading , no me funciona el slider

Responder
Maou-san Blacklist

http://blogdepruebasmaousan.blogspot.com/
este es mi blog y una muestra de como se ve :c

Responder
La ebm

Hola, ya lo e puesto en mi blog pero podrías ponerlo para poder poner también una URL de enlace y así cuando vallan saliendo las fotos que podamos pinchar encima de ellas y nos lleven a otra pagina, GRACIAS

Responder
La ebm

y para que no pasen tan deprisa las fotos donde se cambia eso? gracias

Responder
Marianini

Hola, pues hice todo y no me salen las imagenes :/
No entiendo la parte de '#' en tu codigo no lo cambias y las imagenes no entiendo la parte de "alojadas" , ya las puse del photobuckey y nada, de mi mismo blog y nada y ni del face, me podrias ayudar, gracias.

Jéssica YK

» Marianini:
En lugar de los '#' tienes que colocar la URL del post (entrada) de tu blog hacia donde irá al hacer clic sobre la imagen.

Y donde dice 'imagen.jpg' colocas la URL de la imagen. Para extraer la URL de la imagen alojada, sólo da clic derecho sobre la imagen que tengas en Photobucket o de tu blog y das clic en "copiar la ruta de la imagen". Hay otra alternativa que dice "copoar la ruta del enlace" pero tiene que decir ruta de 'la imagen'. Claro esto es en Firefox. Si usas otro navegador (Chrome, Explorer, etc.) debe haber una opción similar.

Si necesitas más ayuda, sólo avísame.

S@lu2

Responder
Génesis Espinal

y si quiero poner esa galeria en una entrada.. se puede? (jemplo, asi como la tienes tu, dentro de un documento)

Responder
omar olivares

Hola, quisiera saber como puedo modificar el tamaño del slider. Esto debido a que mis imágenes están mas pequeñas que los bordes del slider. Muchas gracias por su ayuda y excelente post.

Responder
Destino Napo

exelente tutorial disculpa la pregunta pero como hago para poner los slider dentro las entredas ?

Responder
Marcks Rosales

hola saludos desde peru, nada todo excelente pero las fotos no cargan sale en blanco y pesan desde 42kb, 65kb y 98 kb
alguna solucion

Responder
Marcks Rosales

hola soy martin nuevamente desde peru, hoy un abrazo fuerticimo te agradesco tu ayuda y muchos saludos y bendiciones para ti y tu familia.............

Responder

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.

inicio