Monday, October 02, 2006

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.




8 comments:

Anonymous said...

Great tip. I´ll try on my beta blogger. How you put 'Read more' on your posts? Can i put in beta to? Thanks...

Emma said...

just what i needed, thanks heaps

Charity said...

OMG. It took me AGES to find your post, and it's a God-send.

Okay, not ages, but at least two months.

Thank you, thank you, thank you.

Henner said...

I had searched the net for two days. My problem was, how to add a picture to the beta blog header. When I continued my search in English, I found at ounce this
blog and the solution. Thanks! Greatings from Germany! Henner

calleigh . said...

How do I upload the picture to the middle on the header?

vin said...

Princez fii,
Your pic has to be same size as your header. For any difficulties email me directly at drbhatns at gmail dot com

Norman Roberts said...

thanks for the help
you can see the result here
http://nosubscriptionrequired.blogspot.com/

Anonymous said...

thank u very much for this code