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.

How to make a Beta Blogger widget/Page Element.

To make a beta Blogger widget....

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. Choose where you want to make a widget whether in sidebar or header. Click 'Add a Page Element'. This opens a new page where you can choose the type of widget you want to make. The choices are as follows :
1. Globally Available Data
2. Page Header
3. Blog Posts
4. Blog Archives
5. Profile
6. Text/HTML/Javascript
7. Feed
8. Picture
9. Labels
10. List
11. Link list
12. Logo
Make your choice and fill in data in Content field and Save Changes.
Congratulations! You have just made your first widget.

The Anatomy of a Beta Blogger Widget..

The code which makes a widget/Page Element in beta Blogger is as follows :

<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="'HTML2'" locked="'false'" title="''" type="'HTML'/">
</b:widget>
</b:section>
</div>

The third line from top represents the widget 'HTML2' in unexpanded form.

The property locked="false" means it can be moved to other sections of the page like header or footer in Page Layout view. At present it resides in the sidebar section. The sidebar section resides in the 'sidebar-wrapper' div.

When we check the box 'Expand widget templates' in Edit Html field we can see the full code for this widget which is as follows :

<b:widget id='HTML2' locked='true' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Introduction to Widgets.

This blog has been created to exhibit all the widgets available in Beta Blogger. If you see a widget not represented here please inform us and we will include it as soon as possible. For the non cognoscenti a widget [possibly evoking "window gadget"] is......

in graphical user interfaces, a combination of a graphic symbol and some program code to perform a specific function. E.g. a scroll-bar or button. Windowing systems usually provide widget libraries
containing commonly used widgets drawn in a certain style and with consistent behaviour.

In Beta Blogger or Son of Blogger a widget is a Page Element which users can customize in the Page Elements view of the Template tab. You can also code your own widget and add it to your blog. In this way you can hack your blog at will.