Blogger Beta: Using Widgets for your Header

1977 left a comment on Customizing your Header: Add an Image with a little something he came up with. It is a way to add your header using widgets!

Here is what he did. Go to 'Template/Edit HTML'. Find the #header-wrapper <div> and change 'locked' value from true to false. (Note, it could be called #outer-wrapper. Each template varies. And in a template I tested, the value was already false.) Save any changes that you made.

Then open 'Template/Page Elements'. Here remove the header by clicking 'edit' on your header element, then 'Remove Page Element'.

In this same window, choose 'Add a New Page Element/ Picture'. In the box that pops up, you will either choose 'From your computer' or 'From the web' and browse your computer for the image or paste the web url in the box. Close that window by 'Saving Changes'.

If you want to change the header postion, go to 'Edit HTML' and in the #header-wrapper section of the Style Sheet, change the text-align value to left, center or right.

Thanks 1977 for a great tip!

UPDATE: 1/20/07 This comes from another reader, Shrish! One needs to set showaddelement="yes" in the 'header-wrapper' div, otherwise 'Add a New Page Element' option will not be visible on 'Page Elements' page.

10/24/07 I saw this tweak at Big Blog Directory: "The only problem was that the graphic wasn't clickable since it used the 'Picture' widget . I took my html code and put it in a 'HTML/Javascript' widget instead and it worked."