Custom Slideshow Gadget for Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The Blogger slideshow gadget does not give the user many options like adjusting the size and style. Google AJAX Feed API (See Related Article link at bottom of this post)provides the full code behind the slideshow gadget and also the opportunity to customize it as you like.

You can edit the code directly to adjust the size and style and then paste it in a HTML gadget................

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 code is shown below :

Loading...

Custom Slideshows.

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.

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 USERID with your actual userid 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".

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;
...
}

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 subtab.
In Popup window scroll down and click on HTML gadget.
Paste the modified code in Contents window.
Save gadget.

Enjoy!

View the original article here