SlideShow en Blogger

¡Hola Bloggeras! ¿Cómo están  En esta oportunidad les traigo un nuevo tutorial que me lo han pedido muchas personas. No se si se acordarán, pero un SlideShow es como una diapositiva de imágenes dentro de un blog. En diseños pasado lo hemos utilizado y por fin les traigo el tutorial.

Nota: Este slideshow funciona para plantillas actualizadas y antiguas de blogger.

Haz click en "Leer esta nota completa" para ver el tutorial.

1) Primero tenemos que cargar la última version de  jQuery, que es un plugin  que nos permitirá poner nuestro Slider. Con control+F buscamos </body> y antes del cierre de esta etiqueta colocaremos el siguiente código.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><textarea> <span style="background-color: white; text-align: justify;"><br /></span> <br /> <div style="font-family: inherit; font-size: 15px; line-height: 22.5px;"> <span style="background-color: white; text-align: justify;"><br /></span></div> </div> 2) ahora <i>colocaremos debajo del código anterior el Script del Slider que se los dejare a continuación.</i><br /> <textarea style="height: 36px; margin: 2px; width: 399px;"><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"> </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('#slider').nivoSlider(); }); </script><textarea> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br />

3) 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:

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ49t7R4XyqpFQ6udK0Z9hXpANO9xa6CS2kxFtL8j8QCe3aKYruhJ7S86scOj-uHS-4JlAG3ypK5afQdHNWnMNuLJTBQcsRwmlU0WTGBDEiM3EjYVS5xmFiU7BcQ7GTmMKoBAmOdb_zJA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFrvK1N5k7RGU1aectql3hSWFpaxK9iafGH0dlUo5rh5SDF_ZrqjD8erB0ikQrgyF0SHbgZJNle9MbI3SFE_eYmgMCMQJ5GhLBcaFZZt22w8fZ6v_6addHXOtscHwcpRLO2_4elrusHYw/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/AVvXsEgaJsnMCp0A77OIoZIFC26u62CRJR3jhXXEMI4Ih3OmW_L1bPMxQj4_nbcCutW7vS_ntmakVxb7Q4ZZP3nbeuRjlCpyakIQp7VFnGB_rivCtq4M_4lqZtuE-zvQdAUqhEcfISMBPHveTHo/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; } <textarea>

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.

4) 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'>.


<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYyAI-KkUOv39e9cz8rhJ-A2vayuCLvebASg7nRhF1051VS1QFb3_rEvWMXbPo5liIFhVedplLKc0TGleuShBMHxVqPjfe8HwZaAXJAscXIWpYZXCqCUvtTa5sL_lRKDqL3U_f3gTIl0s/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/AVvXsEhs8OZpnd-5iRFHpvxJST1kQAe0CU_KRbWZ3hq-k-G94JZNcw9CA2VVH7wt-FWX-aR8FMR5MoGOQAzMwX3G_vH6PkIcaZhZz6xZMazfNy28vLdZFOjc_-yeIW2CbWikrKLoBo0mTSQAiCI/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/AVvXsEgFsoHti5UCi_PigWeQnWvFsHS09K74gKaW-0zszRcghdbwvI1alapWf-V3663aIHTqYZUFQkaCBT2njfmyHIguSYbriL00Mi-yYuLkltBJ7ddTICtFJFp6BTM6EeVKJfq84IoPWBnUIDQ/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/AVvXsEjwIG62mZcbI5XytqCqw15XK2_4GkotxMc3Th-H6Avre61PMA-5BP7G9-_injK672ZgX7REP2Upq2D6OiJlhBfddKlgPi53pcd-GVJ4lbE5RRH6xqs9V5wVlfJn4cUP5PxjShY6-B2UgcQ/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/AVvXsEjjv9tRc6ZuoVE566rx7zECrlvtXJxIhZ2i-oOwXYeyp5rpjBUnJu5Bu3RmJq2Wu_bhUodEusXGxP63jkXToVouSNxSn8DJdAjFnXe-iWlX6Wnz7R8pZBqU0t7bn1uBHbbF4Bb29cFbOP8/s1600/1.jpg' title='Category Hierarchy'/> </a> </div> <br clear='all'/> </div> </div> </b:if> </b:if> <textarea>

5) 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).

By: CB