How to Change Slideshow Size? ~ The Blog Doctor.

How to Change Slideshow Size?

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

The slideshow gadget in Blogger is quite small and may look minuscule in larger width templates. If you have a large width sidebar and wish to increase the size of the slideshow within it here is how you can do it.........

Step 1. Add Slideshow Gadget to sidebar :

  1. Login at
    Click Layout link under Blog Title on Dashboard.
    On Add Page Elements tab click 'Add Gadget' link.
    In popup window click 'Slideshow.
    Configure your slideshow.
    Click Save button below.
    View Blog.

Step 2. Find width of your sidebar.

To increase the width of the slideshow you have to first find width of the column containing it. To do this go to Layout----->Edit Html subtab. In Template Code box scroll down to the CSS code for the sidebar which may look like this :

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

See the number in the width line '220px'. That is the width of the sidebar. You cannot have your slideshow inside the sidebar with more width than this or else it may break the template and your blog sidebar may fall down below the posts column.

Step 3. Define slideshow size in CSS part of template.

The last step is to define the new size of the slideshow in the CSS part of the template. In your Template Code box paste the code given below immediately above the ]]></b:skin> tag :

.slideshow-container {
width: 200px !important;
height: 400px !important;

Preview and adjust the width and height numbers. Save Template. View Blog. Enjoy slideshow!


vijayakumar said...

i didn't expect this much information from this blog.thank you.



Anonymous said...

its not working for me....i need help! it does not make my slideshow any bigger =(

Vin said...


Did you clear cache after changing and saving settings?

Charlie said...

Is there a way to enlarge it to 900pix wide and put it in the main header area?

Vin said...


You have to first increase width of header.

Then create a Add gadget link in the header and then add a HTML gadget there.

Then paste the slideshow code there and modify it.

Charlie said...

Thank Yous, I will give it a go!

ibid said...

how do you get the pictures less pixilated?

thanks for all your help.

Vin said...


Try uploading pictures to and creating a slideshow there and then pasting the EMBED code given in Edit Html tab of Post Editor.

daphnée laliberté said...

Hi Vin,

I've put the slideshow gadget in the header of my blog.
But the quality of the pictures are really bad.
I edit the size of the slideshow to 649px x 136px in the HTML code... and so are the pictures form my slideshow.
I've tried at 72 and 180 dpi but still the pictures are pictualized.
You can have a look to my test blog...
I've been using Picassa for the slideshow.
Looking forward if you have any tips for me.

geeten said...

very very helpful! no one beats you in giving good and clear instructions! kudos!

Jackie said...

Hi Vin,

I'm wondering if there's a known issue with IE that makes the images of the slideshow so tiny. The size of my slideshow is perfect in Firefox and Chrome but it's like 10x10px in IE8. Do you have any workaround for this?

My URL is


Dennis Schulz said...

I spent NIGHTS to create thousands of other slideshows just because the size of the default slideshow....

Best post of the year ;-)


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.