New Blogger method, easier for most
1. In Dashboard go to Layout.
2. Click Header in the Layout.
3. Have the url of the image you want to use handy.
4. Type or paste or Browse for the url into one of the two Image boxes,
5. Either an image on your computer or one already hosted on the Web.
6. You can choose to add the photo Behind the Title and Description or
7. You can Replace the Title and Description with the photo.
8. Be sure to Save Changes.
This method still useable and ultimately more flexible (but you may be well satisfied with the first method above):
The code you'd look for to put a graphic into the header seems to come from a variety of locations in your template. It might go in the #header or #header-wrapper. The method I usually use is to locate a background url that already exists like these:
#header {
margin: 0 2%;
background-color: $headerBgColor; background:url("
http://bp1.blogger.com/_AVxLoZ0mR_0/Rb_W1nLeYQI/AAAAAAAAAIg/
qCR5JYhLf6o/s1600/dgblues.jpg") no-repeat bottom 10px;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}
or
#wrap2
{background:url("xxxhttp://bp3.blogger.com/_AVxLoZ0mR_0/
RcNxJHiGO3I/AAAAAAAAAKA/5GfVtiwhGRE/s1600/jg2.jpg")
no-repeat center top; }
If this doesn't make anything more clear, ask again. I won't mind. But I don't know everything!
------------------------------------
It also worked for me to place an extra html/javascript page element above the header, with code like below:
<a href="http://jgblues.blogspot.com/"><img top="" src="http://bp3.blogger.com/_AVxLoZ0mR_0/RcNxJHiGO3I/AAAAAAAAAKA/%205GfVtiwhGRE/s1600/jg2.jpg" repeat="" center="" /></a>
but first you'll have to go into the header widget in the template and change it so that the extra header is allowed, like this:
1. Go to Template.
2. Click on Edit Html
3. Click on Expand widget templates.
4. Locate the header widget.
5. It might look like this:
6. Change the maxwidgets number to 2 or more.
7. If there's a showaddelement='no', change it to say 'yes'.
8. I don't advise removing the old header entirely unless you can otherwise preserve the title for the search engines, but if you mean to try, I understand that you'll have to change locked='yes' to 'no'.
9. Save your new template.
Some have remarked that they have no header at all, and I don't know what that's about. In new blogger, you might find a section like this, which reflects the fact above that I have the mentioned html/javascript page element added to that header.
<b:section class="'header'" id="'header'" maxwidgets="'4'"><b:widget id="'HTML6'" locked="'false'" title="''" type="'HTML'/"><b:widget id="'Header1'" locked="'true'" title="'JUDY" type="'Header'/"></b:widget>
Various statements of fact and warnings on this subject may be missing or careless at present, so beware.
2. Click Header in the Layout.
3. Have the url of the image you want to use handy.
4. Type or paste or Browse for the url into one of the two Image boxes,
5. Either an image on your computer or one already hosted on the Web.
6. You can choose to add the photo Behind the Title and Description or
7. You can Replace the Title and Description with the photo.
8. Be sure to Save Changes.
I can't emphasize how much easier the method above is!Below is the old (Classic) method
This method still useable and ultimately more flexible (but you may be well satisfied with the first method above):
The code you'd look for to put a graphic into the header seems to come from a variety of locations in your template. It might go in the #header or #header-wrapper. The method I usually use is to locate a background url that already exists like these:
#header {
margin: 0 2%;
background-color: $headerBgColor; background:url("
http://bp1.blogger.com/_AVxLoZ0mR_0/Rb_W1nLeYQI/AAAAAAAAAIg/
qCR5JYhLf6o/s1600/dgblues.jpg") no-repeat bottom 10px;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
}
or
#wrap2
{background:url("xxxhttp://bp3.blogger.com/_AVxLoZ0mR_0/
RcNxJHiGO3I/AAAAAAAAAKA/5GfVtiwhGRE/s1600/jg2.jpg")
no-repeat center top; }
If this doesn't make anything more clear, ask again. I won't mind. But I don't know everything!
------------------------------------
It also worked for me to place an extra html/javascript page element above the header, with code like below:
<a href="http://jgblues.blogspot.com/"><img top="" src="http://bp3.blogger.com/_AVxLoZ0mR_0/RcNxJHiGO3I/AAAAAAAAAKA/%205GfVtiwhGRE/s1600/jg2.jpg" repeat="" center="" /></a>
but first you'll have to go into the header widget in the template and change it so that the extra header is allowed, like this:
1. Go to Template.
2. Click on Edit Html
3. Click on Expand widget templates.
4. Locate the header widget.
5. It might look like this:
6. Change the maxwidgets number to 2 or more.
7. If there's a showaddelement='no', change it to say 'yes'.
8. I don't advise removing the old header entirely unless you can otherwise preserve the title for the search engines, but if you mean to try, I understand that you'll have to change locked='yes' to 'no'.
9. Save your new template.
Some have remarked that they have no header at all, and I don't know what that's about. In new blogger, you might find a section like this, which reflects the fact above that I have the mentioned html/javascript page element added to that header.
<b:section class="'header'" id="'header'" maxwidgets="'4'"><b:widget id="'HTML6'" locked="'false'" title="''" type="'HTML'/"><b:widget id="'Header1'" locked="'true'" title="'JUDY" type="'Header'/"></b:widget>
Various statements of fact and warnings on this subject may be missing or careless at present, so beware.
