How to add Picture to Beta Blog Header.

To add a picture to the header of your Beta Blogger blog...

FIRST BACKUP YOUR TEMPLATE USING METHODS OUTLINED IN : Change Template. Then upload your picture file to a free host like Googlepages which offers 100 MB free space. Copy the URL of your picture and keep.


Sign in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page------->Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the header which is :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>

In the above code change maxwidgets="1" to maxwidgets="2"
Also change showaddelement="no" to showaddelement="yes"
Save Template.
Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose Picture type. Click add to blog. In the content page that opens paste the url of the picture at Googlepages in the URL text box. Save changes. View blog. Enjoy.

TO ADD A PICTURE TO CLASSIC BLOG HEADER

Create an account at a freehost like Googlepages.
They offer 100 MB free space for hosting your picture.
Upload your picture to your account.
Right Click your picture and click on 'Copy link Location'.
This gives the URL of your picture.
Go to Edit Current under the Template tab.
Scroll down intheTextbox until you come to first part of the template.
This is the CSS section where style is added to your blog.
In this part scroll down to :

/* Header
----------------------------------------------- */
#header {
margin:0 20px 10px;
xxxxxxxxxxxxxxxxxxxx;
border:1px solid #ccc;
}

Copy paste this line below in place of "xxxxxxxxxxxxxx;" above :

background: url(YOUR PICTURE URL GOES HERE);

Paste your picture URL (obtained in Step 5 above) between the brackets.
Save Template Changes.
Open blog in browser to view it.
Press CTRL while refreshing page to refresh your cache.