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

Labels:

12 comments:

  1. Sudhir Mishra27 July 2013 at 03:05

    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. Anonymous13 August 2013 at 16:04

    thanx a lot,,,needed this information

    ReplyDelete
  3. Diógenes29 August 2013 at 04:41

    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. Venkat29 August 2013 at 11:20

    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. Diógenes30 August 2013 at 00:38

    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. Unknown2 December 2013 at 13:40

    Awesome infor... TQVM

    ReplyDelete
  7. Venkat4 December 2013 at 14:12

    You welcome KAMBING

    ReplyDelete
  8. Unknown24 January 2014 at 22:22

    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
  9. Junaid22 February 2014 at 13:14

    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
  10. PTC Sites9 March 2014 at 11:59

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

    ReplyDelete
  11. Sumit Sharma23 May 2014 at 13:55

    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
  12. gorakh15 March 2016 at 17:35

    Nice tips

    ReplyDelete