How to reduce space between title, blog description and content in Blogger?

There are many free templates that we use in blogger. Many of them are designed well to suit to our casual blogging need. However, sometimes you may want to make some changes in your blogger blog. Here is a simple way to adjust gap between your blog title and the blog description or between the blog description & the main content.  

Before you make any changes in your blog's default structure, it is highly recommended to take back up of your blog template and blog data. This is to avoid any sort of loss that may happen in case you make any mistake in the process. You can very well restore your original template in case you experience any issue in between.

Let us now proceed with the steps.

• Login to your blogger account and then click on Design link shown at the top. You will find "Template" link at the left. Click on that link and then click on "Edit HTML" tab. 
• This will open blog template's HTML sheet. Press Ctrl and F button on your keyboard to open search box inside the HTML screen.  
• Type .header h1 inside the search box and press Enter button to search.  There you will find the following code below .header h1.Now add margin-bottom: -20px;  just below the color code but before the "text-shadow" code as shown here below.

Header h1 { 

font: $(header.font)

color: $(header.text.color);

margin-bottom: -20px;

text-shadow: 0 0 $(title.shadow.spread) #000000;

• Save the template and go back and view the blog. You will find the gap is reduced between the blog title and the description now. You can alter this gap as per your requirement by changing the margin-bottom value to -10px or -15px.

To reduce the gap between the blog description and the main content, follow the procedures mentioned below.

• Press Ctrl and F button and search for .Header .description {  line in the HTML code. Now add margin-bottom: -20px; or a code with a value of your choice below the color: $(description.text.color); line as shown below.

 .Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
  margin-bottom: -20px;

• Click on "Save Template" tab. Go back and see your blog. You will find the difference now. If the space selected is not right as per your wish, then go back and try different values for margin-bottom until you are satisfied with it.

Image Source: Blogger