Day 3: How to Blog in 7 Days
February 11th, 2008.Personalize your blog
Making your blog stand-out from the rest requires some knowledge of CSS and a little knowledge of XHTML.
This is a CSS and XHTML crash course…
CSS
To access your blog’s CSS file look at your blogging system file manager or access your site through FTP. It should be called style.css (or something similar).
To avoid problems, save a copy of the entire file before changing anything. Copy the language exactly – every semi-colon and bracket is important - and try not to change any widths.
Step 1: Your Blog Body
Your .css will begin with Body.
Imagine your blog site is like boxes. The Body is your biggest container. Any style instructions here apply to the whole site.
If you place a smaller box inside the Body with different instructions, they only apply to the smaller box.
You can change your blog’s background color here. It should look similar to this: #FC6090.
Here’s a link for a color table.
Your blog can also have a background image using this:
background: #FFFFFF url(http://yourdomain/yourimagedirectory/nameofimage.jpg) repeat-x/y centre/left/right;
Change the ‘font-size’, color (it looks like this: color: #333333), and type.
Step 2: Your Blog Header
Your header is for your logo or blog image if you have one.
Your blog header is a smaller box within your body.
To insert a blog logo, use this:
background: #FFFFFF url (http://yourdomain/yourimagedirectory/nameofimage.jpg) no-repeat left/right/centre;
(Ensure your blog logo or image matches the height and width defined in your .css)
Step 3: Your Blog Navigation
Your navigation contains links for Home, About, etc.
By now, you will see the pattern. Your blog navigation’s background color and text can be altered.
XHTML
With a blogging system and CMS, you will not need to fiddle with XHTML.
But, if you are determined to make a personalised blog, here are a little trick that is easy to do…
Create an contact email link. This is different from a normal link – when clicked it calls up a message box and can even have a pre-written subject like the one below:
lilly@lillymouse.com
This is the tag for it:
<a href=”mailto:lilly@lillymouse.com?subject=Type your subject here”>lilly@lillymouse.com</a>
See how you get on with that…
If you have any questions, suggestions, or discoveries – share them with others here. And I will do my best to help.
Until next, happy blogging!
Love, me.
P.S. Have a look at Day 1: Setting up your blog and Day 2: Design your blog!










