Slider Simple para Blog

A muchas personas les gustaría tener un Slider en su Blog pero algunas plantillas no tiene integrado esta fantástica 'herramienta' y muchos se frustran ya que no saben como colocar un Slider en su Blog.

Hoy aprenderemos a colocar un Slider simple pero agradable para su blog, el Slider que colocaremos se podrá personalizar (ancho, alto, botones), para los botones les dejare un archivo para Adobe Photoshop (.psd) donde les dejare las medidas exactas del botón (las flechas) y para los botones de navegación les dejare en varios colores.

Resultado Final Aqui

Paso 1

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

Paso 2

/* ESTILOS NIVO SLIDER - No editar si desconoces el lenguaje CSS */
#slider-container {
margin:18px 0px;
}
.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;
}

/* Desde aqui puedes Editar */
#slider {
position:relative;
width:950px;
height:280px;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyFA7iAO5jfXxIIpiUB62kZl_anfdcNZsILeZONLIiqm0vaiT2pQ5lA70-tY5wuBi3z6gH79LG8d6URIwiejfEHS6G4gKa62C4o93fOhZy13fJobYIVQ-metKf04d9jTYTfyA87p6wvyA/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:431px;
bottom:-30px;
}
.nivo-controlNav a {
width:22px;
height: 22px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4hFzFcYHxUo-bl0Mlrh5y9mMFOzPhMxT7SW5AC5F6VyHLdi-7V4xnA2U3_2gt1g3H5t2scJVfWeO8l6CBRcacweMphgDBDW-3eL-IxhyphenhyphengP6GsSpQMXZpoNs7MRA6YaTWslAWfcbRCLE/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/AVvXsEhplKepOGGQFmYA1180ScuNRKAzIP5S5jDAXiesFGB41PgyYB6CYlLXvP84CrgiVrihyphenhyphengtM66L28Zk9GTt422eYpAE3FtPARPeD44xgvvzh2lnqxi5IO2STF2FboVY482o6Z1G0ili0aeo/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;
}

Para cambiar los botones de navegación (bullets) solo busca:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4hFzFcYHxUo-bl0Mlrh5y9mMFOzPhMxT7SW5AC5F6VyHLdi-7V4xnA2U3_2gt1g3H5t2scJVfWeO8l6CBRcacweMphgDBDW-3eL-IxhyphenhyphengP6GsSpQMXZpoNs7MRA6YaTWslAWfcbRCLE/s1600/bullets.png

Y para cambiar las flechas de navegación (arrows) solo busca:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhplKepOGGQFmYA1180ScuNRKAzIP5S5jDAXiesFGB41PgyYB6CYlLXvP84CrgiVrihyphenhyphengtM66L28Zk9GTt422eYpAE3FtPARPeD44xgvvzh2lnqxi5IO2STF2FboVY482o6Z1G0ili0aeo/s1600/arrows.png 

y solo tienes que reemplazarlo por la URL de tu imagen personalizada.

Si quieres cambiar el ancho y el alto del Slider solo cambia width y height

#slider {
position: relative;
width: 950px;  /* Ancho del Slider */
height: 280px;  /* Alto del Slider */
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyFA7iAO5jfXxIIpiUB62kZl_anfdcNZsILeZONLIiqm0vaiT2pQ5lA70-tY5wuBi3z6gH79LG8d6URIwiejfEHS6G4gKa62C4o93fOhZy13fJobYIVQ-metKf04d9jTYTfyA87p6wvyA/s1600/loading.gif) no-repeat 50% 50%;
}

Paso 3 

<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'>

<!-- Primera imagen Slider -->
<a href='http://hoygeekweb.blogspot.com'>

<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYZcpuAn09rdh4_Wh2LVb8ctSThX2A5_G5tORF44nkpHMcYaCeoZWfmBZ3LI9f_d6md7vB1iaqaxPtPwTYeG22dr63VdHT90ajzKXzCMHCt4_4SyTd8F5kycG0t3vyFFJAN-k1wk74dY/s1600/imagen-slider-1-hoygeek.png' title='Imagen Slider 1'/>

</a>


<!-- Segunda imagen Slider -->
<a href='http://youtube.com/user/Esergio13'>

<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjufWDG6PCdzOBskTP4QJXNihfY9ddhNsnfpqTAshEAZP30kET2IcS6LAU6RHIjFgc04empsH3wSLNpTMGcq2J93Sr9WqQblHqUD-9-1C0QfRQofNT3PfnFzDw0hRBzGKV7-1Bz5Jckc4/s1600/imagen-slider-2-hoygeek.png' title='Imagen Slider 2'/>

</a>


<!-- Tercera imagen Slider -->
<a href='http://twitter.com/byssergio'>

<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3cCTO4RFNUw8CEn2UG5SsRUtgKyVcHTvtbH1-z1rLh0Yk2ATp7CfBqIRQhHhKsCorngLLRMDUarC1khWJZaVj0aaDy6FXyOCmPyVQX-c1U1sypi2uK1vH6rRiVe4SW9yxHhP9A0yANY/s1600/imagen-slider-3-hoygeek.png' title='Imagen Slider 3'/>

</a>

</div>

<br clear='all'/>

</div>

</div>
</b:if>
</b:if>

Para colocar las imágenes y el texto que tu desees, sigue los siguientes pasos:
El texto de color Azul es el enlace que tendrá la imagen.
El texto de color Anaranjado es la URL de la imagen que quieras que se visualice.
El texto de color Rojo es el titulo que tendrá la imagen en el Slider.

Si tu quieres puedes agregar más imagenes al slider, solo agrega este codigo despues de </a> 

<a href='http://facebook.com/hoygeek'>

<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT3cCTO4RFNUw8CEn2UG5SsRUtgKyVcHTvtbH1-z1rLh0Yk2ATp7CfBqIRQhHhKsCorngLLRMDUarC1khWJZaVj0aaDy6FXyOCmPyVQX-c1U1sypi2uK1vH6rRiVe4SW9yxHhP9A0yANY/s1600/imagen-slider-3-hoygeek.png' title='Imagen Slider 4'/>

</a>

Y listo estos son todos los pasos que necesitas para colocar un Slider Simple en tu Blog.
Puedes ver el Resultado Final Aqui.