Blogger: Remove Sidebar Widget Title Margins

Remove Excessive Title Margins from your Sidebars

I come across this problem pretty regularly while browsing the help forums. Blogger gave us templates with excessively large title margins. It breaks up flow with an often large empty space regularly bigger than the text title itself. Luckily, this is a simple enough problem to remedy with a little CSS.

Quickly Override the Title Margin

The simplest approach to the problem is to open up your blog Design->Template Designer->Advanced->Add CSS box and insert this single line.

.sidebar h2 { margin-bottom: 0px !important; }

You should see the empty space greatly shrink in the preview section. Adjust the 0 value to find the right look for your blog, then just click Apply Changes in the upper right corner and you're done! That was simple enough wasn't it?

Conclusion

This minor CSS change can have a strong impact on the flow of your sidebar. Try out new values and perhaps consider adding some color or an image to the background for even more impact. There are a lot of options in CSS and you can customize the sidebar titles with them. Just remember the .sidebar h2{ } element and experiment.

Support JSBlogStop:

Donate with Dwolla