Pages

Sunday, September 30, 2012

How To Reduce Space Between Gadgets (Widgets) in Blogger.com (blogspot)- - Screenshot

I recently made a small change to my another  blog which is also on Blogger.com (Blogspot)- reduced the space between widgets at the side bar, to make the page looks little bit shorter. I'm satisfy with the change and it's a easy fix. If you are also looking for the solution for this issue, here's my fix.

The reason that the widgets get bigger space in between is because by default, there's a 30px bottom and top margin existing for widgets- which is 60px space in total. To reduce the space,  just to change the margin to a smaller value. My fix is change the top margin to 20px, and the bottom margin to 0.
(screenshot) Left: Original space between widgets
Right: after reducing the space by change the margin-bottom to 0
Here's how to reduce the space between gadgets (widgets) to 20px:

1. From your blog dashboard, click on Template->Customize->Advanced->Add CSS (as in following screenshot)

2. Copy and paste following codes to the "Add custom CSS" screen:

.widget {
    margin: 20px 0 0 0;
}


screenshot  as below:

3. Make sure to click on "apply to template" buttom at the top right corner. Done.

Go back to your website and refresh the page, now the space space between gadgets / Widgets for your Blogger has been reduced !

It's Your Turn

How did you do to reduce space between widgets? Is there other ways to make the widgets looks better? Share your experience and insights in the comments box below.




10 comments

  1. Hi,

    It was very helpful for me..
    Thanks alot
    I tried it for www.alwanserv.blogspot.in

    ReplyDelete
    Replies
    1. Glad to hear that, thanks for letting me know !

      Delete
  2. That was so helpful & I spent all day looking for that exact code! Thank you so much!!

    ReplyDelete
  3. Thanks a ton. This was the most simple thing I found for this problem.
    Do you have any idea what should we do if we want to customize the margin for each gadget?

    ReplyDelete
  4. Thank you. I had to adjust mine to 0px but I'm happy with the results. It was for my www.thebullitt.blogspot.com site. Stoked!!

    ReplyDelete
  5. only one that has worked thanks you much

    http://cupcake-crafty.blogspot.com/

    ReplyDelete
  6. Thank you!
    It worked perfectly and simply.
    Solved my problem.

    ReplyDelete
  7. Easy and helpful.. It works nice in my blogspot... Thanks

    ReplyDelete
  8. Thank you! That was easy peasy!

    ReplyDelete
  9. Now I got your useful code to make my blog as my aspect.
    Thanks,

    ReplyDelete