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

Por favor vea su demostración

Video Tutorial



Vamos a trabajar

1 Un clic en Tema


2 Un clic en “Editar HTML


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

3 Busque el siguiente código

]]></b:skin>

Ingrese las siguientes lineas de código justo antes del código que encontró


/* 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(http://lh3.googleusercontent.com/-jDLwXJiGntk/T29pYcTKb9I/AAAAAAAACUQ/gf-AfWqrTzY/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(http://lh5.googleusercontent.com/-KX-r8BDixK4/T6H3kNMb2QI/AAAAAAAACdM/mOwubqm7O8c/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(http://lh6.googleusercontent.com/-tqzRTNYmZk0/T6H4U6ZNmcI/AAAAAAAACdU/MeTCxHfdXqc/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;}


Puede cambiar el tamaño del slideshow en:

width:480px;

Su altura:

height:320px;

Al igual cambiar donde dice:

#nextBtn {
left:500px !important;
}

4 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 = 'http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/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>


Busque la siguiente linea de código y cambie el tamaño del slideshow solo donde esta marcado de color amarillo


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


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


6 Un clic en “Guardar Tema”


7 Un clic en Diseño


Un clic en “añadir un gadget”


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:

La URL que esta marcada de color amarillo cámbialo por la dirección URL de tu blog de Blogger, un clic en guardar y listo, ubicalo donde quieres que se muestre tu Slideshow automático.

¿Necesitas ayuda?

Cualquier pregunta no dude en hacérmelo saber.


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments:

47 comentarios:

  1. Como puedo centrarlo?!

    ResponderEliminar
  2. Hola Paulina, no necesitas centrar las imagenes, solo que tu tengas imagenes pequeñas y sea por eso que no aparescan en el lugar adecuado, cuando cargues una imagen dejalo en tamaño original con eso apareceran tus imagenes en todo el cuadro del Slideshow.
    Saludos

    ResponderEliminar
    Respuestas
    1. una pregunta, resulta que introduje el codigo pero no me sale nada podria ayudarme..
      gracias

      Eliminar
  3. pero es slideshow siempre me aparece a la izquierda. Mi pregunta es que habría que hacer para centrarle.

    ResponderEliminar
  4. nada no he dicho nada jejeje.

    ResponderEliminar
  5. Hola, no entiendo tu pregunta, el slideshow esta centrado, no tienes que hacer nada mas en este Slider..
    Saludos..

    ResponderEliminar
  6. Hola. Mi gran problema es que las flechas me aparecen arriba tapando la cabecera. Están descolocadas.

    ResponderEliminar
  7. Hola talvez algo estas haciendo mal, ya que las flechas deberian aparecerte en el lugar correcto.
    Si no es asi, comunicate con migo nuevamente, recuerda seguir las instrucciones tal y como se muestra en mi post.
    Saludos.

    ResponderEliminar
  8. Buenos días, acabo de insertar todo el codigo bien y me sale el slide perfecto, la pregunta es como le inserto mis imagenes

    ResponderEliminar
  9. Hola he visto tu blog y si se muestran las imagenes.
    Saludos.

    ResponderEliminar
  10. Hola Luis, me ocurre lo mismo que Ignacio, las flechas me aparecen arriba...

    ResponderEliminar
  11. Hola, te aparece ese error por que tal vez tu ya tengas introducido un script en el codigo de tu plantilla, si ya utilizas un script como este, http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
    Ya no tendras que ponerlo, asi que deberas omitir solo ese codigo del paso 7 y el resto del codigo deberas insertarlo tal como explico en este post.
    Saludos

    ResponderEliminar
  12. Pues omitiendo el paso 7, ya no me salen las flechas en ningún sitio y las imágenes del slideshow ya no se mueve, mostrándose siempre la última publicación del blog...

    Podrías seguir con la ayuda por favor?

    Muchas gracias de antemano

    ResponderEliminar
  13. Hola, no debes omitir todo el paso 7, solo deberas omitir este codigo http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
    nada mas y el resto del codigo del paso 7 si debe ir en tu plantilla.
    Recuerda utilizar un solo script en tu blog si no te creara conflictos es por esto que no te aparece en el lugar preciso del slider.
    Saludos.

    ResponderEliminar
  14. Siento ser tan pesado amigo y muchas gracias por la ayuda.
    He borrado el script que me has dicho del punto 7 pero sigue el mismo problema, no cambia de publicación y se queda con la última.

    Solo tengo este Script en el blog

    Muchas gracias y disculpa las molestias

    ResponderEliminar
  15. Hola, he agregado el slide perfectamente, sólo que me gustaría eliminar el resumen que acompaña las imágenes ¿se podría hacer? o al menos modificar el tamaño para que se adecue a la imagen. Yo cambié el tamaño a 320x320. Gracias

    ResponderEliminar
    Respuestas
    1. Hola puedes ajustar el slider con las imagenes en esta posicion
      width:480px;
      height:320px;
      Busca todos los que tengan ese numero, ponlo a 320 en width y 320 en height, con eso tendra el mismo tamaño.
      Espero que sea lo que me estas pidiendo,.
      Saludos.

      Eliminar
  16. Hola, tengo un problema, en la parte de arriba de mi blog salen todos los códigos, cual podría ser el error?

    ResponderEliminar
    Respuestas
    1. Hola es por que no estas colocando bien el codigo en donde yo digo inserta el codigo arriba de: eniame la direccion de tu blog para poder verlo y decirte donde esta el error
      Saludos.

      Eliminar
  17. Hola gracias por la respuesta. El asunto está así: No me aparece ]]> solo: <
    cuando borró el código 1, desaparecen las letras que se ven en el blog, pero no he probado poner el url del slide show, además no le he quitado las letras rojas del código, no se sise las debo quitar o no. Gracias por tu ayuda. Saludos. Mi blog es
    www.vocaldoce.blogspot..com

    ResponderEliminar
  18. Buenas!! Tengo una pregunta. Imagínate que tengo 5 entradas en total en el blog y en el slideshow tengo puesto para que muestre las 3 ultimas. ¿Como haría para que debajo del slide solo se mostrasen las dos entradas restantes? es decir, ahora mismo, en el slide aparecerían las 3 ultimas entradas, y justo debajo, en entradas publicadas me aparecen las 5, por lo que las tres ultimas estarían "repetidas" en la pagina principal.

    ResponderEliminar
  19. please!! mi panel de imagenes se ha quedado parado de repente :( alguien puede ayudarme??

    ResponderEliminar
  20. una vez hecho el slide, ¿de qué manera inserto las imágenes?

    ResponderEliminar
  21. una vez hecho el slider ¿como inserto las imagenes? gracias!

    ResponderEliminar
  22. yo pongo " ]]> " del primer paso y no me sale nada wue no esta ni se enceuntra ni el segundo paso tampoco a q se debe??

    ResponderEliminar
  23. Hola como estas? Me gustaria insertar un slideshow con fade de unas 10 imagenes aproxiadamente... de un largo de 1070px x 350px de ancho... me gustaria q aparezca debajo de los botones de "home" y " contacto" arriba de los posts...
    Aguardo tu respuesta Gracias

    ResponderEliminar
  24. hola, a mi me aparece a la izquierda nu podria ponerlo en el centro ?http://deliciassencillas.blogspot.com.es/ gracias

    ResponderEliminar
  25. hola en mi plantilla no encuentro esto. ]]>

    ResponderEliminar
  26. hola, no me aparece en el html ningun codigo de los que tengo que buscar

    ResponderEliminar
  27. hola, no me aparece en el html ningun codigo de los que tengo que buscar

    ResponderEliminar
  28. Hola, segui los pasos y todo perfecto, pero quiesiera saber como puedo hacerle para que el slide solo salga en portada y no en todas las paginas?

    ResponderEliminar
    Respuestas
    1. Hola, es facil realizar este truco, sigue las instrucciones del siguiente tutorial: http://www.ayudadeblogger.com/2013/09/como-ocultar-widgets-en-pagina-principal-entradas-de-blogger.html

      Saludos

      Eliminar
  29. hola el slideshow me solo muestra el lado izquierdo de la image

    ResponderEliminar
  30. COMO HAGO PARA AJUSTAR LAS FLECHAS, CUÁL ES EL CÓDIGO? PF

    ResponderEliminar
  31. Respuestas
    1. Hola, con respecto a su pregunta, todas la plantillas de Blogger disponen del código que usted indica, por favor búsquelo con tranquilidad.

      Saludos.

      Eliminar
  32. Hola, como puedo ponerle las imagenes que yo quiera?

    ResponderEliminar
    Respuestas
    1. Hola Rafa, con respecto a su pregunta lo que usted necesita es un tutorial de slideshow, en el cual se pueda agregar la imágenes de forma manual, para ellos, puede seguir las instrucciones del si siguiente post.

      http://www.ayudadeblogger.com/2014/01/slideshow-para-blogger-v6.html

      Saludos

      Eliminar
  33. hola, muchas gracias me ha servido, quisiera que este centrado osea en la mitad, y no en la izquierda como seria? perdon por mi ignorancia, es q de esto no se nada

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, con respecto a su pregunta, por favor remita la dirección URL de su blog de Blogger donde se encuentra el slideshow y así con gusto le guiare en su implementación

      Saludos.

      Eliminar
  34. una consulta, como hacer para que solo muestre el titulo de la entrada bajo la imagen , y no el contenido de la entrada, y para que aparesca 3 entradas a la vez

    ResponderEliminar
    Respuestas
    1. Hola, sobre su pregunta revise el tutorial donde dice:

      var numposts_gal = 10; // Número de entradas a mostrar
      var numchars_gal = 150; // Número de caracteres en el resumen

      Saludos

      Eliminar
  35. Buen día:
    Escribo porque ya estoy utilizando este widget en mi blog, pero quería saber cómo optimizar el tamaño para que aparezca en la versión móvil sin necesidad de hacerlo más pequeño para la versión de computadora.

    ResponderEliminar