HTML hints for blogger users

Amy asked me to give her few tips on HTML for her blog so here they are.

For all the code instructions below, where I have given the code in Courier font, you must enclose this text in triangular brackets, thus:<>. Sorry for the confusion but I'm not sure how to include HTML code in my post without it actually working as HTML code.

The code for italics is em and /em or i and /i. These pairs of code are used at the beginning and end of the text to be italicised. The one without the backslash goes at the beginning, the one with the backslash goes at the end. (This is the same for all HTML tags.) I have found that the i code works in both the body posts and within the pre-coded page element gadgets. In contrast, em does not work in all of these gadgets, in particular the list one, I have found. You can use the i code in comments on blogger as well. Having said that, I remember reading somewhere that em is more widely used and accepted, so it might be better to get in the habit of using that where possible.

The code for bold is b and /b to begin and end bolded text.

The code for strike through is del to begin and /del to end. I am not sure that it works in every gadget, but it definitely does in the HTML script one, which is what I use for my book list where I cross things out.

The code for underline is slightly longer. To begin, use this: span style="text-decoration:underline;" and to end, use this: /span. According to the blogger help page I found this on, "The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links." Line-through works the same way as del but of course del is a whole lot shorter to remember and type.

If you want to make a list of items where each item is slightly further spaced apart than is achieved with a standard line break (the br tag), and there is a hanging indent (that is, second and subsequent lines of one item are indented but the first is not) - such as you can see in my list of "Classics I'd like to read in 2008" on the right hand column, then you need to use two sets of tags. The code to begin a list is ul, and to close it and go back to normal, you use /ul. Within these, you also need to surround each item of the list at the beginning and end with li and /li.

Why would you want to do all that when there is a gadget that makes lists, just as I have described? Because blogger's list gadget does not allow the del and span tags to be used, so if you want to use strikethrough, you can't unless you do it within an HTML/Javascript gadget.

And of course you might want to make such a list in a blog post as well. The only thing is that this tag is actually to create bulleted lists. It puts in the bullets when you use these tags in a post, but for some reason blogger doesn't show them in side bar elements, even using the same code. Don't ask me why, I don't know!

You can also make a numbered list using the tags ol and /ol instead of ul. Don't forget to use the li tags as well for each individual list item.

With all the above, don't forget to enclose the code within triangular brackets, or nothing will work.

---

And now for the biggie! How to centre the title on your blog.

Note, the curly brackets in the code below are real curly brackets. Don't go changing them to triangular ones like you needed to for the examples above.

If you go into the blogger dashboard, there should be an option to called "Layout". Go there and select "Edit HTML". Then follow the instructions to save a backup copy of your template in case this doesn't work! There are options to preview the changes and to clear your edits, but you can't clear saved edits.

Scroll down to where it says,
/* Header
-----------------------------------------------
*/

Then just a little bit below that you should find the following code:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
The bit I have rendered in bold is the bit you need to check. Does this say center or left, or is it missing? It must say center.

If that's okay, check down a little bit further to where it says something like this:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
text-align: center;
letter-spacing:.2em;
font: $pagetitlefont;
}
and here as well:
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
text-align: center;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
As I have shown in this example, you can insert the text-align:center code anywhere in each of these sections as well.

Amy, I suspect that since your main title (which relates to the #header h1 portion) is centred but your title description (which relates to the #header .description portion) is not, you will find that you have to change a line of code in this third place. The code in these lower two sections seems to override the code in the first section, if my observations are correct.

HTH, Amy!