Change Header Size In Blogger

How to change header size in Blogger blog:

We can increase or decrease the header size in a Blogger blog. It is easy to adjust the size of your blog header in Blogger.
How to Change Blogger Header Size


Follow below steps to change header size in Blogger blog

Step 1 : Go to Blogger dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML and tick expand widget templates

Step 4 : Find below code

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 30px;
width: 300px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Change the height and width pixel value to resize the Blogger header. If you want to increase the Blogger header size, increase the pixel value, and to decrease the Blogger header size, decrease the pixel value.

Step 5 : Click on Save Template

12 comments:

  1. Hello sir thanx to post this amazing tip,I was searching for this information for my newly created Business development blog. Finally got this trick on your blog, thanx a lot

    ReplyDelete
  2. thanx a lot,,,needed this information

    ReplyDelete
  3. Hi! I haven't been able to find the code you posted. below is the closest match, and then it goes into the code for tabs. I want to increase the header just about 20px. Any help is appreciated. Thanks!




    /* Header
    ----------------------------------------------- */
    .header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: 0 0 $(title.shadow.spread) #000000;
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font: $(description.font);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    }

    .header-inner .Header .titlewrapper {
    padding-top: $(header.padding.top);
    }

    /* Tabs
    ----------------------------------------------- */

    ReplyDelete
  4. Hi Diógenes

    Add height: 40px; below .header-outer {
    like below

    .header-outer {
    height: 40px;

    If you want to increase you header size more simply increase value 40 to 50 or 60 ,

    Thanks for visiting my blog

    ReplyDelete
  5. awesome, that seems to have solved the problem. I was actually trying to make it wider, so i did

    width: 880px;

    but now the header is aligned to the left. i tried a few things and have not been able to center it. any suggestions? thanks for your help!

    ReplyDelete
  6. Hi, i haven't been able to find neither of the code pasted or the solution given to Diógenes. here is my code:

    /* Header
    ----------------------------------------------- */
    .header-inner .Header .titlewrapper,
    .header-inner .Header .descriptionwrapper {
    padding-left: 10px;
    padding-right: 10px;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: 130%;
    }

    /* Tabs
    ----------------------------------------------- */
    .tabs-inner {
    margin: 1em 0 0;
    padding: 0;
    }

    .tabs-inner .section {
    margin: 0;
    }

    .tabs-inner .widget ul {
    padding: 0;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
    }

    .tabs-inner .widget li {
    border: none;
    }

    .tabs-inner .widget li a {
    display: inline-block;
    padding: 1em 1.5em;
    color: $(tabs.text.color);
    font: $(tabs.font);
    }

    .tabs-inner .widget li.selected a,
    .tabs-inner .widget li a:hover {
    position: relative;
    z-index: 1;
    background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
    color: $(tabs.selected.text.color);

    }
    /* Headings
    ----------------------------------------------- */
    h2 {
    font: $(widget.title.font);
    color: $(widget.title.text.color);
    }

    .main-inner h2.date-header {
    font: $(date.font);
    color: $(date.text.color);
    }

    .footer-inner .widget h2,
    .sidebar .widget h2 {
    padding-bottom: .5em;


    looking forward to hearing from you, thanks!

    ReplyDelete
  7. Great! You are doing great job. Keep it up. If you want to know SEO and Blogging. Feel free to visit World of Simple SEO And Free Blogging.

    ReplyDelete
  8. How to have drop down menu in blogger
    http://ourptc-sites.blogspot.in

    ReplyDelete
  9. Hi, This is Sumit.
    I want to stretch my header and content to be centered, Can you please help me.
    My blog is http://stechnotrick.blogspot.in/

    ReplyDelete