Simple Blogger Tutorials

How to Resize Blogger Header to Logo Size

One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.

Blogger header resize

Step 1: Make yourself a logo or image in any photo editing software with a particular size and note down its width and height and upload it to your image hosting site. In this tutorial, I will use my logo with 200 pixels in width, 35 pixels in height and Blogger’s default template from Picture Window (2nd one). If you know how to add image to Blogger header and already applied it, then follow the steps below.

Step 2: Go to Teemplate tab and back it up first. Next click “Edit HTML”.

Step 3: Find ]]></b:skin> and before it add the following CSS:

.header-left{
 display: inline-block;
 height: 35px; 
 width: 200px;
 float: left;
}

Replace the highlighted codes with your image’s height and width and increase or decrease the margins to position your logo. Changing float: left; to float: right; will change the position of the displayed logo, whether you want it to float to left or right.

Step 4: Find for the below codes and emphasize on the bold snippets:

<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
</div>
</div>

Replace the bold snippet with:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

As you can find out that an extra class, header-left, has been added. If you want then you can add this class, as shown above, without replacing the whole snippet.

Preview your template, you will find that the background color of Blogger’s header is not visible or it's missing.

So you need to add some more codes to bring it back. Find for closing div (highlighted in red) and before it add:

<div style='clear:both;'/>

So the full code will look like:

<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
<div style='clear:both;'/>
</div>
</div>

Remember that "Blog's Title" is referred to the title of your blog.

Step 5: Save your template and view your blog. You have successfully added your logo to header and resized it to perfect size. To recheck, on placing the cursor over the header, you will find that the whole header in not clickable, instead it’s your logo only.

To be noted:

This tutorial is for new template only (that is, Blogger Template Designer).

Next: Add a Gadget Section to Blogger header.

18 comments :

  1. Hello, I tried to resize the header as you have described but it didn't worked.

    At step 4, I find the line:

    <b:section class='header' id='header' maxwidgets='1'

    but the surrounding code is more complicated, probably because there are other things in the header (search field, twitter and rss icons, and pages menu).

    Here is my blog: clixess.com
    Will it be possible to resize the clicking ground only to my logo?

    Thanks!

    ReplyDelete
  2. You template is the Layout one. Please see the "To be noted" part.

    ReplyDelete
  3. I saw the other post but I couldn't find the codes described there.

    I can't post my codes here because it doesn't allow me to.

    Any idea what should I do?

    ReplyDelete
  4. Find:

    #header-inner {
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    }

    and replace it with

    #header-inner {
    display: inline-block;
    height: 89px;
    width: 211px;
    }

    ReplyDelete
  5. I can't find this code.
    Here is how my header looks like:

    /* Header-----------------------------------------------*/
    #header-wrapper{width:950px;margin:0 auto 0;height:98px;background:url() top right no-repeat;padding-top:20px;overflow:hidden;}
    #header-inner{background-position:center;margin-left:auto;margin-right:auto}
    #header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:50%}
    #header h1{margin:0 5px 0;padding:1px 0 0 0px;font:bold 48px Arial,Helvetica,Sans-serif}
    #header .description{padding-left:5px;color:#fff;font-size:16px;font-weight:bold;}
    #header h1 a,#header h1 a:visited{color:#fff;text-decoration:none}
    #header h2{padding-left:15px;color:#736f74;font:14px Arial,Helvetica,Sans-serif}
    #header2{float:right;width:48%}
    #header2 .widget{padding:20px 0px 0 10px;float:right}
    /* Outer-Wrapper----------------------------------------------- */

    ReplyDelete
  6. Ops, now I found #header-inner{ and replaced it, and it worked perfect.
    A big THANK YOU mate! It's much better now. I'm so happy (party)
    I will continue reading your website, which is so useful for the bloggers :)
    Thanks again ;)

    ReplyDelete
  7. Now i resize my logo my problem now is can i move it more to above location.

    Please check my blog: http://diseases-of-life.blogspot.com/

    Thanks

    ReplyDelete
  8. You have to move the search bar to a different location to move the header to top.

    ReplyDelete
  9. thank for your post its really work on my site..

    ReplyDelete
  10. hw am i going to resize the header to middle? http://identitytheft-id.blogspot.com/

    ReplyDelete
  11. If I don't see your blog, I can't help you. It is "open to invited readers only".

    ReplyDelete
  12. Hello,

    I've tried and tried and am ready to scream. I can't figure out what I've done wrong...I would like the search box to be inline with my header. Header to the left and search box to the right. Please help! My blog is www.whatshersecret.com. The search bar keeps coming up under the header. Your suggestions would be MUCH appreciated.

    Thanks,
    Jennifer

    ReplyDelete
  13. You need to scale down the header size (and the image within it) to much smaller one.

    ReplyDelete
  14. Thank you very much. Simple but usefully.

    ReplyDelete
  15. My banner will only show half of the uploaded picture? The size uploaded is 140x770 made in Picasa. But it cuts half off???

    ReplyDelete
    Replies
    1. Are you using the new Blogger templates?

      However, try adjusting the CSS, it should work.

      Delete
  16. hello can u help me? I follow your instruction and this is what happens to my header image not display in full size www.bakaanimus.blogspot.com

    ReplyDelete
    Replies
    1. It's late to give a reply but I think now its OK!

      Delete

Don't SPAM! Read comment policy.

Like