Añadir Nivo Slider en Blogger

Tutoriales Publicado por Claudia en enero 3, 2012

Nivo Slider

Nivo Slider es uno de los sliders jQuery más increíbles: es liviano (la versión comprimida pesa 12kb), tiene 16 efectos de transición, control de navegación y títulos HTML. Además, es completamente gratuito y configurable.

A continuación verás cómo incorporar Nivo Slider en pocos pasos en cualquier plantilla Blogger.

1. Carga Nivo Slider en tu plantilla

Primero carga la última versión de jQuery desde Google antes del cierre de </body>:

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

Luego, incluye el script de Nivo Slider directamente en tu plantilla justo abajo del código anterior:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type='text/javascript'>
//<![CDATA[
/*
 * jQuery Nivo Slider v2.3
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
(function(b){var a=function(j,q){var g=b.extend({},b.fn.nivoSlider.defaults,q);var m={currentSlide:0,currentImage:"",totalSlides:0,randAnim:"",running:false,paused:false,stop:false};var d=b(j);d.data("nivo:vars",m);d.css("position","relative");d.addClass("nivoSlider");var e=d.children();e.each(function(){var t=b(this);var s="";if(!t.is("img")){if(t.is("a")){t.addClass("nivo-imageLink");s=t}t=t.find("img:first")}var r=t.width();if(r==0){r=t.attr("width")}var i=t.height();if(i==0){i=t.attr("height")}if(r>d.width()){d.width(r)}if(i>d.height()){d.height(i)}if(s!=""){s.css("display","none")}t.css("display","none");m.totalSlides++});if(g.startSlide>0){if(g.startSlide>=m.totalSlides){g.startSlide=m.totalSlides-1}m.currentSlide=g.startSlide}if(b(e[m.currentSlide]).is("img")){m.currentImage=b(e[m.currentSlide])}else{m.currentImage=b(e[m.currentSlide]).find("img:first")}if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}d.css("background","url("+m.currentImage.attr("src")+") no-repeat");for(var k=0;k<g.slices;k++){var o=Math.round(d.width()/g.slices);if(k==g.slices-1){d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:(d.width()-(o*k))+"px"}))}else{d.append(b('<div class="nivo-slice"></div>').css({left:(o*k)+"px",width:o+"px"}))}}d.append(b('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:g.captionOpacity}));if(m.currentImage.attr("title")!=""){var n=m.currentImage.attr("title");if(n.substr(0,1)=="#"){n=b(n).html()}b(".nivo-caption p",d).html(n);b(".nivo-caption",d).fadeIn(g.animSpeed)}var c=0;if(!g.manualAdvance&&e.length>1){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}if(g.directionNav){d.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');if(g.directionNavHide){b(".nivo-directionNav",d).hide();d.hover(function(){b(".nivo-directionNav",d).show()},function(){b(".nivo-directionNav",d).hide()})}b("a.nivo-prevNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")});b("a.nivo-nextNav",d).live("click",function(){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")})}if(g.controlNav){var l=b('<div class="nivo-controlNav"></div>');d.append(l);for(var k=0;k<e.length;k++){if(g.controlNavThumbs){var f=e.eq(k);if(!f.is("img")){f=f.find("img:first")}if(g.controlNavThumbsFromRel){l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("rel")+'" alt="" /></a>')}else{l.append('<a class="nivo-control" rel="'+k+'"><img src="'+f.attr("src").replace(g.controlNavThumbsSearch,g.controlNavThumbsReplace)+'" alt="" /></a>')}}else{l.append('<a class="nivo-control" rel="'+k+'">'+(k+1)+"</a>")}}b(".nivo-controlNav a:eq("+m.currentSlide+")",d).addClass("active");b(".nivo-controlNav a",d).live("click",function(){if(m.running){return false}if(b(this).hasClass("active")){return false}clearInterval(c);c="";d.css("background","url("+m.currentImage.attr("src")+") no-repeat");m.currentSlide=b(this).attr("rel")-1;p(d,e,g,"control")})}if(g.keyboardNav){b(window).keypress(function(i){if(i.keyCode=="37"){if(m.running){return false}clearInterval(c);c="";m.currentSlide-=2;p(d,e,g,"prev")}if(i.keyCode=="39"){if(m.running){return false}clearInterval(c);c="";p(d,e,g,"next")}})}if(g.pauseOnHover){d.hover(function(){m.paused=true;clearInterval(c);c=""},function(){m.paused=false;if(c==""&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}})}d.bind("nivo:animFinished",function(){m.running=false;b(e).each(function(){if(b(this).is("a")){b(this).css("display","none")}});if(b(e[m.currentSlide]).is("a")){b(e[m.currentSlide]).css("display","block")}if(c==""&&!m.paused&&!g.manualAdvance){c=setInterval(function(){p(d,e,g,false)},g.pauseTime)}g.afterChange.call(this)});var p=function(r,s,u,x){var y=r.data("nivo:vars");if(y&&(y.currentSlide==y.totalSlides-1)){u.lastSlide.call(this)}if((!y||y.stop)&&!x){return false}u.beforeChange.call(this);if(!x){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}else{if(x=="prev"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}if(x=="next"){r.css("background","url("+y.currentImage.attr("src")+") no-repeat")}}y.currentSlide++;if(y.currentSlide==y.totalSlides){y.currentSlide=0;u.slideshowEnd.call(this)}if(y.currentSlide<0){y.currentSlide=(y.totalSlides-1)}if(b(s[y.currentSlide]).is("img")){y.currentImage=b(s[y.currentSlide])}else{y.currentImage=b(s[y.currentSlide]).find("img:first")}if(u.controlNav){b(".nivo-controlNav a",r).removeClass("active");b(".nivo-controlNav a:eq("+y.currentSlide+")",r).addClass("active")}if(y.currentImage.attr("title")!=""){var z=y.currentImage.attr("title");if(z.substr(0,1)=="#"){z=b(z).html()}if(b(".nivo-caption",r).css("display")=="block"){b(".nivo-caption p",r).fadeOut(u.animSpeed,function(){b(this).html(z);b(this).fadeIn(u.animSpeed)})}else{b(".nivo-caption p",r).html(z)}b(".nivo-caption",r).fadeIn(u.animSpeed)}else{b(".nivo-caption",r).fadeOut(u.animSpeed)}var w=0;b(".nivo-slice",r).each(function(){var i=Math.round(r.width()/u.slices);b(this).css({height:"0px",opacity:"0",background:"url("+y.currentImage.attr("src")+") no-repeat -"+((i+(w*i))-i)+"px 0%"});w++});if(u.effect=="random"){var A=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");y.randAnim=A[Math.floor(Math.random()*(A.length+1))];if(y.randAnim==undefined){y.randAnim="fade"}}if(u.effect.indexOf(",")!=-1){var A=u.effect.split(",");y.randAnim=b.trim(A[Math.floor(Math.random()*A.length)])}y.running=true;if(u.effect=="sliceDown"||u.effect=="sliceDownRight"||y.randAnim=="sliceDownRight"||u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceDownLeft"||y.randAnim=="sliceDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("top","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUp"||u.effect=="sliceUpRight"||y.randAnim=="sliceUpRight"||u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){var t=0;var w=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpLeft"||y.randAnim=="sliceUpLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);i.css("bottom","0px");if(w==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="sliceUpDown"||u.effect=="sliceUpDownRight"||y.randAnim=="sliceUpDown"||u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){var t=0;var w=0;var B=0;var C=b(".nivo-slice",r);if(u.effect=="sliceUpDownLeft"||y.randAnim=="sliceUpDownLeft"){C=b(".nivo-slice",r)._reverse()}C.each(function(){var i=b(this);if(w==0){i.css("top","0px");w++}else{i.css("bottom","0px");w=0}if(B==u.slices-1){setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({height:"100%",opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;B++})}else{if(u.effect=="fold"||y.randAnim=="fold"){var t=0;var w=0;b(".nivo-slice",r).each(function(){var i=b(this);var v=i.width();i.css({top:"0px",height:"100%",width:"0px"});if(w==u.slices-1){setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed,"",function(){r.trigger("nivo:animFinished")})},(100+t))}else{setTimeout(function(){i.animate({width:v,opacity:"1.0"},u.animSpeed)},(100+t))}t+=50;w++})}else{if(u.effect=="fade"||y.randAnim=="fade"){var w=0;b(".nivo-slice",r).each(function(){b(this).css("height","100%");if(w==u.slices-1){b(this).animate({opacity:"1.0"},(u.animSpeed*2),"",function(){r.trigger("nivo:animFinished")})}else{b(this).animate({opacity:"1.0"},(u.animSpeed*2))}w++})}}}}}};var h=function(i){if(this.console&&typeof console.log!="undefined"){console.log(i)}};this.stop=function(){if(!b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=true;h("Stop Slider")}};this.start=function(){if(b(j).data("nivo:vars").stop){b(j).data("nivo:vars").stop=false;h("Start Slider")}};g.afterLoad.call(this)};b.fn.nivoSlider=function(c){return this.each(function(){var d=b(this);if(d.data("nivoslider")){return}var e=new a(this,c);d.data("nivoslider",e)})};b.fn.nivoSlider.defaults={effect:"random",slices:15,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};b.fn._reverse=[].reverse})(jQuery);
//]]>
</script>
 
<script type='text/javascript'>
jQuery(window).load(function() {
 jQuery(&#39;#slider&#39;).nivoSlider();
 });
</script>

Estarás añadiendo la versión 2.3 comprimida de Nivo Slider (experimenté problemas con la 2.7.1), con efectos de transición aleatorios.

Los estilos CSS del slider

Ahora, añade los estilos justo antes de ]]></b:skin> en las plantillas antiguas de Blogger o en Diseño/Avanzado/Añadir CSS en el Diseñador de las nuevas plantillas Blogger:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/* NIVO SLIDER STYLES */
 
