How to Add a jQuery Slideshow as Blogger Background

Apple iPhone 7 Plus (256 GB):
for Best Commentators

Winner will be announced on 30 January 2017.



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



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

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js




//<![CDATA[

var images = [
 “Image Link URL“,
 “Image Link URL“,
 “Image Link URL“,
 “Image Link URL“,
 “Image Link URL“,
  ];



  $(images).each(function() {
    $(‘‘)[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);

//]]>


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.




//<![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() {
    $(‘‘)[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);

//]]>


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.




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

via Blogger http://www.droidadda.org/2017/01/how-to-add-jquery-slideshow-as-blogger.html https://mtkdr0id.files.wordpress.com/2017/01/5c7ee-slideshow-blogger-background.png

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s