Having Your Titles Show In Archive

If you want your Archive to show your own post titles (as opposed to all dates), set your "Configure Blog Archive" page element like this screenshot. Make sure that "Hierarchy" and "Show Post Titles" are both marked.

[click image to enlarge]

If your Archive list is not seen in the sidebar, check the page elements in the Layout page and see if it has been deactivated. If not turned on, you should add it. Look carefully at its settings, then save them.

END.

Having Your Titles Show In Archive

If you want your Archive to show your own post titles (as opposed to all dates), set your "Configure Blog Archive" page element like this screenshot. Make sure that "Hierarchy" and "Show Post Titles" are both marked.

[click image to enlarge]

If your Archive list is not seen in the sidebar, check the page elements in the Layout page and see if it has been deactivated. If not turned on, you should add it. Look carefully at its settings, then save them.

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.

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.

Preformatted Text--Show Spaces and Html

ee cummings's defunct but would not like this stupid Blogger bogger, cause he couldn't do this little dance in it, could he? would he, mister death?

Dear mr cummings: I know you're dead, but you might try putting the text of your poems between these tags:

<pre> text </pre>

This means that it will accept the preformatted text exactly as presented, though usually not in fancy fonts. The pre tags are also useful for computer codes if you don't wish to use the html ampersand codes or otherwise translate the special coding signs.

[More below...]

The PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-width font, should not collapse whitespace, and should not wrap long lines.

PRE is useful for formatting computer code or poetry where whitespace is important, but since preformatted text is inherently visual, authors should avoid dependence on it wherever possible. When using PRE, authors should avoid altering the element's fixed-width font or non-collapsing whitespace properties by means of style sheets.

related matters:

-- NON-BREAKING SPACES can be used as extended space or as a tab. A non-breaking space looks like this:   Three of them would be simply:     An ee cummings poem, though, might drive you crazy, so be cautious! SHOWING HTML CODE: -- AMPERSAND CODES can be used in short sections to show the code itself (which is what I did to show the non-breaking space code above). HTML Ampersand Character Codes -- For longer sections that need to be "translated" or if you're lazy, the programs below convert html code for you. Both work well, though Postable's first screen is a little less intuitive. For Postable's mysterious first screen, just left-click the mouse on the phrase in the upper left corner, "for your copy and pasting pleasure" and, when the screen clears, you can enter the code you want it to fully display. Postable Quick Escape

END.

Preformatted Text--Show Spaces and Html

ee cummings's defunct but would not like this stupid Blogger bogger, cause he couldn't do this little dance in it, could he? would he, mister death?

Dear mr cummings: I know you're dead, but you might try putting the text of your poems between these tags:

<pre> text </pre>

This means that it will accept the preformatted text exactly as presented, though usually not in fancy fonts. The pre tags are also useful for computer codes if you don't wish to use the html ampersand codes or otherwise translate the special coding signs.

The PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-width font, should not collapse whitespace, and should not wrap long lines.

PRE is useful for formatting computer code or poetry where whitespace is important, but since preformatted text is inherently visual, authors should avoid dependence on it wherever possible. When using PRE, authors should avoid altering the element's fixed-width font or non-collapsing whitespace properties by means of style sheets.

related matters:

-- NON-BREAKING SPACES can be used as extended space or as a tab. A non-breaking space looks like this:   Three of them would be simply:     An ee cummings poem, though, might drive you crazy, so be cautious! SHOWING HTML CODE: -- AMPERSAND CODES can be used in short sections to show the code itself (which is what I did to show the non-breaking space code above). HTML Ampersand Character Codes -- For longer sections that need to be "translated" or if you're lazy, the programs below convert html code for you. Both work well, though Postable's first screen is a little less intuitive. For Postable's mysterious first screen, just left-click the mouse on the phrase in the upper left corner, "for your copy and pasting pleasure" and, when the screen clears, you can enter the code you want it to fully display. Postable Quick Escape

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!

View Anyone's Source Code

Internet Explorer

To view the code that other people use to display an icon, image, button, or other item, look at the browser (not Blogger) toolbar up above (while you are at their site) and 1. click View 2. click Source 3. right-click your mouse 4. click Select All 5. right-click again and click Copy. 6. open a Notepad file and Paste the code there. 7. Locate the applicable code, where it starts and ends. 8. Copy and Paste that snippet of code into your own template or page elements.

FIREFOX
For those of you who use or are comfortable with Firefox, it's simpler: 1. Mark (highlight) the area of interest. 2. Then right-click the mouse. 3. Click on "View Selection Source". 4. Code will appear on screen; Copy & Paste what's needed.

END.

View Anyone's Source Code

Internet Explorer

To view the code that other people use to display an icon, image, button, or other item, look at the browser (not Blogger) toolbar up above (while you are at their site) and 1. click View 2. click Source 3. right-click your mouse 4. click Select All 5. right-click again and click Copy. 6. open a Notepad file and Paste the code there. 7. Locate the applicable code, where it starts and ends. 8. Copy and Paste that snippet of code into your own template or page elements.

FIREFOX
For those of you who use or are comfortable with Firefox, it's simpler: 1. Mark (highlight) the area of interest. 2. Then right-click the mouse. 3. Click on "View Selection Source". 4. Code will appear on screen; Copy & Paste what's needed.

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; }

[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.