BLOGUERO TUTORIAL

Un bloguero Practicando
» » » » Instalar nivo slider en blogger

Instalar nivo slider en blogger

Instalar nivo slider en blogger

Comparteme :


Nivo Slider es unos de los sliders jQuery más famosos, livianos e increíbles que existen, tienes botones de navegación, puedes implantar títulos en cada imagen, tienes 16 efectos de transición, y es completamente gratuito y configurable, qué más te puedo decir, simplemente que si te gusta, lo insertes en tu blog. Ver Demo:

Demostración
  • Para añadir este slider en Blogger, es muy sencillo, sólo sigue los pasos que verás a continuación o seguidamente, añade el siguiente script Nivo antes del cierre...
Añadir antes de </head>
<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>

Ahora instala el siguiente codigo antes de ]]></b:skin> 
/* Nivo Slider Estilos Css en Aizum Blog */

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

/*============================*/
/*=== Personaliza los estlios Css en está sección ===*/
/*============================*/

#slider {
position:relative;
width:560px;
height:280px;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpL-14Qav0wTE33KeljtjLxGBfWGLeB-n5tSwsLY1lkARzB9_hDWYGaGKLngUrZYSfXczy4Y0YYOjaNTcNUYXjuktp6eu_4UMcSdvHtaLV53QhLAiAWq-lJ15AGSpZOwKmwbqlyC64u4Y/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:230px;
bottom:-30px;
}

.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQWSsvgqP3tVna2886FiquuUDvqcoQ89l1r1qP3zeAuIVYsArIE2MDERlBIgDC_Kqev46Skbv1h2jsPiYCCGakik7jp9Mz3Rh6lmFZnyaWNl3qY92DyWd1U0iUmtaOyZdhqYPZSnNycY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjLVox5b2oT-WLUqIteFBvFYSJIyPzvnRqSbfvXheD7Y0tBVmqvKpCO7KlBiplzToll3nA5otgR971iXdaXoMrC0GBBlyZVjcBVdNYDtp9bnym1ryRV9szZsaSKMgfyrMFG83fNvQGZ0/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;
}
  • Ahora por último y y finalizando está entrada añade el código Html en Blogger, ves a Diseño» Añadir Gadget» y en Html/Javascript, copias y pegas el siguiente Html:
<div id='slider-container'>
<div id='slider'>
  <a href='http://angrybirds.themesnack.net/?p=24' title='Introducing WP Theme'>
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhigrb8ZE0rMpOLJ1K3y1hkFSxbV_Ccv5C296XXaKJPfY93EGubil8tyFl4iy06k1ZFEQvP13-GHn3mPEih5aCv97wM8OHWyW4W1T5EW3By1KKadhMRIwoFPT57vwqON55X5klBqiEpf-Q/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFqQ7z2bGrb3Y4MRbvOIlvWJ1Zdka-3UAWZZwckcxazvFVcOYW1vhpPmr_LIMSah1SQGAuatcIsJ9E10TAQmEiCx50_CrM_3n0AW1pYT4SxunJY74q0rLSykOHb-RbY4wA64mXsFsLS0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJUA8hNNbrt9JDBCaFIW1VxLqXvD_VYk_eNuimQpoHgacGyZYW2VpRc2Yzq2wjeBCitvjuRP_VsUoqZvseOEdH34L-k_Rrx0iEF2Fyg7VsmInVZp6Zc7vMWNEVV-76hp2wubKVS9yYdjs/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY_ZAv3MAnJovg0wjAIohyphenhyphenQ6tnirVrvcYEIfhJd1ZKtUPBGGLIRR8gWDkTz-ChzzjA_mJuHtR8bEs8RCveNr2xKvn6c490oqyL-IjEDuoph0jzvkVse4MHdXNLQoWgTqA6R-hVlFD0PBg/s1600/2.jpg' title='Testing HTML elements'/>
 </a>
  <a href='http://angrybirds.themesnack.net/?p=1' title='Category Hierarchy'>
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGt5urApV655QdCmEPoNhPBCyDCXuP_GpZBlR2toG-8DPdwbQyx4vmEOEH1ODMgkOzdtcRhLoKaASmd1Rd9rIghc_Gt5jyoazHWT-3IkPTpGb8W1wbIIqIAnzEAwbGSgVjEnRGz4einN4/s1600/1.jpg' title='Category Hierarchy'/>
 </a>
 </div>
<br clear='all'/>
</div>



Comparteme :
Bloguero Tutorial

Author :

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?
Instalar nivo slider en blogger.
Comparte
Facebook
Twitter
Google+

Artículos Relacionados

Tu mensaje sera visible tras la aprobación del administrador