CSS for beginners - changing the fonts

smallcsscode1.jpg
So you have a blog, probably set up using a free theme that you’ve chosen and installed, but there are a few things that have been bugging you.

You’d like to change them - and while you’re not going to break out into a cold sweat at the very thought, you haven’t tried this kind of customisation before.

Make a cup of coffee and get comfortable - this is really quite straightforward. I’m going to assume that you’ve got a WordPress blog, but the instructions here are pretty much universal.

Finding the file you need to change

The way that your blog is styled (how it looks) is controlled by instructions in a CSS file or stylesheet - usually called styles.css or style.css. I like to keep these files in a subdirectory called … /css/, but in many themes this file is found in the main directory.

In WordPress, you can edit this file directly by going to the Presentation/Theme Editor tab of your admin dashboard, but I would strongly recommend downloading the style.css file, saving a copy as a backup, editing it on your PC and then re-uploading it. This way you have a regression path (which just means if you got it wrong, you can go back to where you were). Just make sure you put the new version back where you found it in the first place, otherwise your changes won’t have any effect.

You don’t need any fancy software to edit this file - you can do it in a simple text editor like Notepad. If you want a good free HTML editor, you could try HTML-Kit - but everyone has their own favourites, and you don’t need anything more than Notepad.

Once you’ve got the style.css file open, you can make the changes you need. It is often a good idea to make small changes at a time, so you know what you’ve changed, and can change it back easily enough.

But what is a CSS file?

The CSS file contains the rules that govern the behaviour of the elements in the HTML files. You could define these rules in the HTML files, but this does make for a lot of extra work every time you want to change something - best not. (Note that the files in a theme are actually PHP files containing HTML - don’t be worried by the suffix .php. I’m referring to them as HTML files for simplicity).

Each web page in your blog looks up one or more CSS files to find out what rules it is supposed to follow. If you accidentally delete or rename the CSS file, every element in your blog will go back to the default values. It should all still be legible, but it won’t look like you expect it to.

Finding the elements you’d like to change

Your HTML files are made up of a number of elements - some are containers, containing other elements, and some are the individual items themselves. A few examples:

  • body - this is the overall container that all your content (text and images) will appear in.
  • div - this is a smaller container, that contains just part of your content, such as the sidebar content
  • h1 - this is the highest level of header. Other header elements include h2, h3, h4 …
  • p - this is a paragraph
  • a - this is a link
  • li - this is an item in a list
  • img - this would identify an element as an image.

Each of these can be uniquely identified and given an id. You might need to distinguish a particular image from all the others, so you call it something like: id=”bestimage”. By doing this, you can apply rules in your CSS file that apply only to that element, by using its given name. You will need to work out what the designer of your theme has used as names …

  • In the HTML file, you would have an image labelled:
    < img id="bestimage" ... >
  • In the CSS file, you would define the rules for bestimage:
    #bestimage {… }

Elements that you want to look similar can be given a class - for example, you might want half your images to behave in a particular way, perhaps float to the right of the page. You would assign rules to all images labelled: class=”floatright”. Any images not in this class would not follow those rules.

  • In the HTML file, you would label the images:
    < img class="floatright" ... >
  • In the CSS file, you would define the rules:
    .floatright {…}

Notice that there is a difference between an id and a class - an id applies only to one element, and is defined using #; a class applies to several elements, and is defined using a stop (.) - did you notice that stop?

It is possible to apply both an id and a class to the same element. Just in case you were wondering.

Making the changes you’d like to see - colours

smallcrayons.jpgEvery element of your page (header, subheader, paragraph etc) is controlled by rules laid down in the style.css file. Elements have default values, so you might not see every element in the file, but this is where you would change the rules for each element.

Every designer will have set out the style.css file in a different fashion, but you should be able to spot the various different rules. For example:

