Imagenes de Fondo de blog que se cambian solas




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
//<![CDATA[
var images = [
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
  ];

  $(images).each(function(){
 $('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>

18 comentarios:

  1. hola tengo una duda...................porque no puedo pegar el link para poner esto en la plantilla?
    desde ya muchas gracias visiten mi blog: http://chicasblogargentina.blogspot.com.ar/

    ResponderEliminar
  2. Porque no puedo tener adsence me dice q no cumplo los requisitos q hago porfa

    ResponderEliminar
    Respuestas
    1. Hola. Con la nueva política el blog tiene que tener por lo menos 6 meses, de todas formas, siempre puedes leerte sus requisitos para ver si no cumples algo mas...saludos

      Eliminar
  3. Hola! Soy novata en esto de los blogs y quiero hacer que cambien las imágenes tal y como explicáis en vuestro vídeo. Pero hay un paso que no se ve en la grabación y que no consigo encontrar. Una vez que copias la URL de la imagen que quieres ¿como vuelves atrás en la plantilla? Muchas gracias por guiarnos, un saludo!

    ResponderEliminar
    Respuestas
    1. Hola Irenita, la plantilla la dejo abierta y en otra pestaña del navegador abro la entrada nueva para ir cogiendo las URL de las imagenes. No vuelto atras, son paginas diferentes. Otra opción es pegar el código en un word por ejemplo editarlo poniendo todas las url y luego ya en la Plantilla HTML lo copias completo.saludos

      Eliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  5. buenas tenia una serie de imagenes puestas en mis entradas ahora que puse el TUYO el que explicaste no me salen???????
    te dejo mi LINK:
    http://harwar123.blogspot.com/

    ResponderEliminar
  6. hola saludos, por favor necesito poner una caja asi de comentarios en mi blog y no se como se hace, ya he intentado pero no me resulta . ayuda plis

    ResponderEliminar
    Respuestas
    1. Hola. Esta caja de comentario es la que viene por defecto en blogger, mira en diseño en entradas si tienes marcada la pestaña de Comentarios y si no la tienes marcada, dale y guarda. saludos

      Eliminar
  7. Hola genial esta clase estuvo muy buena, pero tengo una consulta como hago para cambiarle de sitio a las imagenes de fondo que van pasando, lo hice y me quedo montado en mi titulo del blog y no se aprecia muy bien, gracias por enceñarnos a mejorar nuestros blogs eres muy pila

    ResponderEliminar
    Respuestas
    1. Hola. No puedes cambiar el sitio :(, prueba a cambiar el tamaño a ver si queda mejor! saludos

      Eliminar
  8. Hola, gracias por toda la ayuda que nos prestas a los pobres novatos como yo.... pero lo he echo como pones en el video y no se me cambian solo se me ha quedado una y las otras no se cambian, no hay forma.
    Pues ayudarme??. muchas gracias

    ResponderEliminar
  9. Nada maja, que no me sale... algo tengo mal o algo he echo mal, te dejo mi blog y cuando puedas me dices. Muschisimas gracias
    peas45.blogspot.com

    ResponderEliminar
  10. HOLA MUY BUEN TRABAJO POR TUS VIDEOS Y TODO LO QUE HAS ECHO E VISTO TODOS LOS VIDEOS Y YA E ECHO BARIOS BLOG PERO ESTE ES UNO DE LOS QUE MAS E AVANZADO ES UNO DE PELÍCULAS ONLINE TE AGRADECERÍA UNA SUGERENCIA DE QUE PODRÍA MODIFICAR GRACIAS http://tus-movies-online.blogspot.com/

    ResponderEliminar