How to Create a Simple Customised Blog Design (Part One- Template Designer)

Tuesday, November 19, 2013

Example of the finished template- yours will be customised with fonts/ colours/ background of your choice
I get quite a few newer bloggers emailing me in response to my 'blogging tips' posts I've written, a lot of the time it's questions about how they can make their blog look a certain way. I decided to write up this guide for very new bloggers, it's by no means difficult to do but will give you step by step instructions for creating a clean looking layout that you can customise to your own tastes along the way. This guide will be in three parts: this is part one which will walk you through Blogger template designer, part two will show you how to create a matching custom header and sidebar titles and part three will be tidying up all of the loose ends (including showing you how to centre your page tabs and tidy up your sidebar). If you have any questions feel free to leave them in the comments and I'll do my best to reply to them all.

Preparation
Before designing your template you'll need to add your blog's navigation links so that you can access them in the template designer- these are the links that appear underneath your header. You do this by going into 'pages' from the drop down bar of your blogger template, and create two pages one titled 'About Me' and the other 'Contact.' You can come back and add more later but those two are fine for now, you don't need to fill them in right now just give them titles and make sure you click publish when you're done. Once you've done that, go to 'layout' from your blogger dashboard and add the 'pages' widget underneath your header.


To be able to follow this guide properly you'll also need to have a post up on your blog, this is so you can see what the colour of your fonts, links and things will look like when you're in Blogger's template designer. For the purpose of this guide I created a page just saying 'testing' and adding a few links to the bottom so you could do this too if you're not ready to publish a post yet. 
Now you're ready to get started on your design!

Step 1: Choose Your Template
Start by going to 'template' from the drop down bar on your blogger dashboard or in the left hand set of links in blogger. Click the orange 'customise' button under templates choose 'Simple' which should be the first thing you see when you open the template designer. You get a number of default colour options under the Simple template, stick with the first one as I'll be showing you how to make your own colour adjustments.

Step 2: Choose Your Background
The background is one of the best places to start, as you can then fit the colours of your links, headers, footers etc to exactly match the colours in your background. While you can add your own seamless background image to your blog it can be tricky finding one that isn't watermarked and that displays correctly, in this guide I'll be using a plain background but you can always change this later down the line. To choose a plain background colour go to 'advanced' along the left hand side and click the drop down bar next to 'Outer Background' to give you the full spectrum of colours. You can choose a pre-set colour square or use the slider to get any colour shade you want. Obviously this is personal choice here, but I think a softer and more muted colour looks best- it doesn't detract from your content or blind you with a bright colour when you click on the page. However, in order to set links and things in the same colour don't make it too light or your links wont show up. You can see here I've gone with a light/mid purple shade but go with a colour you like. Once you're happy with your colour choice, you'll want to make a note of the number that appears in the box under 'Outer Background.' This is known as a hexadecimal code, and is basically just a way of telling the computer of an exact colour. You can use this same colour throughout the rest of your blog to make it look more streamlined.

Step Three: Adjust Widths
Blogger's standard template designer automatically gives you a very wide right column and a narrow text area, there's no need for your right column to be so wide. Go to 'adjust widths' and on the 'entire blog' slider set this to around 1000px and the 'right sidebar' slider to around 270px. We'll be changing around the gadgets in the sidebar at the end, so don't worry if it looks a bit weird for the time being.

Step Four: Date Header
Go back into 'advanced' on the left hand side and scroll down to 'date header.' You'll want to set your date background the same colour as your blog background which will start to tie everything together. If you made a note of the hexadecimal code, copy it into the 'Background Colour' box (don't forget the #), or simply copy and paste it from the 'Outer Background' box. If you chose a background colour that was too light then your date wont show up, go back into background and make it slightly darker. Then use this new darker colour as your date header background.

Step Five: Links and Post Title Colour

Still in the 'advanced' menu, click on 'links.' Here you'll want to choose a secondary colour, one that looks good with your background. This will set the colour of your blog post title as well as your gadget links, and any links you include within your blog's text. I've gone with a different purply shade here, make sure it's dark enough that you can clearly read your post title but not so dark that links don't show within your main body text. Again note down the hexadecimal colour number as this will come in useful when you come to design your header and images for your sidebar.

Step Six: Tabs
These are your links/ navigation under your header (they link to the pages you created earlier in the 'preparation' step). In order to remove the boxy lines from the outside go to 'Accents' in the advanced menu and change 'Tabs Border Colour' to white or transparent. Then under 'Tabs Background' set 'Selected Colour' again to white or transparent.' Later we will come back and add some coding to the template so that these links sit central under the header.

Step Seven: Font Size and Styles
For your main body text font- a word of advice here keep it simple! As tempting as those fancy fonts can be you WILL give your readers a headache and put off a lot of potential blog readers. A standard font like Arial, Georgia, Times New Roman, Cambria etc is easy to read. If you've chosen a smaller sized font you may need to adjust the size- you'll want to pick a size that's comfortable for most people to read, a font that's too small may well put people off reading your content. You can go with whatever you like for your post title though, in the example above I've chosen 'IM Fell DW Pica.' I've set the tabs to the same font and used the secondary colour for them, which again helps to tie everything together. 

Here you have the very beginning of your basic blog design. Part two will be a step by step guide of how to create a customised header (using all free software online that requires no installation) using the colours you have chosen for your blog. I'll also be showing you how to make customised sidebar titles as well as a customised picture/ introduction for your sidebar.

You can continue following this guide over on part two HERE
Follow on Bloglovin

You Might Also Like

3 comments

  1. can u teach us how to create a blog design from scratch in html?

    ReplyDelete
    Replies
    1. I wouldn't have a clue how to create a template from scratch, everything I know has just been self taught from customising blogger templates. Really sorry!

      Delete
  2. Hi Stacey, I have been following your guides closely but I'm not able to set my pages as top tabs. I couldn't find the option. My pages list appears just the same like posts list. Do you have any idea on how I can correct this? My pages does not appear centralized like in your guide. It appears on the left hand side of the blog.

    ReplyDelete

Subscribe