Day 3: How to Blog in 7 Days

February 11th, 2008.

A blog that stands out

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!


This article is written by: Lilly Mouse...I love communicating (through writing, art, dance, and any other way imaginable). Blogging and I have become very good friends in the last few years. LillyMouse.com is my creation, and I'm so please to share it with you! Ciao for now, Lilly Read more from this author


What's Next?

Stumble this

Digg! Digg this

Subscribe to Lilly Mouse

Your Comments

Be the first to comment...

Have Your Say...

You must be logged in to post a comment.