Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Friday, September 23, 2011

Enlarging Blogger Slideshow Gadget


I've published a tutorial on how you can link your Flickr photo stream to Blogger's slideshow gadget. But the default frame size for Blogger's slideshow gadget is rather small. You can easily make this frame bigger. You won't get the prettiest pictures as you're stretching your original image, but personally I think it's a fair trade-off for this simple CSS trick. By the way, as we're stretching out original picture stream, it will be best if your images are not from a mixed orientation group. In other words, it works best if your images are all of portrait orientation, or landscape orientation.


If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.slideshow-container{
width: 250px;
height: 300px;
}

.slideshow-container div a img {
min-width: 250px !important;
height: auto !important;
}

Enjoy folks.

11 comments:

  1. .. yachhhhhh,, aq pikir kayak yang aq cari ..

    ReplyDelete
  2. Thanks so much. This was really helpful. Is it possible to make the photos even larger?
    What px ratio would I need?

    ReplyDelete
    Replies
    1. I wouldn't go larger than my sidebar size, as it'll make the pictures look pixelated. Anyways, play around with the values 250px and 300px (Line 2 and 3 in the code above) and see what suits you best.

      Cheers :)

      Delete
  3. I try to make it large but images fadeout. Any suggestions... I am trying to adjust the height and weight but no luck..
    http://bangladeshinmyeyes.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Sahebul,

      We could only change the size of the frame, not the resolution itself. I'm afraid it cannot be avoided - if you stretched your image too much it will get pixelated.

      Delete
    2. Thanks Yoga.. Now I am using Flash for slid show.. :)

      Delete
  4. Thanks Yoga. I've been looking for such kind of help for about a month and being failure started to learn HTML.

    ReplyDelete
  5. Hello Yoga,
    Not sure if you are active still, but I posted the above code for a slideshow and it worked but took up a lot of space within the blog. Any tips for getting the sizing to be flush with the twitter bar? Thank you for posting this btw.

    ReplyDelete
    Replies
    1. Not inactive for sure :) Let's have a look at your blog, what's your blog's address?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.