p { color: #000000;}

This rule says that everything in the HTML files for your theme which falls between < p > and < /p > should be colored #000000 (or black). You don’t have to use the hexadecimal value #000000 - we could have just written

p { color: black;}

but using the hex values gives a wider range of colours. Wikipedia has more information on colour names.

To change the colour, simply change the color value, or name. Here, we’ve changed the colour to red:

p { color: #ff0000;}

If you’ve specified a colour, you should also specify the background colour - either by giving a real colour name, or by using ‘transparent’:

p { color: #ff0000; background: white;}

This gives us red text on a white background. Notice that we now have two rules, and they are separated by a semi-colon.

Cascading rules

Because rules in a CSS file overwrite each other as the definition of the element gets more precise, often the generic values for the whole theme are identified at the highest level, and rules are used to overwrite these where a change is wanted. For example, mostly, we might want grey Verdana on a cream background, but bold red Tahoma for the headings, so we could set the generic rule at the broadest level, and refine it for particular elements only:

body {
font-family: Verdana, Geneva, sans-serif;
color: #808080;
background: ivory;
}


h1, h2, h3 {
font-family: Tahoma, Geneva, sans-serif;
color: #ff0000;
background: transparent;
}

You can set different rules for different sections of your page. You might, for example, want headers in your sidebar to be blue, but those in your main content area to be black. You would probably do this by setting the default headers to be black, as before, and then making a more specific rule for the blue ones:


h1, h2, h3 {
font-family: Tahoma, Geneva, sans-serif;
color: black;
background: transparent;
}
#sidebar h2, #sidebar h3 {
color: navy;
}

This makes any headers labelled h2 or h3 that appear in the section labelled ’sidebar’ to use the rule that makes them blue, overriding the earlier rule that made them black.

If you then had just one header in the sidebar that you wanted to be red, you would give it a unique id in the HTML code, and specify the rules for that header in the CSS file:

  • In the HTML file:
    < h2 id="redheader">This is the red header< /h2>
  • In the CSS file:
    #redheader {color: red;}

Making the changes you’d like to see - font

You can change the font used in your theme. For example, in this declaration:

p { font-family: Verdana, Geneva, sans-serif;}

we are saying that we want to use Verdana as our first choice, but if that isn’t available, use Geneva, and that if that isn’t available either, use any sans-serif font available.

We put a choice of fonts because not everyone has the same fonts available, though some fonts are common to both Mac and PC. You can use any font you like - but be aware that your visitors’ browsers can only use the fonts available on their computer, so if you choose something unusual, your visitors may end up seeing the default browser font, not the one you’ve chosen.

These instructions can be bundled up together, to make the CSS file smaller and easier to read:

p {
font-family: Verdana, Geneva, sans-serif;
color: #ff0000;
background: white;
}

smallfonts.jpg

Making the changes you’d like to see - font weight and style

Do you want bold text?

p { font-weight: bold;}

Do you want italics, or underlined text?

p {font-style: italic; text-decoration: underline;}

Making the changes you’d like to see - font size

You will probably want to differentiate between headings and your main text by changing the size of the font.

There are several different ways of dealing with font-sizes, and there is much debate about the best way. None of them is perfect.

The simplest is to use the font-size keywords xx-small, x-small, small, medium, large, x-large and xx-large, based on your visitor’s default font size:

p {font-size: medium;}

Another way of sizing fonts that you might find in your chosen theme is to use pixels:

p {font-size: 12px;}

This is easy for the designer, as it makes it more likely that the display of the page will be consistent; however, there can be accessibility issues, as the visitor will not be able to change the font size - and, for some users, they may therefore not be able to read the text.

Another font-sizing technique is to use ems:

p {font-size: 1em;}

1 em is equal to your visitors default font size - a bigger number (1.5em) will give a bigger size, a small number (0.8em) a smaller size. Your visitors will be able to resize the text to suit themselves.

My own preference is to use percentages:

p {font-size: 100%;}

This would set the size to be 100% of the user’s default size settings. Decreasing the percentage will make the text smaller; increasing it will make the text larger (and yes, you can go bigger than 100%).

The difficulty with both ems and percentages is that as the rules in your CSS file become more specific, the rules have a cumulative effect which you might not expect. If your font-size in the body element is set to 90%, and then you set the font-size in a p element to 80%, and a font-size in a class of p to be 75%, you will get 75% of 80% of 90% … Keywords don’t do this, but unfortunately, browsers don’t apply the keyword sizes in the same way.

So none of these is perfect, but I suggest that you look to see what option the designer of your chosen theme has used, and stick with it for now. Increase or decrease the sizes by changing the keyword, percentage, or size of em, and see what it looks like.

Making the changes you’d like to see - line-height, margins and padding

Finally, you might think that you need more space between paragraphs, or between the text and the edges of the container holding the text - or even between the lines.

To get more space between the lines of your text, use line-height. Vary the number to see the effect of different line-heights:

p {line-height: 2.0;}

An alternative method is to use percentages - if the designer of your theme has used these, stick with this as the measure to use.

To get more space between paragraphs, use padding or margin, depending on the effect you want. It may not matter in the short term which you use, but as your designs get more complicated, you may need to be more precise. Margin adds space around the outside of the element; padding adds space between the edge of the element and its contents.

p {margin: 1em;}

This applies a margin to all four sides of the p element.

p {margin: 0.5em 1em 0.5em 2em;}

is the same as

p {
margin-top: 0.5em;
margin-right: 1em;
margin-bottom: 0.5em;
margin-left: 2em;
}

You can, of course, just modify one margin, if that is all you need. Use the same rule for padding - just replace margin with padding throughout. Like font-sizes, you could use pixels or percentages to define the size of the margin - you might find your designer has used any of these. Best to stick with their chosen measure for consistency.

It’s all gone horribly wrong!

Probably you’ve missed out an end bracket or semi-colon in your CSS file. Have a quick look and see if you can see anything obvious. Try validating your code and looking carefully at any errors shown.

I like to use Firefox, which has a fab extension for web developers. This makes validation and tracking down errors easier, and has the facility to show you the name of each element - very handy if you didn’t design the theme, and don’t know the naming standards used. Or even if you did design it …

If you get completely stuck, you can re-upload your original style.css file (you did keep a copy, didn’t you?) and start again.

There is of course much more to CSS than I have been able to cover here - much more to changing the fonts, too - but this should get you started. If you want more, then I can recommend these books:

Designing with Web Standards by Jeffrey Zeldman and CSS: 101 Essential Tips, Tricks & Hacks by Rachel Andrew.

Have fun!

Book Review: What No One Ever Tells You

A while back, as a result of this post about Amazon plug-ins, Ted Demopoulos sent me a copy of his book, What No One Ever Tells You about Blogging and Podcasting - thanks Ted!

I saved it up, to take on holiday last week - and it was stolen from me by my non-blogging husband before we’d even got on the plane.

Five days later, after he’d taken pages and pages of notes, and scribbled plans for his company to establish a blog, and after several long conversations about what tools I’d come across, which celebrity bloggers I read, and what I thought about this and that, I got the book back.

Now, I’ve been blogging for over a year now (mostly at a personal blog about raising a gluten free child), and have spent a lot of time reading other blogs about blogging - but by page 14, I had dug out my Post-It Stickies, and was marking up references and ideas to follow up for both my personal blog and a business blog.

So - whether you are a brand new blogger, or have some experience under your belt, I think this book has something valuable for you. It covers the full range of topics, from the basic explanation of what a blog actually is, to the strategic discussion of what the future relationship between businesses and bloggers might look like. At the very least, it will make you think about the way your business is using - or should be using - blogging.

As it is, both my husband and I came back from holiday with a long to-do list. That has got to be a good recommendation for any book … why don’t you read it too? And then do let me know what you thought - if you can spare the time from your own newly generated business blogging to-do list …

8 Benefits of Blogging for Home Business

My name is Lucy, and I work from home.

There - confession made. Why do I feel awkward about working from home? Why do I sometimes spend time browsing the ‘offices to let’ section of the local paper? None of my clients have ever seemed to mind.

At least partly, this is because I feel l should have an office.

I want a non-domestic space to which I would be happy to invite clients. I want a physical presence in my local town - which might just entice some potential clients to drop in and visit. I have this vision of an open work-space with displays of artwork, the coffee just ready, comfy chairs for client meetings …

As it is, I live in a tiny village, which means I usually travel to see my clients - and if they come to me, they can come and sit in my warm kitchen, have a cup of coffee, and some cake fresh out of the Aga. They can admire my children’s artwork on the fridge - and then we can talk business. So it really isn’t so bad, working from home, from my point of view or the clients. But what I don’t have, is a physical presence reminding potential clients that I exist, and making it easy for the drop-in-and-chat client.

And that is what blogging can do for the home business.

Home business doesn’t have a physical presence in the local community - but it can and should have a presence in the virtual community.

A blog allows the home business to do the following:

  1. Let clients know about the business - like the sign hung outside a physical office
  2. A static website does this as well, but a blog has the advantage of regular updates with fresh content, making it easier (in theory) for a home business to be found on the internet by web searches.

  3. Remind clients about the business - as a physical office does every time they walk past
  4. There are several ways a website can remind people that the home business exists - a regular newsletter is one, but an RSS feed from a blog is another, and perhaps even better because it is more likely to be picked up by non-subscribers.

  5. Invite clients in - just as a physical office would keep the door open, a blog is always open …
  6. But a blog is open 24/7, while a physical office would be closed after hours. One of the main benefits of an internet presence is that it is always available for consultation by potential clients.

  7. Be welcoming and ready for a chat
  8. A blog is, by its nature, conversational, and because the home business owner can contribute to the conversation on their blog at a convenient time, the casual visitor won’t be put off by thinking they are interrupting the work flow. Sometimes a physical office can be intimidating for the casual visitor; a blog doesn’t have this disadvantage.

  9. Be professional - as a physical office would be
  10. On the internet, no-one can see the chaos of domestic life.

  11. Be the shop window
  12. A physical office may well have a ’shop window’ or other way of demonstrating the services of the business. A blog can do this too - more easily, perhaps, if the services have some visual component, but expertise can be demonstrated via the blog, by way of explanation of key issues, on-topic discussion and conversation.

  13. Be local … or glocal
  14. The physical office has a local presence, but can serve clients from a wider geographical spread - but so can a blog. The blog may be focused on local issues, or it may offer the opportunity to provide services glocally, using the Internet to provide local services on a global or transregional basis - whichever the business owner prefers.

  15. Be part of a community
  16. The physical office may well be part of the local community: perhaps the business owner belongs to the local chamber of commerce, or the local ShopWatch scheme, or other grouping. The blog owner is also likely to belong to internet communities as well as some of the local communities.

I believe that a blog has a lot to offer small businesses - home based or not - even though it doesn’t offer visitors a cup of coffee.

Getting the best out of Amazon

First things first – have you signed up for an Amazon Associates ID? This is your reference number for earning commission on any sales that you make. It is straightforward enough – go and do it now, at the Amazon site you hope to make sales through (look right at the bottom for the Join Associates link). And yes, you can set up an ID at both the .com site and, say, the .co.uk site – and if you want to sell to more than one country, you might well want to do exactly that.

Now you have an ID, the idea is to put this ID into any link that takes your visitor to Amazon so that you can earn a small commission on any sale.

Small note on etiquette: it is usual to reveal when you have placed an affiliate id into a link - often using a small (aff) after the link. My affiliate link is in all the links below - not that I’m expecting you to buy these books, but so I could set up the links!

(Also: don’t use the links you set up on your own site for your own purchases - this is not allowed.)

How do I create the adverts?

Let’s suppose you are recommending a particular book (What No One Ever Tells You about Blogging and Podcasting by Ted Demopoulos ) – not a book I’ve read, but one chosen at nearly-random today.

You can set up a simple text link, so that you can link directly to the book in your text, like this: have you read “What No One Ever Tells You” yet?

You can set up what Amazon call a Product Link – it looks like this:

For both the above methods, you link directly to the product you are recommending, and you have complete control over the selection of the product.

Context Links are a little different, and Amazon select the products to include based on the context of your blog post. So if you were posting about hamsters, you might see one book; if you were posting about blogging, you might see another. You get to choose the style of the ad.

Omakase Ads are similar, in that Amazon chooses which products to post into the ad based on their experience of visitor behaviour – you get to choose the size and style of the ad.


Recommended Product Links selects products for you, based on your choice of keywords or categories.

Then there are banner links, which simply promote Amazon, rather than any individual products – but the Associate ID is still in there - and you can set up a Search Amazon box.

Some of these ads and Amazon services can be inserted directly into the main body of your post; others will need to be added into a sidebar or the footer of your post. The choice, as they say, is yours. Simply choose the appropriate option from the Build Links category in the navigation, once you’ve logged into your Amazon Associates account.

I’d rather run a bookshop …

You can run your own Amazon outlet, powered by Amazon (meaning that they do all the hard work of payments/shipping), and for which you, again, earn some commission on sales.

This is simple to set up, although not very customisable. It merits its own link from the Associates navigation, and you get to choose the products to display on each page of the store. Once you’ve built your store - which is time-consuming - you can either integrate it fully with your site on its own page, or it can be a standalone site.

Now, the interesting thing about having an Astore is that you can have one per country, while if you’re using text-links or ads on your blog, you have to choose to promote either .com or .co.uk. This probably isn’t an issue if your visitors are mostly of one nationality … but if they come from different countries, it’s good to be able to point them in the right direction. Those of us in the UK don’t want to have to pay extra taxes and shipping to buy something from the US that we could have bought locally!

It’s all too hard

Luckily, there are a few plugins available for WordPress that make this all just that bit easier.

  1. Far and away the most popular is WP-Amazon, which adds a link into the back end of WordPress so that you can search Amazon directly from your Write Post page, supports different countries and uses Associate IDs. Unfortunately, as far as I can tell, this plugin is broken in WP2.2 – or was, as at May 16. The plan is to convert it to a Greasemonkey script and Firefox plugin …
  2. If you are a great writer of customer reviews on Amazon, you might be interested in the Igvita Last Amazon Review plugin, which lets you display your latest Amazon review on your blog. This plugin includes support for Amazon Associate IDs. I haven’t tested this, but it ought to work well – isn’t everyone more likely to buy a product with a good customer review or two?
  3. Patrick Chia’s plugin – Amazon Context Link Ads – will link relevant phrases to amazon.com products. If you enable the preview functionality, your site visitors will see a preview of a product; clicking on the link will send the visitors to the product detail page. If you remembered to add your own Associates ID, you’ll get referral fees from any purchase.
  4. Amazon Media Management, from Sozu, lets you add items from Amazon to your post – and keeps track of what you’ve added. (Blogsquare has a good explanation of how to use this plugin)
  5. CG-Powerpack, including the CG-Inline and CG-Amazon plugins should be useful, though I’m struggling to find clear comments on it, and it looks complicated to install.

    The documentation says that you can quickly insert Amazon links and images within a post using flexible image inlines, floating/embedded thumbnails or image links, and that CG-Amazon provides live Amazon data feeds, product links, wishlist links, keyword lookups, all product types/catalogs, article inlined and sidebars, keyword lookups, admin interface and caching system.

    It sounds mighty powerful, but note that CGA will take 20% of the referral fees.

  6. Pilkster has a plugin which looks as though it creates a store for you on your own site - without using the Amazon Astore structure. It looks very interesting indeed …
  7. And there is an Amazon Widget (Amazon Showcase) which lets you showcase any Amazon item by entering the ASIN/ISBN for any product and an Associate ID to get the product image and a link to the product detail page.
  8. Finally, there is a music signature plugin, called Now Playing, which identifies the music (artist, song, album) you are playing on iTunes, Windows Media Player or WinAmp, gets the information from Amazon and displays it on your blog, with your Associate ID in the link.

    Truly amazing - actually, this was one of those “Oh Wow” moments for me. The only thing missing is a image of the original artwork.

    However, this is a plugin for Windows Live Writer. Now, allegedly, Windows Live Writer allows you to create posts for Wordpress, but whether the plugin would work, I just don’t know. Anyone out there who does?

I don’t care about the money

You can of course integrate Amazon with your blog without earning any commission on sales, and there are some non-sales-oriented plugins

  1. One from Two Ells will display an item from your wishlist - and the commenters claim to have received books from their wishlists, so you might be lucky!
  2. Now Reading displays books you have read/ are reading/ plan to read, and it seems to be customisable into beautiful library pages for bibliophiles. No support for Associate IDs, as far as I can tell.

Well, perhaps I’d like a bit of money - will I make any?

I’ll end with a link to Darren’s recent post about Amazon Associate Earnings … as always, Darren is extraordinarily successful, but his secret is time (4-5 years) - and effort (over 2000 links to Amazon products). That’s more than one Amazon recommendation a day!

Blogging jargon - what does it all mean?

It is common for FTSE100 sites to include a glossary on their corporate sites to explain the jargon they use - both industry terms and financial terms. (Something to consider for your own business site?). Like any industry, game or hobby - yours will be the same - blogging has a lot of jargon terms.

Jargon has its place: it describes things that are unique to that industry, and it makes it quick and easy for insiders to communicate with each other. However, it can seem exclusive unless you know what the words are. I’m not accusing the blogging community here - this is true for all jargon, whether you’re talking about knitting (double-knit, moss, cable, intarsia, anyone?) or sailing (shrouds, gaff, jibe, gammon?).

I’ve had a request for explanation of some of the blogging terminology, so I’ll do my best. I’m bound to miss some stuff out, so do add anything else in the comments - either words you don’t know, or words you can explain to others. Here goes …

  • Above the fold - the area of your web page that is visible without the visitor having to scroll down
  • Blacklist - a list of URLs identified as spam, and excluded from your comments or trackbacks
  • Blog - an online journal (usually) available to the public and frequently updated with posts that (usually) appear on a single page in reverse chronological order. Also (as a verb) to maintain a blog.
  • Blog carnival - a blog post on a particular topic, advertised in advance, and pulling together links to other blog posts on the same topic
  • Blogger - someone who blogs. Also the name of a blog hosting web site
  • Bookmarklet - a link to the ‘write new post’ page of your blogging software, usually added to your browser toolbar to make it quick and easy to create a post
  • Blogosphere - all the blogs worldwide
  • Blogroll - a list of links to other blogs of interest, usually posted in the sidebar
  • Captcha - a way of identifying a visitor as human in an attempt to reduce spam, usually by asking the visitor to copy a series of letters and numbers from an image but sometimes by asking them to carry out a simple mathematical task
  • Categories - a means of categorising posts into logical groups
  • Comment - additional entries created by visitors to your blog that are appended to an individual post; usually containing a reaction to the content of the post
  • Comment Spam - spam left in the comment section of a blog in an attempt to get a lot of links to the spammers site; usually consisting of a few words and a link
  • Crosspost - to post the same entry to two or more blogs
  • Dark blog - a blog that is private and not generally available; perhaps an internal corporate blog
  • Flame - a hostile comment, often a personal attack, intended to insult and/or create controversy
  • Group blog - a blog maintained by a group of people who all post separately to the same blog
  • Link - a connection from one web site to another, via text or image
  • Link love - posting links to other blogs without expecting a reciprocal link or payment
  • Lurker - someone who reads blogs but doesn’t comment
  • Meme - an idea or game passed from one blog to another
  • Moblog - as a verb, to blog by using your mobile phone or PDA; as a noun, a blog that is updated via a mobile or PDA
  • Newbie - someone unfamiliar with the topic under discussion; a beginner
  • Permalink - the unique URL of a single post
  • Photoblog - a blog containing mostly photos
  • Ping (or Pingback) - an alert that lets tracking services, such as rpc.pingomatic.com know when you’ve published a new post. These services then crawl your site and include your new post in their index
  • Podcasting - creating audio files and posting them on your blog for your visitors to listen to; often interviews or discussions on a particular topic
  • Post - a single entry on a blog
  • Post scheduling - preparing posts in advance, and scheduling them to be published at particular times in the future
  • RSS - a way of distributing your blog to visitors to read in an RSS aggregator
  • RSS Aggregator/Feed reader - a tool that collates the latest posts for the blogs you choose to read, and presents them to you to read in a single location, rather than having to visit each site
  • RSS Feed - the file that contains the updates to a page with RSS enabled
    Reciprocal link - you link to my site and I’ll link to yours …
  • Sidebar - the columns found down the side of blogs, usually containing lists of links, information about the blogger, adverts etc
  • Spambot - a program that collects (or harvests) email addresses from the Internet to build mailing lists for spammers
  • Tag - a single word or short phrase that identifies the content of a post; useful for searches
  • Tag cloud - a visual representation of tags, with more frequent or popular tags appearing larger than less popular tags
  • Thread - a series of posts or comments on a particular topic that are related to each other (each adding to, or commenting on, the one before)
  • Trackback - a facility to allow the blogger to link to another blog
  • Troll - someone who posts (provocative and often discourteous) comments in order to generate (usually angry and unpleasant) discussion
  • Video blog or vlog - a blog containing mostly videos

Hope that helps …

Basic Blogging Etiquette

I’ve had an email asking me about blogging etiquette, so I thought perhaps I should respond out here - several of you may be wondering about this. Of course, blog etiquette, like any code of etiquette, will be different from person to person - this is my view.

A formalised ethical code is available at Blogging Ethics and at Centre for Computing and Social Responsibility.

Content - words. Remember that what you say will be publicly available, and though you may have only one reader today (you!), anyone can find your blog and alert the world to what you say - at any time, and very quickly. So don’t say anything you want to keep a secret or that could get you into legal trouble.

And if you make a mistake - correct it publicly. It is usual to strike-through (like this) any words that you would usually delete, and insert the corrected version. It is not usual to delete whole posts. If you feel you have to (and it does happen) delete the content completely (no strike-through), and explain on that post why the content has disappeared.

Content - images. If you are posting an image onto your blog, check the copyright, pay any royalties you might owe, and upload the image to your own server - don’t steal someone else’s bandwidth by linking directly to their site.

Linking to other blogs - in your text. If you refer to somebody else’s blog, you should provide a link to that blog - and to the specific post, if it is a particular post you are discussing. This is courteous not only to your visitor (because you are making it easy for them to visit something you are recommending) but to the other blogger (because you are acknowledging your debt to them, and providing them with additional visitors). You can do this in WordPress by clicking the ‘link’ button and pasting in the address of the site.

Linking to other blogs - trackbacks. This is a different way to refer to somebody else’s blog. In WordPress you can do this by entering the trackback URL (web address) into the Trackbacks field at the bottom of your Write Post page. This helps the other blogger know who is discussing their blog.

Linking to other blogs - in your blogroll. I don’t think anyone would have a problem with you adding a link to their site in your blogroll. Basically, this is a list of sites that you like and think a visitor to your site would like - so it is free publicity for the other site. Don’t assume, though, that this will be reciprocal.

Comments on your blog. It is usual to allow comments on your blog, and helps you engage in ‘conversation’ with your visitors. Sometimes bloggers disable comments - this might be because they have a huge readership, and the comments would number in the thousands, or it might be because of the volume of spam they are getting.

You will need to decide your policy on deleting comments. My own view is that comments should remain unless they are obviously spam or are libellous or obscene. One sign of a healthy blog is a vibrant community of commentators, which may include disagreements - as long as they are polite and pleasant.

If possible, you should reply to comments on your blog - at least acknowledge them - unless they are spam, obscene etc. It is usually considered rude to ignore someone trying to have a conversation with you …

Commenting on someone else’s blog. Bloggers who have comments enabled will welcome your input - as long as it isn’t spam and is relevant and does add something to the discussion. Simply adding a comment that says ‘I agree’ or ‘if you like this you’ll like my site [with a link]’ is not valuable. Add something useful, witty or interesting. And remember that the comments are public too, and will often require you to identify yourself.

Advertising. Accepting advertising onto your site isn’t wrong in itself, and may be the only way you have to recoup some of the expenses of blogging. Do check, though, that the adverts that will be posted will be suitable for your blog (no adult ads on a teen-oriented site, perhaps).

Conflicts of interest. If you are paid to post about a product or service, will you be able to give an honest account of your views without being influenced by the money? It is usual to make clear to your readers whether you have a financial interest in a subject, and whether any links that you include are affiliate links (ones to a product for which you might earn a small commission), usually identified by (aff) after the link, or are paid links.

Essentially, blog etiquette is the same as etiquette in the physical world: keep it courteous, legal and decent, and you shouldn’t go far wrong. After all, the essence of good manners is to make the other person feel comfortable being with you.

How to write your very first post (WordPress)

In this series of posts, I’m going to start at the very beginning, and assume that you are not confident about blogging - and even perhaps not confident about experimenting with things online. I shall be posting about more complex things in the future: this is for beginners.

Whether you’ve had a blog set up for you by your web designer or you’ve followed the instructions at www.wordpress.com you should have a username and a password for your blog. I’m going to talk about using WordPress, as that is the blogging software that I’ve been using.

Use the username and password to log in (either at your own blog or at www.wordpress.com). Since I’m the only person who uses my PC I’ve opted to have my password remembered, so that I don’t have to log in every time. If your PC is not secure, you shouldn’t do this, but should enter your password when prompted.

When you’ve logged in, you should see your dashboard.

To get started, click on Write. You will see Write Post or Write Page - ignore the Write Page for now, and we’ll talk about that later. A ‘post’ is simply one entry on your blog, and when you’ve saved it, it will be stored with the date and time of writing. This short tutorial is one post.

All you need to do is to write! Put the title of your first post in the Title box, and then your text in the big white box below.

I’ve created a free demo blog on www.wordpress.com to show you the steps involved - here’s a screenshot of the post page. You can see where to put the title, and where to put your text.

screenshot of wordpress write post page

Be sure to save your work every so often. Accidents happen - it is very frustrating to lose all your work by accident.

If you click the Save button, it will save your work as a draft, which you can start again later.

If you click Save and Continue Editing, you will be able to see what your post will look like when it is published either by scrolling down the page, or by clicking on the ‘preview’ link in the top right hand corner (opposite ‘Write Post’).

Some people like to write their posts in Word first, and then cut and paste into the text box - you could even write it out by hand first if you wanted!

Either way, once you have written your first entry, you can click Publish, and it will be made available to the world. Don’t be alarmed - you can always edit or delete it if you change your mind later. Bear in mind, though, that deleting a post previously published may be seen as a breach of etiquette - once your blog is read by more than one person (you!) that might matter.

Blogging for the terrified

So - someone has told you you should have a blog. This might be your techno-savvy child, a colleague or your web designer.

If the last, then perhaps you’ve asked them to set one up for you, and you’ve been looking at your screen wondering how and where to start. If the first, then perhaps you’re wondering what a blog is, and haven’t liked to ask …

Either way, I’m hoping this blog will help. Increasingly, my clients are asking for help and advice, not just implementation, and so I’ve decided that posting some suggestions here will be of help to you - and them.

I hope to cover the basics initially, and then widen the scope of the subjects I cover - if you’ve got questions, please contact me and I’ll do my best to answer them.

So, first up: what is a blog anyway?

Wikipedia says:

A blog is a user-generated website where entries are made in journal style and displayed in a reverse chronological order.

Blogs often provide commentary or news on a particular subject, such as food, politics, or local news; some function as more personal online diaries. A typical blog combines text, images, and links to other blogs, web pages, and other media related to its topic. The ability for readers to leave comments in an interactive format is an important part of many blogs. Most blogs are primarily textual although some focus on photographs (photoblog), sketchblog, videos (vlog), or audio (podcasting), and are part of a wider network of social media.

The term “blog” is derived from “Web log.” “Blog” can also be used as a verb, meaning to maintain or add content to a blog.

As of November 2006, blog search engine Technorati was tracking nearly 60 million blogs.[1]

What on earth does this mean?

Essentially, this means that you can have a web site on which you can easily update the content yourself. It doesn’t have to look like a diary, with every entry dated in reverse order, though they often do. Increasingly, people are using a blog as their main web site.

So you can add or change the contents of your blog every day. You can set it up so that readers (perhaps your customers?) can ask questions or comment on what you’ve said. And, because every entry or ‘post’ is a web page, the size of your site gets bigger every time you write a new entry (or ‘post’), which brings you benefits with the search engines.

Oh, and in case you were wondering, Wikipedia is a free online encyclopaedia with entries that are created and updated by anyone with an interest in a particular subject. It uses a wiki, a special kind of web site that makes collaboration easy.