How To Remove Extra Space From Blog Header

Note:- Before making any changes to blogger template it better to take a backup of existing template. This really helps if some thing goes wrong you can go back to current state.


Just take a look the blog and see how much extra space its showing.

Step 1:

- Login to your blogger account.
- Click on Template Link on left sidebar
- Click on ‘Customize’ button.

Step 2:

- Go to Advanced –> Add CSS. This will show the CSS window as well your blog below it. As soon as you add the CSS object it shows its impact live so that you will know how the blog will look after this change.

Step 3:

- Paste the below code in the ‘Add custom CSS’ box. Adjust the values based on your look and feel. I love to add comment so that you will know what you have customized if later point of time you need to look back and check.

/* Tech G lab - Removing Extra Space - Above Header Box*/

.content-inner 

{margin-top: -40px !important; 

}

/* Tech G lab - Removing Extra Space - Left and Right Margin*/

.header-inner 

{

margin-left: 0px !important;

margin-right:0px !important;

}

/*Tech G lab - Removing Extra Space - Header Top and Bottom Margin*/

.Header h1

{

margin-top: -20px !important;

margin-bottom:-20px !important;

}

/*Tech G lab - Removing Extra Space - Setting Padding*/

.header-inner .Header .titlewrapper 

{

padding: 0px 20px;

}

/*Tech G lab - Removing Extra Space - Around Description*/

.header-inner .Header .descriptionwrapper 

{

padding: 0 30px;

}

/*Tech G lab - Removing Extra Space - Around Description*/

.Header .description

{

margin:0 0 -10px 0;

padding:0 10px

}

Step 4:

- Once you feel the outcome is good, click on Apply to Blog button on top right corner.