Customise your Blog Background in HTML

Want to keep your older style blog template, but think it's looking ready for a bit of a revamp? Well, this post is going to cover how you can make some simple changes to your blog HTML to change the appearance of your blog background. I'll show you how to add in a link to an image or pattern, or how to select a custom colour to match the palette you've used on your blog.
(**If you're looking for my post on Customising Your Blog Background on Layout Templates, you'll find it here.)

If you're using an older blog template, then it can be really useful to know how to customise your blog background in HTML.  If you're not confident with using HTML, this can seem a little more challenging than if you're using the Template Designer option, but it is pretty straight forward once you get the hang of it.

To change your HTML, you need to firstly go to your 'Design' tab and click 'Edit HTML'.

The very first thing you should always do is save a copy of your template, so that you have a backup if anything goes wrong.

After you save that, type CTRL F, and type in body to find the section of your template that looks something like this:

Once you're there, you can now make changes by either selecting a custom colour, or by adding in a background image.

Adding custom colour to older style blog templates
This is super easy once you've reached this stage. Simply take the hex code that you want to use from your palette and enter the details here like this:

** Some templates will let you leave the wording as just background, others will not accept the change unless you change this to 'background-color'.

Select 'preview' to check the appearance of your template and if you're happy with the background colour click save.

***Tweaking the post/sidebar background area***
A common problem that can arise when you change the colour or add a pattern or picture background is that it makes the post hard to read if it shows through. To stop that happening, find the following section of code and change the color to prevent that happening (in this case I've changed it to white).

Adding a photo or pattern background to your blogger template
The first thing you need to do is upload the photo or pattern that you wish to use to an image hosting site. For this I've used Photobucket.

Once I've done this, I need to look for the same section of HTML code that you change to add a custom colour, which looks like this:

To change the background colour to an image, type 'URL', then copy and paste the URL of the image you uploaded in brackets next to it. It will now look like this:

Preview your blog and if necessary tweak the post/sidebar background (as above) and once you're happy with the changes you're done!

You now have a unique colour or pattern that will really make your blog stand out.

If you have any questions, please let me know! 

Crafty Blog Colours

Welcome to my blog - I'm really excited to be starting this new 'venture'. If you've already visited my other blog, then you're probably know how much I love crafty stuff and all things handmade! (And if you haven't been there, you can visit my other blog - Lulliloo - here!)

I don't really talk about my everyday work over there, so it's going to be a whole new experience for me to be writing my own blog and talking about things like SEO, web design and online marketing. Hopefully I'll be able to come up with lots of useful and interesting information that will be relevant for all those out there who love crafty stuff as much as I do and are trying to figure everything out when it comes to starting an online home based business.

Colour is so important in design, and if you're setting up a blog, getting the right colours and doing it consistently may be a little overwhelming. If you're like I was when I started my first blog about 6 years ago - you're probably wondering how on earth to keep track of the colours you've used so that you can create a really 'clean' and pretty blog. (And if you're a crafty sort like me, you're probably grinding your teeth in frustration that you can't get everything just right!)

So for my first post, I'd like to introduce you to a site called Colour Lovers. Whether you're looking for a great palette to use on your blog, or looking for a way to store a palette that you already use, you'll find this site has everything you need. The great thing about this is that you can keep track of your favourite palettes, or you can create one that you can then use as you make changes on your site.

You will have to register for the site, but this is a good way of keeping track of any colours/pallettes you've used - and you'll find a host of other features on there including patterns (which is how I created the background here). And in my book, having your palette stored in one place instead of trying to use a colour picker tool makes life a whole lot easier!

Once you've signed in, you'll need to select the palette option like this:

This will then take you to a screen similar to the shot below. Here you'll be able to pick the colours you like and save them as a palette of up to 5 different colours.
 

After you've chosen the colours that you want, you can give the palette a name and scroll down the page to save it. Using the colours you've chosen, you can now accurately and consistently make changes to your site - knowing that you're using the same colours each time.

The screen shot below here shows 4 of the 5 colours in the palette that I used for this blog - and in order to help you when you're making changes to colours on your blog, I've circled some important things here that I'll explain now.

The circle on the left shows a number called a Hex number. This is used in the HTML code of your blog to identify the colour for fonts, borders, backgrounds and a range of other colour related selections. If you've been trying to use the colour picker each time, you'll find that you can now use this number instead. Best of all, this number can be used in other design programs, so you can create headers, banners, frames and even blog signatures, all in the same colour by simply using this number.

The 3 numbers circled on the right work in a similar way, and these are Red Blue Green numbers (or RGB). If you use these, you'll need to enter the 3 different numbers into the corresponding spaces, so generally, it's much easier to work with Hex numbers RGB is not usually used when carrying out basic blog changes.

Colour is one of the most important ingredients in a great design and once you have picked out your perfect palette, you can make sure that your colour choices are coorinated across different sites and when creating things like headers, buttons and even pages for your online stores.