Skip to main content

How To Remove Space Between Blogger Gadgets

As we all know that blogger is a flexible blogging platform where new blogger can do things easily unlike WordPress and other blogging platforms. Unlike other blogging platform we can easily customize blogger templates according to ourselves. If we have a little bit knowledge of HTML then we can easily edit any part of the blogger blog. We can Lock and Unlock gadgets, Add or Remove widgets from the defaults template. In the below image you will see lots of space between gadgets. To remove all these space you need to follow the below steps.



Important Note!

Always remember one thing. Before changing or doing anything with template or uploading a custom template, always take backup of your blog's template and your blog's data as well. It helps you to recover your blog data and template from an unexpected error.

How To Download Blogger Template

How To Download Blogger Data

Steps To Remove Space Between Gadgets

In this tutorial, I will show you how to reduce space between blogger gadgets. So lets start!

Read also How to reduce space between blog title & blog discription

Step 1. First login to your blogger account.

Step 2. Click Template which located left side.

Step 3. Click Edit HTML. Once you click Edit HTML, you will able to see the codes of your blog's template and then click anywhere inside the code.




Step 4. Press Ctrl + F on the keyboard to get search box and then type    .main-inner .widget {     inside the search box and then hit Enter twice on the keyboard to switch to   .main-inner .widget {  You will see codes like below codes

.main-inner .widget {
  background-color: $(widget.background.color);
  border: 1px solid $(widget.border.color);
  padding: 0 $(widget.padding.side) 15px;
  margin: 20px 25px;


Read also How to reduce space between post gadget & sidebar gadget

The   margin: 20px 25px    value 20 and 25 mar vary depending upon your template. So no need to regret about the value just proceed to next step.
Step 5. In the   margin: 20px 25px     first 20px for the top and bottom space between Gadgets and second 25px value for the space between post gadget and sidebar gadgets. Now you need to decrease the first value from 20 to 0 or the value that suits for your log.  And if you want to reduce the space between post gadget and sidebar gadgets then reduce the second value from 25px to -15 or the value that suits for your log. 

Read also How to reduce space between menu bar & post title

After changing the margin value the above codes looks like below codes:

.main-inner .widget {
  background-color: $(widget.background.color);
  border: 1px solid $(widget.border.color);
  padding: 0 $(widget.padding.side) 15px;
  margin: 0px -15px;

Step 6. After that click Save template.

That's it! In this way you can remove the extra space between blogger gadgets. Enjoy this video.



Comments