2013-12-22

How to reduce Header Space in Blogger

1. There are 3 parts need to be changed. Due to various version of Blogger, some of these changes might not be working. So, it is better to check the final view after each of the changes. If it does not work, exclude it. 

2. Go to Dashboard > Template > Edit HTML.

3. Move mouse to HTML code and click anywhere, then press Ctrl and F in your keyboard to search "</head>".

4. Add following line just before </head>:
<style type='text/css'> .content-inner { margin-top: -40px !important; } </style>

5. Search ".Header h1".

6. Change from:
.Header h1 {
font: normal normal 30px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #152568;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
}
To:
.Header h1 {
font: normal normal 30px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #152568;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
margin-bottom: 0px;
}
There might be some varieties in different Blogger version, so be careful.

7. Search ".header-inner .Header .titlewrapper" or ".header-inner .titlewrapper".

8. Change from:
.header-inner .Header .titlewrapper {
padding: 22px 30px;
}
To:
.header-inner .Header .titlewrapper {
padding: 0 30px;
}

9. Save template and Back.

No comments:

Post a Comment

Top