My Own way of Sharing the World I see on my own Perspective.

How to hack Blogger’s slideshow

I wanted to have a slideshow of pictures on one of my blog. It’s an entertainment blog. So I guess it would be better if there are artist fading in and out on the side bar.

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!

Read more:

Share the Love : Share On Facebook ! Share On Google Buzz ! Add To ! Share On Digg ! Share On Reddit ! Share On LinkedIn ! Post To Blogger ! Share On StumbleUpon ! Share On Friend Feed ! Share On MySpace ! Share On Yahoo Buzz ! Get These Share Buttons ! Share On Google Reader ! Google Bookmark ! Send An Email ! Blog Feed !

Related Posts with Thumbnails