add

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.

Como agregar a mi blog de blogger un Slideshow automatico

Por favor vea su demostraciò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(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;}


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


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) www.volantedeportivo.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 cámbialo 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 automático.

Nota: Si quieres cambiar el tamaño de tu Slideshow automático, 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>');


¿Necesitas ayuda?

Cualquier pregunta no dude en hacérmelo saber.

Saludos.


42 comentarios:

  1. 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
  2. pero es slideshow siempre me aparece a la izquierda. Mi pregunta es que habría que hacer para centrarle.

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

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

    ResponderEliminar
  5. 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
  6. 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
  7. Hola he visto tu blog y si se muestran las imagenes.
    Saludos.

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

    ResponderEliminar
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. please!! mi panel de imagenes se ha quedado parado de repente :( alguien puede ayudarme??

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

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

    ResponderEliminar
  20. 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
  21. 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
  22. hola, a mi me aparece a la izquierda nu podria ponerlo en el centro ?http://deliciassencillas.blogspot.com.es/ gracias

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

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

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

    ResponderEliminar
  26. 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
  27. hola el slideshow me solo muestra el lado izquierdo de la image

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

    ResponderEliminar
    Respuestas
    1. Hola César, a que se refiere ajustar las flechas..

      Eliminar
  29. 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
  30. 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

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios