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.

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.