Custom Slideshow Gadget for Blogger. ~ The Blog Doctor.

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 :

<script src="" type="text/javascript"></script>
<script src=""
<style type="text/css">
#picasaSlideshow {
width: 250px;
height: 200px;
margin-bottom: 5px;
padding: 5px;
<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
var feed = "PUT FEED URL HERE";
var options = {
numResults : 8,
fullControlPanel : true
var ss = new GFslideShow(feed, "picasaSlideshow", options);
<div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
<a href="">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.


The next step is to provide a stream of pictures to the slideshow. To provide this first create an account at or or 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 :

Replace USERID with your actual userid at

RSS Feed from :

Replace 'USERNAME' with your actual username.

RSS Feed from Picasaweb :

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



Adeaner said...

This is great, but I was hoping to have a slideshow of images from my posts with the title of the post, so that someone could click what they like and go to the post. Is this something that's possible with this hack or with your ramdom post titles w/summery widget ?

Vin said...


Your blog images are stored at Picasawebalbums.

Login there. Get the feed as shown in above post and put it in the code and customize it to get clickable images.

Adeaner said...

I'm using the 3 column Sand Dollar fluid width templet you designed - Thanks
In the left column there seems to be a dead space on the left side. I've had to float my text right, keep it small and have the column as wide as it is so it won't scrunch up the names - all because of that dead zone in the left part of the column. What can I do so I can make the column smaller without scrunching the names ?

vin said...


What is the blog address?

Adeaner said...

it's -

Vin said...


Which browser and version are you using?

Adeaner said...

windows internet explorer, don't know the version. Got an acer with vista home premium in 2008 . . .

Vin said...


Seems OK in IE8. Can you link to a screenshot showing the problem?

Anonymous said...

This may be just what I have been looking for. I do posts on my site with my nephew's baseball and basketball games. These are always photo intense so they take forever to load. But a slideshow would look great and speed up the process.

Carolyn Kidd said...

I used this gadget to do a slideshow on my blog with pictures that I have hosted on Photobucket. When the slideshow runs the pictures are pixilated and don't look good. How can I fix this?

Vin said...

Carolyn Kidd,

What is the address of the Photobucket album and the feed link?

Carolyn Kidd said...

The album:

the rss:


Vin said...

Carolyn Kidd,

What is the blog address?

Carolyn Kidd said...

Vin said...

Carolyn Kidd,

Check under "CUSTOMIZING SLIDESHOW" in above post :

"By default, images are not scaled within the containing element. The Slide Show control will create a containing div element that will hide overflows. To have the Slide Show control to scale your images, utilize the scaleImages property of options. Scaling will maintain the original aspect ratio, unless you set maintainAspectRatio to false. "

In the code add the bold line :

var options = {
numResults : 16,
scaleImages : true,
maintainAspectRatio : false
new GFslideShow(feed, "slideShow", options);

"The Slide Show supports three thumbnail size hints. The default size is "large" which is the largest thumbnail available in the feed. "

"Controlling the Slide Show thumbnail size is done by making use of the thumbnailSize property of options. Valid values include GFslideShow.THUMBNAILS_SMALL, GFslideShow.THUMBNAILS_MEDIUM, or GFslideShow.THUMBNAILS_LARGE. "

Add the line in bold :

var options = {
numResults : 8,
thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM

Carolyn Kidd said...

Thanks Vin,

With your help I was able to fix it so that the images were no longer pixilated using this code.

var options = {

When I used the line, "thumbnailSize : GFslideShow.THUMBNAILS_MEDIUM," I was not able to notice any change in the slideshow... so I didn't use it.

Thanks again for your patience and help.

Angie Prince said...

I just want to remove the fireworks slideshow as it is not working on my blog, but with this bX-8yc7fd error code, there is no way to remove it, so now what do I do? I do not have much technology-savvy, so please help!

Thank you for your help,


Vin said...

Grieving Mother/Therapist, Angie Bennett Prince,

Delete the code for the widget directly in the Template Code box.

Oter said...

hi, is possible to do this randomly (not always the same 8 pictures), and with more than one feed?

Vin said...


Use Yahoo Pipes to combine two or more feeds in one pipe. Then get the RSS url for that pipe and paste it in above code (FEEDING THE SLIDESHOW).

Swapnil Devarkar said...

Thanks dude......The Internet world needs angels like u...

Tamara said...

Thank you very much!! My slideshow now works beautifully.

Lisa M. Martin said...

Hi Vin,

Thanks for the tips! I have the slideshow running but have a question: is it possible to make it to where when you click on a given photo, it goes to a certain link? For instance, clicking on photo 1 opens, clicking photo 2 opens, and so on. I was thinking for that it would be necessary to code in each image separately and give the link, but I wasn't sure how to do that since it's structured for a feed url.

Best regards,

~ Lisa

Vin said...

Lisa M. Martin,

For that you should have a feed from a page containing those images linked to the respective sites.

See how to make image links?

pAuLiE said...

Like Lisa, I want the photos in my slideshow to link to the actual post page. I have found an outdated solution here:

See the comment section there, #7-9.

Is possible to have the code included in your javascript? That would be perfect! I'm using a widget right now (the url for the photos is my rss feed) which has that function but it doesn't allow me to change the black background!

My sketch blog:

Ken said...

Thank You! Works fantastically!

I just used it for my picasa web album.

What if I would also like to display the captions, for those photos that have them?

Unknown said...

I have been trying to add this to my blog as a header and I'm using pictures on a picasa web album but the pictures come up pixelated just like another person mentioned above. I tried changing the values and adding the like like you told Carolyn Kidd above but nothing works. I used the same size of the images for the slidewhow size. Thanks


Thanks for the info

Irfan Haq said...

Sir, I've uploaded the slideshow on my blog. Thanx for the support.
But If you could just do a little favour by adding the refferal code.
I mean how can I refer to the post where the image is available ??

Euromillion Result said...

I used this gadget to do a slideshow on my blog with pictures that I have hosted on Photobucket. When the slideshow runs the pictures are pixilated and don't look good. How can I fix this?

Read more: said...

Good :)

DieGO said...

Excellent article. But is it possible to post the slideshow only at the main page and not as a gadget visible in every page of my site?


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.