Blogger dynamic views with Undocked Gadgets bar

Blogger recently launched gadgets support for dynamic views. This is really cool and was a missing piece to go with dynamic views.

One of the things that I really didn’t like about the gadget bar is that it’s hidden (docked) in the right side of the window. It’s difficult to see and so I Googled about an undocked version but couldn’t find it.

Figure 1 - Blogger docked gadgets sidebar (barely visible) or could we say hidden?

Here I show you how to get an undocked version so that your visitors can enjoy the gadgets bar in its full glory. Follow these simple steps:

1 - Select the Template option at draft.blogger.com

2 - Click the Customize button

3 - In the Window that opens select Advanced

4 - Select Add CSS

5 - Copy & paste the following piece of code in the Add custom CSS field

#gadget-dock
{
    right: 0;
}

6 - Click Apply to blog button in the window top right corner

You won’t see the change applied immediately.

Now go and open your blog and you should see an undocked gadgets bar!

Figure 2 - Blogger undocked gadgets sidebar (now visible)

I hope blogger gives the option to customize this without the need for CSS code. It’ll be easier for its users and will provide a better experience for blog’s visitors…

EDIT

To answer Hannah’s question: if you also want to customize the background colors of the gadgets bar, you can apply these styles following the same procedure described above:

.gadget-icons
{
    background-color: red;
}

.gadget-title
{
    background-color: red;
}

.gadget-selected .gadget-icons
{
    background-color: yellow;
}

One thing to remember here is that as the gadgets’ icons are white you must choose a background color that’s not too much whitish.

Play with the colors and enjoy!