Sunday, April 13, 2014

Create a Background Slideshow for Blogger alphause

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