How to Add a jQuery Slideshow as Blogger Background

jQuery Slideshow as Blogger Background
Blogger allows every users to customize the look of their blogs. In case of Blogger Background pictures will utterly rework the design of a blog from uninteresting to attention-grabbing. There're many sites that offers free templates and backgrounds. But do you ever think of adding a Slideshow as Blogger background? It's possible with a jQuery plug-in known as BackStretch helps you create slideshow background without losing the dimension of the display.


Interested? before we dive into this tutorial, you can check out this jQuery plug-in, BackStretch in action as a live demo at this Demo Blog and see a sneak peek of the finished result. Slightly go through the Free Live Demo image provided below and comprehend how this animation to be seen in your blog. Also don't forget to have a look at some images that're changing with fade impact involving every single transition.

Demo of jquery slideshow background

Compatibility: Chrome 14 +above | Firefox 4 | Apple safari 4 | Opera 10 | IE 8 +above. Moreover, for your desired satisfaction I recommend you try this widget on Chrome’s latest version (Version 30.0.1599.69 m) or Apple’s Safari latest version (Version 6.0.5).

   Set this jQuery Slideshow as Blogger Background

If you're a newbie Blogger, it’ll be a little bit complicated, because you’ve to deal with jQuery. Because Blogger allows you add external CSS Code snippet via Add CSS option. But not jQuery Code. And also don't forget to have a backup of your template before you customizing your template, if you're using high customized template.

Would you prefer to edit your template offline? So I suggest use Dreamweaver. Because Blogger allows you to customize your template only in online via Blogger Dashboard » Template » Edit HTML tab. if you're a WordPress user, able to follow the same method in your own manner. I’ve not used WordPress yet, so I’m not able to give much explanation about adding this slideshow background in WordPress.

Edit Template Offline: Download Adobe Dreamweaver CC

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before you customize
  • Click on Edit HTML tab
  • Expand Blogger template | See how it's - screenshot
  • Press Ctrl + F and search the code </head>

Step #2: Now copy & paste the below code right above/before </head> [use Ctrl+F to find the code].

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.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 = [
 "Image Link URL",
 "Image Link URL",
 "Image Link URL",
 "Image Link URL",
 "Image Link URL",
  ];

  $(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>
Image Link URL: Add the URLs of the images that you prefer to be the background of your blog. Also you can add more images as you demand just after the var images = [ another line like this: "Image Link URL",

Please note: Images that you've added to the slideshow don't be seen in a random order and if you've a preference for a random order, simply replace the above code section with the following piece of the code.
<script>
//<![CDATA[
var images=new Array();
images[ 1 ]="Image link URL";
images[ 2 ]="Image link URL";
images[ 3 ]="Image Link URL";
images[ 4 ]="Image Link URL";
images[ 5 ]="Image Link URL";

  Array.prototype.shuffle = function() {
    var len = this.length;
  var i = len;
  while (i--) {
  var p = parseInt(Math.random()*len);
  var t = this[i];
  this[i] = this[p];
  this[p] = t;
}
};

images.shuffle();
  $(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>
Also you can add more images such as images[ 6 ]="Image Link URL"; images[ 7 ]="Image link URL"; images[ 8 ]="Image Link URL"; etc... Only care about consecutive numbers. And 5000 refers to the duration of each image at the end of the script.


   +More jQuery Tutorials You Prefer

  1. Beautiful Animated Clouds Background for Blogger
  2. Beautiful jQuery Nivo Slider for Your Blogspot Blog
  3. Add a jQuery Page Loading Effect to Your Blogger Blog
  4. Sliding Gallery Style Popular Posts Widget for Blogger
Congratulations! Now save your changes and you're done! Hope you don't get any error. The Images will be resized according to your monitor and resolution. You've to make some changes if you're using Scriptaculous and leave only one version if you already use feature-rich JavaScript library (jQuery).

Sources & Citations: © HelpLogger | jQuery plug-in: BackStretch by Scott Robbin