MetaBlog

Those new to blogging may not be aware that a wealth of terminology has evolved around the act of blogging, which will roll off the tonque (or fingertips rather) of the seasoned blogger. Get yourself up to date with blogspeak in readiness to go bloghopping around the blogosphere from Wikipedias list of blogging terms or a more extensive list here.

And I am going to coin a blogging phrase of my own. Blog Crashing
- when two or more people have a conversation via comments on one of your posts that has nothing to do with you or the content of your post. As happened to Lisa yesterday. Sorry Lisa! :-)

I was amazed to find that there are annual awards called the Bloggies, and they are currently looking for 2006 nominations. Jeffrey Zeldman won the first Lifetime Achievement award in 2001 and he has been been blogging since 1999. This year a fascinating blog called Postsecret, a community art project, won best American blog. Well I never! Anyone fancy their chances??!!

For me CSS (Cascading Style Sheets) are the best thing since sliced bread! For those who are familiar with CSS I hope to post some of the techniques I've used to create new skins. For those who know nothing of CSS I hope to enthuse you and point you in the right direction to learn more so read on.

CSS - What is it and why?

You will have noticed that the so called 'skins' available for the blogs vary greatly in design, colour and layout. The posts in every blog however are served up in an identical framework of html. With web accessibility in mind, good standards based websites use only those html tags which structure the content ie. define headings, paragraphs and the like, but nolonger defines the way the page looks ie. fonts, colours, background colours and even layout. Thats all very well but a page constructed like this would look pretty boring. A solution is to seperate content from design using CSS which contains all of the pretty formating in a seperate document. The CSS document is linked to the html document generally in the header tag and determines how it will look. Its also applied to every page of your site so, link to a different CSS document and Hey Presto, your whole site looks different!

And to demonstrate:

No matter what 'skin' this blog is wearing when you read this, I bet its quite colourful if not bordering on whacky? (I'm thinking Toilet Paper!) If we strip away CSS all together Metablog would look like this. Pretty boring eh? All the information is there, it just doesnt look good.

Every blog has a default 'basic' style sheet which it will be wearing when you get it and when applied makes the above version of Metablog look like this. You can see things taking shape. The same information but nicely laid out with posts on the left and a side column on the right, a nice font and some colour.

The other more interesting skins go one stage further and bring in another style sheet which brings in more formating and other design elements like background images, like the one youre looking at now (I hope).

To see the CSS design at its most imaginative, take a walk around the Zen Garden.

So how do I do it?

To link to your external style sheet, under the blogs 'General' tab in 'Blogs and Settings' you will find a drop down list of available skins. Under that there is a field where you can link to an external style sheet. Choose the 'None/Custom file' option in the list, create your style sheet, save it in your own web space and put the full URL to it in here, select the. So it will be something like:

http://www.mywebspace.com/mycss.css

More detail of the structural layout of the blog template can be seen in part two of this post here.

Here are some useful tutorials, please post any more which can be added:

Tutorials

• Basic HTML Introduction - if HTML and 'tags' mean nothing to you, start here.
• HTML Tutorials - a more comprehensive guide to HTML from W3Schools
• Introduction to CSS - A potted guide to CSS from Dave Raggett at W3C
• CSS Tutorials - a more comprehensive guide to CSS from W3Schools
• Max Design - CSS Selectors Max Design is a great resource with more advanced stuff also
• Web Standards Checklist - Also from Max Design.
• Twelve lessons in CSS - From A List Apart with web standards in mind.
• CSS Play - Maybe not relevent to blog design but really fun stuff!
• CSS Wiki - Loads of useful CSS resources here.
• Open Source Web Design - For design ideas but check usage licencing.

Please post any resources you have found to add to the list and have fun!

Maps of user locations?

Hmmmm...

Newcastle Blog Map

...what could this be used for?

I don't go to church so heres my good deed for this sunny Sunday. Here are some screenshots of blog skins so far, some available in a variety of colours:

None/custom file

Blogs default to this if you do not choose a skin from the dropdown menu.

Basic

Available in loads of colours, try them all!

Angles

Available in Chilled, Lime Green, Purple and Red Combo.

Scratches

Available in red, purple, green and gold.

Stripes

Available in red, grey, green and blue.

Toilet Paper

Clipboard

Notepad

Sunflower

I've uploaded the slides from this mornings talk on blogs and rss. They can be found here