Skip to main content

Change Header Size In Blogger

How to change header size in blogger blog:

We can increase or decrease header size in blogger blog.It is easy to adjust size of your blog header in blogger.

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 : and find below code

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

and change height and width px value to resize blogger header.if you want increase blogger header increase px value or to decrease blogger header size decrease px value

step 5 : click on save template

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

Post a Comment

Popular posts from this blog

Change font size of blogger posts

Post Font size :  Even if your blog having quality content , If the post text is not easily readable , there is no use with that content. If the content not easily readable , your blog visitor can't spend more time on your blog to your posts. So increase your blog post font size until the post text is readable easily and also set good font style. In this post i'm giving the information to change the font size of your blogger posts. How to increase posts font size in blogger blog : It is easy to increasing font size of your blogger posts. By default the font size of blogger blog posts is small. Blogger template contains specific script code for the post customization , with that we can easily change the font size of posts in blogger. For easily readable it is better to use the font size between 16 to 18  for blog posts. Follow below steps to change blogger posts font size  step 1 : go to blogger dashboard
step 2 : click on template
step 3 : click on edit HTML
step 4 : searc…

Change post a comment text on blogger blog

How to change "post a comment" text on Blogger blogs : "Post a comment" text will appear above comment box or comment form on Blogger blog. We can customize that message as we require. We can change that post a comment text and also add/replace an image in that post a comment text place on Blogger blog. It's really good idea to customize a post a comment text on your Blogger blog. If we change post a comment message with an polite message then we can attract our blog visitors. So by changing the default post a comment text we can get more comments. In this post I'm explaining about how to change post a comment text on Blogger blogs.


Follow below steps to change "post a comment text" on your Blogger blog
step 1 : Go to Blogger dashboard

step 2 : Click on template

step 3 : Click on edit HTML

step 4 : Search below line <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Now replace <data:postCommentMsg/> in above…