#slider-container {
margin-bottom: 50px;
}
 
.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;
left:0px;
bottom:0px;
background: #000;
color:#fff;
opacity:0.8;
width:100%;
z-index:89;
}
 
.nivo-caption p {
padding:5px;
margin:0;
font-size: 14px;
color: #FFF;
text-align: center;
}
 
.nivo-caption a {
display:inline !important;
color: #FFF;
}
 
.nivo-html-caption {
display:none;
}
 
.nivo-directionNav a {
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;
}
 
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
 
#slider {
position:relative;
width:560px;
height:280px;
background: #000 url(http://1.bp.blogspot.com/-F80SiDnYNs0/Ts0P4xXGd5I/AAAAAAAACp0/xA5AuZGzqEg/s1600/loading.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:210px;
bottom:-30px;
}
 
.nivo-controlNav a {
width:22px;
height: 22px;
background: url(http://1.bp.blogspot.com/-eVJeiVODCBI/Ts0P4-z2c6I/AAAAAAAACpo/31BXBfAbyP8/s1600/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:block;
width:30px;height:30px;
background:url(http://1.bp.blogspot.com/-MKlz8mA0xb4/Ts0P5ZLkoKI/AAAAAAAACp8/_DAgu3iSJWM/s1600/arrows.png) 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:#efe9d1;
text-decoration:underline;
}

Habrás notado que las dimensiones del slider son 560px de ancho por 280px de alto. Puedes modificar dichas dimensiones a tu gusto, así como otras propiedades que estimes conveniente.

3. Añade el HTML del slider en tu plantilla

Puedes poner el slider en la columna principal, justo antes de los artículos. En las plantillas viejas de Blogger, esto es justo bajo <div id='main-wrapper'>, y en las nuevas, bajo
<div class='main-outer'>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div class='crosscol'>
<div id='slider-container'>
 
<div id='slider'>
 
  <a href='http://angrybirds.themesnack.net/?p=24' title='Introducing WP Theme'>
 
 <img alt='' src='http://4.bp.blogspot.com/-dPjpuC2oyXM/Ts2hwaYzI_I/AAAAAAAACq8/PRrUt7GLXV8/s1600/5.jpg' title='Introducing WP Theme'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=21' title='Another image in a post'>
 
 <img alt='' src='http://1.bp.blogspot.com/-ENdSWyspy08/Ts2iKJP5szI/AAAAAAAACrI/QAvlVIReZQA/s1600/4.jpg' title='Another image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=17' title='An image in a post'>
 
 <img alt='' src='http://4.bp.blogspot.com/-bUQ83dpjBt8/Ts2ij6O9sFI/AAAAAAAACrU/4PSoxsafNug/s1600/31.jpg' title='An image in a post'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=6' title='Testing HTML elements'>
 
 <img alt='' src='http://1.bp.blogspot.com/-mUFbtJqKGsE/Ts2i2Ty0AAI/AAAAAAAACrg/WwLy-uer-5w/s1600/2.jpg' title='Testing HTML elements'/>
 
 </a>
 
  <a href='http://angrybirds.themesnack.net/?p=1' title='Category Hierarchy'>
 
 <img alt='' src='http://3.bp.blogspot.com/-uZG3YUPpUwg/Ts2jH1REctI/AAAAAAAACrs/qgyW1JddFRQ/s1600/1.jpg' title='Category Hierarchy'/>
 
 </a>
 
 </div>
 
<br clear='all'/>
 
</div>
 
      </div>
</b:if>
</b:if>

Este código con condicionales mostrará el slider sólo en la página principal, con 5 diapositivas. Puedes quitar o añadir más, aunque no es recomendable tener más de 6 porque puede retardar demasiado la carga de tu blog.

Para el código de cada diapositiva, tienes que modificar: (1) el enlace que dirige al post que quieras destacar; (2) el título (title) de dicho post; (3) El enlace directo (URL) a la imagen que quieras poner, que debe ser acorde a las dimensiones del slider (560×280 en este caso).

Consideraciones finales

  • Esta es la utilización básica de Nivo Slider en Blogger. Puedes hacer todas las modificaciones que quieras, en especial si tienes conocimientos de CSS y HTML.
  • Puedes cambiar las opciones y efectos como indica su autor: Nivo Slider jQuery Plugin Usage.
  • Recuerda optimizar para la web las imágenes que uses en tu slider: no deben ser demasiadas (5 a 6 como máximo), ni muy pesadas o de gran tamaño.
  • Finalmente, aunque las ventajas de Blogger como plataforma gratuita de blogs, son múltiples, hay cosas que siempre deberemos hacer de forma manual. En este caso, la única manera de hacer que tu slider funcione es modificando los códigos de las diapositivas manualmente, de acuerdo a los posts que quieras ir destacando temporalmente.
Compártelo!
37 Comentarios en Añadir Nivo Slider en Blogger
  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Nivo Slider es uno de los sliders jQuery más increíbles: es liviano (la versión comprimida pesa 12kb), tiene 16 efectos de transición, control de navegación y títulos HTML. Además, es completamente gratuito y configura……

  2. Carla recetas faciles dice:

    Este complemento es muy bueno y muy utilizado ya que mejora la apariencia y da un estilo elegante

  3. Ricardo dice:

    Hola amiga, soy tu admirador, esta muy bonito tu blog y con muy buena información. Oye te quería hacer una pregunta, ¿Como pones tus códigos dentro de los marcos rosas con las lineas numeradas? espero me puedas decir. Muchas gracias y felicidades por tu blog.

  4. Black dice:

    gracias me ha servido mucho, que tengas un buen día.

  5. Sin Abrochar dice:

    He seguido todos los pasos y no consigo ver las imagenes!!

    Edito los códigos, pero nada! Al principio me daba un error por Photobucket, por lo que decidí pillar el enlace que te da cuando subes entradas en un artículo, el de los servidores de google. Pero nada, tampoco se ven..

    He probado a poner el HTML como un widget o en el propio código del blog, pero nada! Sigue sin verse.

    Se ve el módulo y hace las transiciones en blanco, sin imagenes. Y cuando pulsas si que funcionan los enlaces, pero las imagenes no se ven.

    Sabrias decirme a qué puede deberse?

    • Claudia dice:

      Es probable que no estés usando los enlaces correctos para incluir las imágenes. Por favor, deja un enlace a tu blog para ver qué está mal. Saludos!

  6. Escorpio15 89 dice:

    Tiene que haber alguna diferencia de poner el codigo (donde tiene que ir ubicado el slider) donde dices, de ponerlo en un gadget en la plantilla con codigo html justo encima de las entradas?? sin modificar el codigo al ponerlo donde dices perfecto, pero en el gadget no veo las imagenes..

    gracias!!

  7. Daniel dice:

    Hola chica blogger, ante todo felicidades por el aporte, acabo de intentar de instalarlo en mi blog siguiendo tus indicaciones pero queda muy mal.
    Acá te dejo un captura, espero puedas ayudarme gracias.

    Captura: https://lh5.googleusercontent.com/-VZcDD0V-ajI/Tyr8GgfknFI/AAAAAAAABr0/8TD8pofumP4/s632/worm.jpg

  8. Claudia dice:

    Daniel: Estás seguro de que pusiste el código CSS?

  9. Daniel dice:

    Hola Claudia gracias por responde sí puse el código justo donde indicas en tu tutorial, antes de ]]>, al parecer no lo reconoce ahí. Es por eso que acabo de probar poniéndolo en style, y sí!! ahora funciona muchas gracias Claudia.
    El único problema es que el espacio de anchura de mi blog es de 500px supongo que puedo solucionarlo eso cambiándolo en el estilo verdad?

  10. Daniel dice:

    Muchas gracias funciona perfectamente. Pero quiero saber como hago para que no aparezca en los resultados de las búsquedas.

  11. Is4ko_O dice:

    tengo una pregunta Como aumento el ANCHO del slide??

  12. Claudia dice:

    Is4ko: Tienes que modificar el ancho (width) en el código CSS.

  13. rodo dice:

    hola como puedo ponerlo centrado me aparece de un lado

  14. Cristian dice:

    hola Claudia, quisiera saber si no me podrias decir como hacer para poner el mismo que esta en la foto, ya que vos mostras uno y cuando lo instale es totalmente diferente.

    Yo lo quiero poner como lo tenes puesto vos en esa foto que mostras. Por favor ayudame.

    Muchas gracias

  15. Cristian dice:

    Disculpame el comentario anterior, cometi una confusion respecto a mi slider actual. Muy buena la info. Saludos

  16. sbellas dice:

    holas !!!!!!!! buen post !!!=)

  17. Fernando dice:

    Mil gracias chicablogger, sos genial me salio todo bien seguí paso por paso como esta.

    Ahora tengo una sola duda doble, el lugar donde esta alojado este jQuery es seguro?, es decir no puede ser borrado en algún momento?

    Y la otra, como alojo jQuery si quiero hacerlo?, se puede en blooger?

    Mil gracias! besos

  18. Nicolas dice:

    Hola como estas? Me funciona barbaro, pero no instale el ultimo paso porque quiero ponerle en el header, como se hace? Yo tengo una imagen y quisiera sustituirla por esto. Espero tus respuesta.
    Gracias.

  19. MArcelo dice:

    oye muchas gracias por el tutorial

    dure mucho tiempo buscando un slider que me funcionara a la perfección.

    ciauu

  20. [...] un tiempo hablaba de Cómo añadir Nivo slider en Blogger. Añadir Nivo Slider en WordPress no es tarea difícil, y puede hacerse sin plugin, como explica [...]

  21. Ferz dice:

    Saludos, excelente guia muchas gracias, solo una duda como hacer para que al hacer click en la imagen se habra el enlace en una pestaña o ventana nueva bye.

  22. Becky dice:

    Hola, muchas gracias por el tutorial, he probado el slider en mi blog de pruebas y todo sale perfecto pero me gustaría que en vez de justo debajo de la cabecera aparezca encima de las entradas. Si poniendo el HTML justo bajo “” sale debajo de la cabecera, ¿dónde tengo que copiarlo para que salga donde me gustaría? ¿Funcionará la condicional para que sólo salga en la portada del blog?
    Gracias, un saludo.

  23. Becky dice:

    Perdón por el doble post, no se me publicó lo que quería poner dentro de las comillas:
    “Si poniendo el HTML justo bajo sale debajo de la cabecera, ¿dónde tengo que copiarlo para que salga donde me gustaría?”

  24. whaychi dice:

    una consulta alguien sabe como centrear los puntitos que estan debajos del slider gracias y muchas bendiciones esta chevere tu pagina

  25. Yinyit dice:

    Hola, esta muy bueno este tutorial, justo lo andaba buscando, pero mi pregunta es si es posible utilizarlo en la cabecera del blog?????

  26. Marta dice:

    Hola,muy buenas…..
    He encontrado por casualida tu blog con la plantilla retro chic y lo de este widget, pero tengo un problema…. :/
    Quiero incluirlo en una de las plantillas que he realizado con el programa artisteer 3 pero no soy capaz de hubicarme en el sitio para añarlido. ¿Tú sabes cómo incluirlo en una plantilla creada por este programa? te agradecería que me contestases plissss….
    Muy buen blog por cierto… ;)
    Un saludo.

  27. Abdelmalik dice:

    Buenos dias! Je suis un blogger français et j’aimerais savoir comment mettre à jour le script précédent en version 3.1?

    Merci pour votre aide….

  28. Paulo dice:

    Hola Chica Blogger, estoy empezando un blog en blogger, basicamente son galerias de fotos, tanto en entradas como en páginas independientes, agregué el nivo y quería ponerlo bajo la cabecera y lo puse como html y se ve bien en explorer y Chrome, el único problema es que en Firefox cuando comienzo a revisar la imágenes de las entradas aparecen como las muestra blogger con miniaturas pequeñas y en grande la foto que uno selecciona, todo bien con eso, el problema es que encima de eso aparece el nivo slider sobrepuesto en las fotos que uno ve en blogger, tienes alguna idea como puedo arreglar eso, de manera que no aparezca el nivo slider en la muestra de imagenes de blogger, Gracias.

  29. Maria dice:

    Hola! quisiera saber si puedo usarlo en una web normal y no en blogger… como se hace?

  30. Jéssica dice:

    Me aparece a un lado el slider… ¿Cómo hago para desplazarlo a la derecha?
    Gracias

  31. Antonio dice:

    Hola, una pregunta. Tengo el Nivo Slider en mi blog y encima un menu con pestañas. Cuando accedo a una pestaña que está redireccionada a un post no me sale el slider, pero si la pestaña está redireccionada a mostrar las entradas de una etiqueta si me sigue apareciendo el slider. ¿Cómo podría hacer para que no me saliera el slider en el último caso?

    Un saludo y muchas gracias

  32. Adrian dice:

    hola, como modifico la altura y anchura? gracias

  33. niintento dice:

    hola claudia, estoy en un problemita. No puedo ajustar las imágenes que he subido a imageshack a mi slider, se ven más pequeñas. ¿Cómo lo hago?… de antemano, gracias..

  34. niintento dice:

    solo modificando los pixeles de la imagen para que se ajuste al slider, tal como lo especificaste, no me di cuenta, saludos..

  35. Mammen dice:

    Buenas noches y ante todo gracias por el tutorial.
    Tengo un problema y es que monté mi nido slider en blogger sin problemas y al pasar a un dominio, este se ha desconfigurado. He vuelto a cambiar las direcciones de mis imágenes por otras nuevas (volví a subirlas y después de copiar la dirección las borré) pero sigue sin funcionar. ¿Podrías ayudarme?
    Gracias de antemano

Deja tu comentario
Tu Comentario