Agregar SliderShow En Tu Blogger

Como agregar a mi blog de blogger un Slideshow automatico

La función de agregar un Slideshow automático a tu blog de blogger es tan fácil y sencillo, lo que va a mostrar este Slideshow automático es las ultimas 10 publicaciones de tu blog de blogger, con este Slideshow automático ya no necesitaras insertar manualmente los links de tu blog ni tampoco tendrás que insertar manualmente las imágenes de tus publicaciones, es por esto que quiero compartir este gran truco de blogger para ustedes.

A continuación vamos a trabajar

1 Ir a Blogger

2 Abrir “Plantilla”

3 Da un clic en “Edición de HTML” y luego en continuar

4 Presiona “F3” y busca este código ]]></b:skin>

5 Inserta el siguiente código justo arriba de ]]></b:skin>

/* Slideshow Automático by www.ayudadeblogger.com -------------------------------------------------------------------- */ #slide-container { width:480px; height:320px; position:relative; } #slider { width:480px; height:320px; left:25px; overflow-x:hidden; overflow-y:hidden; position:relative; } .slide-desc { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvezpea8ubjofcNEMHyf3qQsd3uhCy4S9IYS2nc-J3aTON4lsNKAAlMbLvdwD8KN5TNnHOs6btV_n3_pSr5K-r3G4ysGr1TtEzD27LU1CTeAjW7kQx502pmmkgQ1OAYJW2TDN2klECo50/s30/bgtransparent.png) repeat scroll 0 0; color:#FFFFFF; padding:10px; position:absolute; text-align:left; bottom:0; width:100%; z-index:99999; } .slide-desc h2{ display:block; color:#f2f2f2; font-size:14px; } .crosscol .widget-content {position:relative;} #slider ul, #slider li { margin:0; padding:0; list-style:none; } #slider li { width:480px; height:320px; overflow:hidden; } #prevBtn, #nextBtn { display:block; width:30px; height:77px; position:absolute; left:-30px; text-indent:-9999px; top:71px; z-index:1000; } #nextBtn { left:500px !important; } #prevBtn, #nextBtn { display:block; left:0; position:absolute; top:132px; width:30px; height:77px; z-index:1000; } #prevBtn a, #nextBtn a { display:block; position:relative; width:30px; height:77px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLRJU2scaPx-mxfdVorNbcHd7WHQqMsv-_DecxNu1yGe2rEIebqTKBGShtomaZNYYGD-uAw7UpPYDq-9J-c5i8_dTRagnQ_qHv_FDBEgo6CTHObLrLPb7Qc9YC9HND5wW6QGu6F6cEwY/s77/flecha-prev.png) no-repeat 0 0; } #nextBtn a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrhEJG40hhRuHB5rgYBIfwv8BG3qqx9GsiAw4pklLIJ5jyYoihQel7YHsQHlCnLdwDvZI0N9HMtqBZIVnAOoue07zz9qlgWb4kwBT1ANM-0jO-TLouLNfb9RJumRfWbwGgIQQE_pYtn50/s77/flecha-next.png) no-repeat 0 0; } /* Estilos de los números */ ol#controls{ margin:8px 25px; padding:0; height:28px; } ol#controls li{ margin:0 4px 0 0; padding:0; float:left; list-style:none; height:28px; line-height:28px; } ol#controls li a{ float:left; height:28px; line-height:28px; border:1px solid #000; /* Borde de los números */ background:#0B243B; /* Color de fondo de los números */ color:#fff; /* Color de los números */ padding:0 10px; text-decoration:none; } ol#controls li.current a{ background:#5DC9E1; /* Color de fondo del número activo */ color:#fff; /* Color del número activo */ } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

6 Ahora busca este código </head> y justo enzima de el inserta el siguiente código.

<script> //<![CDATA[ var showpostthumbnails_gal = true; var showpostsummary_gal = true; var random_posts = false; var numchars_gal = 150; var numposts_gal = 10; function showgalleryposts(json) { var numPosts = json.feed.openSearch$totalResults.$t; var indexPosts = new Array(); document.write('<ul>'); for (var i = 0; i < numPosts; ++i) { indexPosts[i] = i; } if (random_posts == true){ indexPosts.sort(function() {return 0.5 - Math.random()}); } if (numposts_gal > numPosts) { numposts_gal = numPosts; } for (i = 0; i < numposts_gal; ++i) { var entry_gal = json.feed.entry[indexPosts[i]]; var posttitle_gal = entry_gal.title.$t; for (var k = 0; k < entry_gal.link.length; k++) { if ( entry_gal.link[k].rel == 'alternate') { posturl_gal = entry_gal.link[k].href; break; } } if ("content" in entry_gal) { var postcontent_gal = entry_gal.content.$t } s = postcontent_gal; a = s.indexOf("<img"); b = s.indexOf("src=\"", a); c = s.indexOf("\"", b + 5); d = s.substr(b + 5, c - b - 5); if ((a != -1) && (b != -1) && (c != -1) && (d != "")) { var thumburl_gal = d } else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr6-SjVScTmaRmzqj-83DDmsTBVjKnzb56JW0qORTEyOLG9OAPGhdzQEgwYOYmqltyxopQx6QLG7I6CNjKsj1dCdGlanGH4uD5s_bB0WiwkUzxwDB-EUagzoeBaBSTnOdUQXA2hJAy40/s0/sin-imagen.png'; document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">'); document.write(posttitle_gal + '</h2>'); var re = /<\S[^>]*>/g; postcontent_gal = postcontent_gal.replace(re, ""); if (showpostsummary_gal == true) { if (postcontent_gal.length < numchars_gal) { document.write(postcontent_gal); document.write('</span>') } else { postcontent_gal = postcontent_gal.substring(0, numchars_gal); var quoteEnd_gal = postcontent_gal.lastIndexOf(" "); postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal); document.write(postcontent_gal + '...'); document.write('</span>') } } document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>'); document.write('</li>'); } document.write('</ul>'); } //]]> </script>

7 Luego busca este código </body> y justo enzima de el inserta el siguiente código

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ /* * Easy Slider 1.7 - jQuery plugin * written by Alen Grakalic  * http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com) */ (function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn', nextText:'Next',controlsShow:true,controlsBefore:'', controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First', firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000, continuous:false,numeric:false,numericId:'controls'}; var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery); $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true, numeric: false // Cambiar a true si se quiere mostrar la paginación de números }); }); //]]> </script>

8 Ahora da un clic en “Guardar plantilla” y ya esta casi listo.

9 Dirigite a “Diseño”, de un clic donde dice “añadir un gadget” y busca un widget que dice “HTML/Javascript”, ábrelo y pega el siguiente código.

<div id="slider"> <script style="text/javascript"> var numposts_gal = 10; // Número de entradas a mostrar var numchars_gal = 150; // Número de caracteres en el resumen var random_posts = false; // Cambiar por true si se quieren aleatorios </script> <script src="http://ayudadeblogger.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>

Realiza estos cambios

El texto que esta marcado de color amarillo cambialo por la dirección de blog, por ejemplo cambia solo donde dice “ayudadeblogger.com” y eso es todo, da un clic en guardar y listo, ubicalo donde quieres que se muestre tu Slideshow automatico.

Nota: Si quieres cambiar el tamaño de tu Slideshow automatico, solo basta con cambiar el texto que esta marcado de color amarillo en el paso 6, aquí te dejo el código que deberías cambiar:

document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');