How to change the blog description header height in blogspot blogger site

This set of instructions will help you to adjust/reduce the size of the header according to your own custom design. You can adjust the space between the various elements of the header.

1. Go to design settings of our blogspot blog and click the Design tab on the first bar on the top.

2. Then click the Template Designer option given beneath.

3. In the Template Designer page, click Advanced.

4. In the side tab containing the options of Page Text...scroll down to the bottom and click Add CSS.

5. In the window given alongside, enter the following code.


.main-inner {padding-top:10px}

.date-outer {margin: -0px 0 10px;}


margin-top: 20px;


In the above code, you can adjust the number sizes from 10px to 30px. And this way you can adjust the various space parameters. You can view the changes in the preview option given below.

6. Once your settings are correct, press the APPLY TO BLOG button.

Any doubts, you may post here.


  1. Hey It didn't work for me: I want to get the posts and "Blog Archive" aligned, can you help?

  2. hi Ron, let me see if I can help, how do you want them aligned?

  3. Hi! I would like to reduce the size of my header and image. Tried the above but it didn't help? Please check out my blog and tell me what I am doing wrong:

  4. I think the header image that you have uploaded is too big for a small size header height. Try to upload an image with lesser height.

    The above code is for adjusting the header elements.

    Remember you can also go to the Advanced tab and click Post, and adjust the font size of the blog header title, there by making the header even more smaller. But in your case, the image that you have uploaded is too big.

    Just try a thin banner image and see if it suits you.


Do pass your comments here.