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 > Page Elements 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 from template designer.
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 and 35pixels of 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 Design > Edit HTML tab and backup your template.
Step 3: Find ]]></b:skin> and before it add the following CSS:
.header-left{ display: inline-block; height: <b>35px</b>; width: <b>200px</b>; float: <b>left</b>; }Replace the bold pixels 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'> <strong><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></strong> <b:widget id='Header1' locked='true' title='<span style="color: blue;">Blog's Title</span> (Header)' type='Header'/> </b:section> <font color="red"></div></font> </div>
Replace the bold snippet with:
<b:section class='header <code>header-left</code>' id='header' maxwidgets='1' showaddelement='no'>
As you can find out that an extra class, header-left has been added, highlighted in green. If you want then you can add this class, as shown above, without replacing the whole snippet.
Now “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 snippets to bring it back. So find for closing div (highlighted in red) and before it add:
<div style='clear:both;'/>
So the whole 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 <strong><code>header-left</code></strong>' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='<span style="color: blue;">Blog's Title</span> (Header)' type='Header'/> </b:section> <strong><div style='clear:both;'/></strong> <font color="red"></div></font> </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 logo 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 Blogger Template Designer only. If you want this for Layout templates, then have a look at: How to add extra widget section to Blogger header
