Change Format Of Date Header

Reset format of the date header At the top of all posts!
Go to your Dashboard. Click Basic Settings. Click Formatting. Find Date Header Format. Open the dropdown menu and choose one. Click on "Save Settings" at the bottom of the page.

Change Format Of Date Header

Reset format of the date header At the top of all posts!
Go to your Dashboard. Click Basic Settings. Click Formatting. Find Date Header Format. Open the dropdown menu and choose one. Click on "Save Settings" at the bottom of the page.

Find Width of Header For New Image

Header Width

This will tell you places to look for the width of your header. The image you want to place there should not exceed that. You should use a photo program to alter the width of your image BEFORE you upload it to your photo host (whether Blogger or otherwise). To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below showing the #wrap; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Actually adjusting the width of your image in a photo program would then be the better choice.

Another possible location of header width: #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 900px; text-align:left; }

END.

Find Width of Header For New Image

Header Width

This will tell you places to look for the width of your header. The image you want to place there should not exceed that. You should use a photo program to alter the width of your image BEFORE you upload it to your photo host (whether Blogger or otherwise). To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below showing the #wrap; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Actually adjusting the width of your image in a photo program would then be the better choice.

Another possible location of header width: #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 900px; text-align:left; }

END.

Centering Header Image

A. First try making the image the right size

To center image in the header, use a photo program to resize the width of the image to fit the size of the header. To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

[More below...]

B. Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Selection A would then be the better choice. #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 1000px; text-align:left; }

Hopefully you made a safety copy of your template before you started monkeying with the code or making any changes--you know, in case all hell breaks loose and you need to rescue yourself!

Centering Header Image

A. First try making the image the right size

To center image in the header, use a photo program to resize the width of the image to fit the size of the header. To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

B. Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Selection A would then be the better choice. #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 1000px; text-align:left; }

Hopefully you made a safety copy of your template before you started monkeying with the code or making any changes--you know, in case all hell breaks loose and you need to rescue yourself!

Use CSS To Align Header Text

Text-align: center/left/right

Header Alignment
Setting alignment for the header has to be done in the template. The first section below of CSS instructions (from my blog, "The Rat Squeaks") does various things including that it sets the blog title to be centered. .Header h1 { margin:0 0 .25em; color:$titlecolor; font: $pagetitlefont; font-variant: small-caps ; text-align: center; }

[More below...Description alignment]

Description Alignment
Not far behind it comes this section for parameters of the Description, also setting the alignment to Center: .Header .description { margin:0; max-width:700px; line-height:1.8em; text-transform:none; text-align:center; letter-spacing:.2em; color:$titlecolor; font: $blogDescriptionFont; }

Your template may vary, so I can only give this example of where and how to find/place these CSS instructions. Use the exact formula if you are placing a new instruction there. Examples given below:

text-align:center; text-align:left; text-align:right;

END.

Use CSS To Align Header Text

Text-align: center/left/right

Header Alignment
Setting alignment for the header has to be done in the template. The first section below of CSS instructions (from my blog, "The Rat Squeaks") does various things including that it sets the blog title to be centered. .Header h1 { margin:0 0 .25em; color:$titlecolor; font: $pagetitlefont; font-variant: small-caps ; text-align: center; }

Description Alignment
Not far behind it comes this section for parameters of the Description, also setting the alignment to Center: .Header .description { margin:0; max-width:700px; line-height:1.8em; text-transform:none; text-align:center; letter-spacing:.2em; color:$titlecolor; font: $blogDescriptionFont; }

Your template may vary, so I can only give this example of where and how to find/place these CSS instructions. Use the exact formula if you are placing a new instruction there. Examples given below:

text-align:center; text-align:left; text-align:right;

END.

Header Picture Code

Unscrambling Blogger photo code for Header picture code

Blogger's picture icon is good for regular pictures in the post or in the sidebar, but it's overdone for the purpose of putting a photo in your header. You don't need both large and small versions for the header.

What Blogger may give you when you upload the photo to a post (Save it, but don't Publish it!) will resemble this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600-h/dgblues.jpg"><img id="BLOGGER_PHOTO_ID_5025971925707284738" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg" border="0" /></a>

What you would need to extract is this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600/dgblues.jpg

If you didn't notice on your own, the difference between the red code at the top and the red code above this paragraph is that the -h has been deleted after S1600.

---

SMALL IMAGE: The url contained in the blue text (marked S400) is the smaller of the images and will need no correction--just the code, such as this, shown above:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg

Assuming that the S400 is actually small and not just less than the large one, you could enter that code, as shown, into the Photo Url as your Profile Photo.

END.

Header Picture Code

Unscrambling Blogger photo code for Header picture code

Blogger's picture icon is good for regular pictures in the post or in the sidebar, but it's overdone for the purpose of putting a photo in your header. You don't need both large and small versions for the header.

What Blogger may give you when you upload the photo to a post (Save it, but don't Publish it!) will resemble this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600-h/dgblues.jpg"><img id="BLOGGER_PHOTO_ID_5025971925707284738" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg" border="0" /></a>

What you would need to extract is this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600/dgblues.jpg

If you didn't notice on your own, the difference between the red code at the top and the red code above this paragraph is that the -h has been deleted after S1600.

---

SMALL IMAGE: The url contained in the blue text (marked S400) is the smaller of the images and will need no correction--just the code, such as this, shown above:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg

Assuming that the S400 is actually small and not just less than the large one, you could enter that code, as shown, into the Photo Url as your Profile Photo.

END.

Where To Place A Graphic For The Header

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.

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://2.bp.blogspot.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://4.bp.blogspot.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://4.bp.blogspot.com/_AVxLoZ0mR_0/RcNxJHiGO3I/AAAAAAAAAKA/
5GfVtiwhGRE/s1600/jg2.jpg" no-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:
<b:section class='header' id='header' maxwidgets='1'>
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 GARLAND BLUES (Header)' type='Header'/></b:section>

Various statements of fact and warnings on this subject may be missing or careless at present, so beware.

Where To Place A Graphic For The Header

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.

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://2.bp.blogspot.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://4.bp.blogspot.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://4.bp.blogspot.com/_AVxLoZ0mR_0/RcNxJHiGO3I/AAAAAAAAAKA/
5GfVtiwhGRE/s1600/jg2.jpg" no-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:
<b:section class='header' id='header' maxwidgets='1'>
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 GARLAND BLUES (Header)' type='Header'/></b:section>

Various statements of fact and warnings on this subject may be missing or careless at present, so beware.