Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
Create a Background Slideshow for Blogger
5 comments
In the previous post we saw how to make the blog's background fill the screen regardless of the resolution of the monitor. The method that we'll use now with jQuery is a plugin calledBackStretchwhich also has the option of creating a slideshow of pictures as a blog wallpaper without losing the property of adjusting to the width and height of the screen.
What we will do in this entry is just this, try to make the blog's background to have some images that are changing, all with fade effect between each transition.
You can see an example in this demo blog.
To put this slideshow in the blog's background, just go toTemplate-Edit HTMLand beforeadd the following code:
Here add the URLs of the images that will be the background of your blog.
If you would like to add more pictures, just add after thevar images = [another line like this:
" Image URL",The images will be changing in the order you have added them, if you want these to appear in a random order, then change the second part of the code with this:
You can also add more pictures by adding a line like this:
images[6]="Image URL";But you will see that in this case there are some consecutive numbers in blue, so if you add another such as 6, then the next one should be 7, etc..
In both cases you can change the duration of each image which is in the5000value that is at the end of the script.
The advantage of this slideshow in the blog's background is that images are automatically resized to the size of the monitor, so that, no matter of the resolution, it should look good.
It is worth remembering that if you are using Scriptaculous, you have to make some changes, and if you already use jQuery, should leave only one version.
Author page | Backstretch
Random Posts
How to remove/hide or add a Peek A Boo Effect to your Blogger Navbar09/03/2012 - 10 Comments
Amazing Examples To Customize Blockquote Style In Blogger/Blogspot05/04/2012 - 12 Comments
Fade In/Out Page Loading Effect On Blogger Posts02/06/2013 - 7 Comments
Related Posts:
How to Use Cookies in Javascript
Orbit - jQuery Image Slider Plugin ...
jQuery Sliding Panel with Expanding...
How to add a thumbnail image/photo ...
Using JQuery + EasyDrag to Move Ele...
5 comments:
Anonymous 1/13/2014
That is really nice
thanks Reply
J. Lindén 1/27/2014
Can someone help me? I have a problem with this. I set the random one and almost everytime i enter the page, the first image doesnt load, just white background :/ I tested every 11 images and they all worked but still i get white BG every now and then.
http://welhotesting2013.b logspot.fi/ Reply
Anonymous 2/18/2014
Thank you! that's the really want for me. Reply
Pinkpanda 3/13/2014
I mean on just 1 static page... Reply
Pinkpanda 3/13/2014
I already figured out what I asked before, thanks anyways:) Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top
Search
Search
Follow on Facebook
Helplogger
Like
2,785 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
2
Like
Like
2
DMCA PROTECTED
No comments:
Post a Comment