Monday, 26 May 2014

Blogger Layout Guide

Whilst my nails are nubbins, I thought I would write a couple of technical layout / blogger related posts.  This is the first one....

Sometime ago I had a black background and have been through a number of banner pictures (will come onto banners in a further post!) I also noticed that my page seemed very slow loading, so I decided to wipe the slate clean and go with a fairly simple layout.  If you're an experienced Blogger user this is probably telling you how to suck eggs, but if you are a newer blogger or looking to redesign your blog layout, this is how I did mine...
I am by no means an expert, there are plenty of tutorials out there which may be more technical and lead to more fancy looking page layouts, but I am quite pleased with how my blog looks nowadays.  I also helped my stepdaughter set up her blogger page, we went from nothing to ready to go (including banner) in an hour!

Before you start messing with your blog layout, I recommend saving a copy of the template you currently have so you can restore the page to how it is now in case things go horribly wrong.

To do this select Template shown second from bottom, with a picture of a paint roller.

Now in the template page on the top right there is a button marked Backup / Restore, click on this.

The pop up below appears, click on download full template.  I use Chrome, so by default the file saves to Downloads, I recommend moving it from Downloads to a folder used for Blogger template info so you know where to find it when you need it.

Current template saved?  Excellent... time to play... Now we can click into "Customize" and amend the way the page looks!

In the Blogger Template Designer there are several options shown on the left Templates, Background, Adjust Width, Layout and Advanced.  Each time you click into one of these you either see your choices to pick from straight away (as below) or get a new list of options to click into.

I used a simple template on my blog then tweaked the colours and fonts and borders until it looked nothing like a simple blog layout!  From the picture above I used the Adjust Widths (third from top) to set my page widths - for me this is entire blog 1260px, sidebar 260 px.  You can play with these numbers and the way it will look can be seen in the preview pane on lower part of the screen.  I like this balance, some people prefer a wider toolbar.  One thing I was aware of when choosing the widths is that I was looking at the screen on a 14" laptop display, I didn't want to have to scroll left and right on this display so I made sure it was no wider than the screen.

Layout (second from bottom) will allow you to choose how you want the page to be  laid out (this can also be accessed from the first menu shown above, so you don't need to be in template in order to change page layout) where you want the sidebar, how the footer will appear.  I have kept my page simple, one side bar on the right so the main focus remains to the left where the post it and one header and footer.  The sidebar I have tried to keep very simple and uncluttered, just my British Blogger sign, the follow options, search box, post history and most popular posts (set to top 3 in last 30 days.) I worked to a rule that I didn't want the sidebar longer than my regular posts!

Most of my tweaking is done through "Advanced."  I recommend having notepad or some kind of typeable document open on PC at the same time as you are making any changes, you can take the font details / size / colour and note them down to keep reusing them,  it to it keeps the info readily on hand for when you are further down the template or you can save it for use at a later time to keep the same general colour scheme to your page, I'd also note widths on there so you have that info to refer to when making page banners.  

Each time you select a colour, you get the square block (shown below) with the various hues to choose from.  Once you have picked a colour you are happy with, you will see a number with a hash sign next to it in the box under Text Colour (see the image below, it has #00383a) copy the number to notepad.  Blogger will allow you to paste the colour code number (eg #00383a) straight into the text colour box, this is why I recommend noting your choices down so you can repeat them as you go down.


Going through each of the options and what you can do, I also have put my choices in red after each one so reading these and viewing my page you get an idea of how it looks.

Page text - allows you to chose the colour, font and character size of the writing in the main page
Arial 16px #00383a
Background - allows you to pick a colour for outer background, main page back ground and header background
#ffffff on both and transparent header
Links - the colour of a link, visited link and hover over colours.
link #009ba1 visited #000000 hover #7f7f7f
Blog Title - not really used as I have a banner.
Blog Description - allows you to choose the colour for the text at the top of the page "My name is Emma..."  
Tabs Text - allows selection for font, size, normal colour and selected colour
Arial 18px text #009ba1 selected #000000
Tabs Background - the colour of the background for the tabs at the top of the page 
Post title - allows you to choose the font and size for the name of blog post when viewed from home page. 
Arial 22px
Date header - allows selection of text and background colours
#00383a back ground transparent
Post footer - allows selection of text colour, background colour and shadow colour for footer.
#00383a background #eeeeee shadow #eeeeee
Gadgets - the way font looks for date and sidebar columns, allows selection of font, size, colour and alternative colour.
Arial, 20px, italic, #00383a  #7f7f7f
Images - Pick background colour, border colour and caption text colour for images.
#ffffff  #666666 #00383a
Accents - Separator colour and tabs border colour, the colour of the frames around the edge of the blog.
Both #00383a

As you will see just by seeing the above there are repeated uses of colours #00383a and #009ba1, these are the turquoise colour I use as my main colour and the darker green I have the body of texts and page in as it's easier on the eye to read.  I like that Blogger allows you full control of colours. Personally I prefer to keep it simple and have two main colours from the same colour family.

Once you have done making any amendments, scroll down the page and check the way the blog looks in the preview pane.  Are you happy with it?  If so, you need to be sure to save it, click "Apply to Blog" shown in orange on the top right.

I would also at this point click "View blog" to be doubly sure I am happy.  If so I will go "Back to Blogger" and then follow the earlier steps to save a back up of the new and improved Template.

Feel free to leave any questions below...  Remember I'm no expert though!  The next post coming up is about Banner images and how I make them.


  1. Amazing post, must have taken hours, thank you!

    1. Not as long as the next post, that took about 3hrs to write with all the screen shots!


Comments are welcome, I have approval on so I do read and appreciate all comments left.