Personalizando tu blog (Ep2)- Slideshow

¡Hola Bloggeras! ¿Cómo están? ¡Espero que muy bien!

En el día de hoy les traigo el segundo episodio de Personaliza tu blog, aprenderemos como se pone un Slideshow en plantillas actualizadas y antigüas de Blogger, espero que les guste el tutorial, si tienen dudas comenten!. Besos

Haz click en "Leer esta nota completa" para ver los códigos del slider

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


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <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>


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


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

 Nota: 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).

Info: CB