How To Customize Blogger Slideshow Gadget

You know blogger blogs let you to use Blogger Slideshow. But Blogger slideshow gadget does not give the user many options like adjusting the size and style. Google AJAX Feed API provides the full code behind the slideshow gadget and also the opportunity to customize it as you like.

The Slideshow Gadget Code:

The gadget code loads the slideshow using AJAX Feed API and Javascript. Within the code a location on your page is defined to show the slideshow and style the dimensions. Lastly Javascript is used to create a slideshow control on your page. The full Slideshow code is shown below :

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
<style type="text/css">
#picasaSlideshow {
width: 250px;
height: 200px;
margin-bottom: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feed = "PUT FEED URL HERE";
var options = {
displayTime:2000,
transistionTime:600,
numResults : 8,
scaleImages:true,
fullControlPanel : true
};
var ss = new GFslideShow(feed, "picasaSlideshow", options);
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="http://tonyisright.blogspot.com/">Custom Slideshows.</a>

In the above code replace "PUT FEED URL HERE" with the link of the RSS feed of your pictures album at Flickr/Photobucket/Picasaweb as shown below.

Feeding The Slideshow:

The next step is to provide a stream of pictures to the slideshow. To provide this first create an account at Flickr.com or Photobucket.com or Picasaweb.google.com. Then upload all the photos you want to show to this account.

After uploading pictures you will get the RSS feed from the album created at Flickr :

http://api.flickr.com/services/feeds/photos_public.gne
?id=USERID&lang=en-us&format=rss_200

Replace USER ID with your actual user id at Flickr.com.
RSS Feed from Photobucket.com :

http://feed266.photobucket.com/albums/ii244/USERNAME/feed.rss

Replace 'USERNAME' with your actual username.
RSS Feed from Picasaweb :

http://picasaweb.google.fr/data/feed/base/user/NAME/
albumid/NUMBER
?kind=photo&alt=rss&authkey=KEY&hl=en

Replace NUMBER, KEY and NAME with actual values.

Then copy the full feed url and paste in the code given for the slideshow gadget instead of "PUT FEED URL HERE".

Customizing Slideshow

To customize the slideshow modify the gadget code as shown below :

To Change Number of Images modify this line in gadget code and change the number to what you want :numResults : 8,

To resize images add this line immediately below the numResults line :scaleImages : true,

The images will be resized according to original aspect unless you add this line also : maintainAspectRatio : false,

To change how long images are displayed modify the number in :displayTime : 2000,

To link the images to their source add this line : linkTarget : google.feeds.LINK_TARGET_BLANK,

To show images in medium thumbnail size use this line :thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM,

For small size thumbnail images : thumbnailSize : GFslideShow.THUMBNAILS_SMALL,

Lastly to increase width and height change this code :

#picasaSlideshow {
width: 250px;
height: 200px;
.....
}

Decrease width number to fit in your sidebar width. You can get the width of the sidebar from your blog template code :

#sidebar-wrapper {
width: 220px;
...
}

Installing Slideshow

After modifyng and customizing the slideshow code as shown above :

Login at Blogger.com> Click Layouts link on Dashboard.
Click Add Gadget link on Layouts---> Page Elements.
In Popup window scroll down and click on HTML gadget.
Paste the modified code in Contents window.
Save gadget.