Monday, December 19, 2011

Geek Stuff: Blogging 101 - blogger templates

OK, so you have now set yourself up with a blogger blog and want to choose a template that is more condusive to how you want your posts displayed.

Free templates

There are so many free blogger templates you could choose from; just do a google search for "blogger templates" and the search engine will return a rediculous number of results. Check out a few of the designs - you might find just what you are looking for. Then all you will need to do is download the xml file (sometimes it will be zipped so you will need to unzip the file), and upload it to your blog from the Design, Edit HTML tab:

Once you've uploaded the xml file your blog should have the look and layout of what you had previewed on the site where you obtained the template. Sometimes you may have to do some tweaking of the template, so read on.

As you can see I've gone for the most basic looking template ever - I like white space so that my pictures do not conflict with the background. I use a template called "Ethereal".

Template Designer

The Template Designer gives you so much control over your blog layout, and is such a breeze to use. Go to Design, Template Designer - you've more than likely explored the standard templates offerrings here.


Background image

If you can't find something you like then I suggest you change the Background for your template first (if you want a background image, that is). There are a few to choose from, or you can even upload your own.

Your image has to be 1800x1600 pixels (if you don't have an image editor you could use MSPaint, or iPhoto). I would also unselect "Scroll with page", so the background image stays in one place.

Width adjustments

You may have noticed that this blog you are reading/viewing has very wide margins. Here are the adjustments I made to achieve this:

It gives me lots of space to display photos 800 pixels wide so I don't have to squint when viewing my posts.

Layouts

If you want to customise your layout (how many columns and rows, which side your navigation appears, how your footer looks, etc) then here is here you go to do it. Experiment, and preview to see what it looks like.

What's highlighted in the above picture is the layout I've used for this blog.

Colours and fonts

For colours and the font size, you can change every element in the Advanced section:

Note with using fonts: There are some many fonts which may or may not be supported by various browsers, so I tend to go for the core standard fonts that I know for sure will display the same way in almost all browsers. Examples are Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings. You can use other web fonts, but I suggest you test them by viewing in some main browsers i.e. Mozilla Firefox, Safari, Google Chrome, Internet Explorer.

LinkWithin

Related Posts Plugin for WordPress, Blogger...