Search
RSS & Email Feeds - The Easy Way To Keep Up To Date With The Blog

 

Tech Podcast Network
« SCL Podcast 14 - Constable | Main | A Guest Post By Victor W69 About Metering »
Thursday
Sep252008

How To Change The Colours And Customise Your Blogger / Blogspot Blog

In a previous article we looked at how to create a free Blogger / Blogspot Photo Blog, but its a bit bland, so in this tutorial I'll show you how to change the colours, add a links bar, and a tag / labels list.





Default Theme On Left, Changed On Right.



Changing the Blog Themes Colours. When we created our Free Blogger / Blogspot Photo Blog, we used the Minima Stretch Theme - great for featuring Flickr Photos, but the white colour scheme is it a bit bland, so lets look at making something more dramatic.

First you need to go to your Blogger Home Page, sign in (or it may remember you), and click the layout link:



Now Click the "Fonts and Colour" link in the Layout Tab:



This next screen looks a bit complicated, but trust me, it's incredibly easy to use:


We can see preview of how our Blog will look at the bottom, and our colour options at the top. Start by clicking the "Shuffle blog colours" link a couple of times. Wow! If we like what we see, we can just hit the "save changes" button and we're done! If not, click the "Revert To Template Default" link, and our Blog will return to white. If you ever make any colour changes to the Blog, but then aren't happy and want to start again from scratch, just come back to this page and hit that link, and start again.

We 're going to specify what colours we want applied to the different parts of our blog - the background, text, links, titles, etc, and a good starting point is to have black for the background, white for the text and title text, and light grey for the links.

Start by selecting the "Page Background Colour" element on the left, then click a square with black in the middle. It's done! Have a look at the preview at the bottom of the screen. Cool!

Now slowly work your way down - remember, we want white text and light-grey links. If you feel really adventurous try changing the font. Isn't this easy?

Once your happy, click the "save changes" button and you're done. Click on the "view blog" link to check your handy-work. If you ever want to change anything, just return to the "Layout" tab, and click the "Fonts and colour" link, and you can start playing again, anytime.

Adding A Photo Links list and a "tags / labels" list. If you look on the right hand-side of this page, you'll see a whole list of great photography sites - its a great resource for everybody, and every Blog should have one, sometimes it's called a "Blog Roll". Lets add one to our Blogger / Blogspot Blog.

First, click on the "Page Elements" link in the "Layout" tab:



We're going to add our Photography links on the right hand side of our Blog, so click the "Add A Gadget" link on the right:



A new Window should open, and you just want to make sure you're in the "basics" tab, then scroll down and click on "Link List":



Another Window will open, and this is where we can start adding sites - don't panic, we don't have to add them all now, we can always come back, click the "edit" link next to our gadget and add more. For the time being, I'm going to add robnunnphoto.com to my link list:


First put the "Title" in. This is the tile for the list of links, so it'll stay the same once we've entered it.

Next click the "sorting" drop down box and change it to "alphabetical".

Now enter the URL (web address) of the site you want to link to. The easiest way to do this is to use your browser to navigate to the site and copy the URL from the address bar, then paste it in here.

Now write the "Site Name" in. This could be the URL of the site without the http://www. bit, or the real name if it has one..

Now click "add link". You'll notice that the new link appears - you can change it by clicking "edit". If you're done for now, click "save", if not, add some more links. When you're done click "save".

We should now have returned to the "Page Elements" screen, and you'll notice that our Photography Links Gadget has appeared:



Click "save", then "view blog" to have a look. This is too easy! Don't worry about where it is on the right - I'll show you how to move it up or down in a bit.

We're now going to add a "labels" list, so the visitors to our site can navigate to related articles we've written.

As before click on the "Add a Gadget" link on the right, and a new window should open.

Again, make sure you're in the "basics" tab and scroll around until you find the "labels" gadget, and click on it:



This dialogue box should appear:


If you want you could change the "Title" to something like "Categories" or "Subjects", I'm sticking with "labels" for now, and using the "Alphabetical" sorting option.

Click "Save", and we're done.

We probably don't want the "Photography Links" list at the top of the things on the right hand side of the screen, so to move it (or any of the gadgets) just click and hold in the darker box, then drag the gadget to where you want it in the stack:



Click "save" then "view Blog" to see what we've done.

You may be happy to stop here, or play around adding other gadgets to the side and bottom bar. Try and keep things simple and not too cluttered - it's very easy to go over the top - but I hope I've encouraged you to realise that editing the theme of your blog, and adding extras is incredibly quick and easy.

Whats next? Write more posts!

Cheers, Rob.

Reader Comments (2)

I don't think this works on the new blogger.
When clicking on the Fonts and Colours link I just get a preview of my site in the lower half of the screen and 2 buttons at the top - Save and Clear Edits. I can't actually do anything though to change the fonts and colours and there is definitely not a long list of options as u have above.
hope you can help though with this...
Thanks!

September 23, 2009 | Unregistered CommenterRC

Hi Rc,

I've just logged into my Blogger account, and when I click on the "Layout" tab, then "Fonts and Colors" I still get the options as seen in the above article.

It could be that Blogger was having a hiccup at the time you tried, or perhaps your template isn't customizable via the dashboard, and you've got to delve into the html / css to make changes. Either way, I'd say try again and see what happens.

After trying again via the dashboard settings, and you still can't see the options to change things, contact your template designer, http://www.wpthemedesigner.com/ or the people who converted the theme to Blogger, http://www.bloggertricks.com/.

Cheers, and tell me how you got on, Rob.

September 26, 2009 | Unregistered CommenterRob_Nunn

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
All HTML will be escaped. Hyperlinks will be created for URLs automatically.