Sunday, 17 November 2013

How I Re-Designed My Blogs (A Sort-Of Tutorial)

When I decided I wanted to have a personal website, I was simultaneously struck by the urge to upgrade my existing two blogs. But because both blogs are being updated pretty regularly, I didn't want to take them down and install a whole new blogskin. Instead, I changed my blogs bit by bit.

So if you're looking to read about how to upgrade your blogger blog, this post is for you! Now, this is more of a resource page than a tutorial. I'll be introducing the tutorials that I used and the level of difficulty/time taken. I'll also be adding a list of sites that I find very helpful at the bottom.

So, here are the before and after pictures of my two blogs.

Inside the mind of a Bibliophile:
Before
After Part 1
After Part 2
Main Changes: New Header, New Background, Change in Post Title Font, Centred Page Tabs and Changed Page Tabs background colour.

With Love from Japan, Eustacia:
Before
After Part 1

After Part 2
Changes: Pretty much the same as Inside the mind of a Bibliophile, but I also switched the commenting system to Google+ comments.

How To's:

How to make a New Header: This was quite possibly the easiest part of your blog to change. It took me less than five minutes to do each header. The tutorial can be found here.

How to install a New Background: This was a lot of trouble. I realised that many backgrounds require the Minima template, which Blogger no longer provides. But after much searching, I found this awesome tutorial on how to customise the Picture Window template so you can install your Blog Background without problems. It was the longest of all tutorials to do, but it's worth it. Once your Picture Template is ready, this post will teach you how to install a background you like. That tutorial is really easy and quick to do.

If your page isn't open to the maximum size, you might not be able to see the borders of your background. Make sure your window is at full screen if you're looking to see if your background was successfully installed.

How to change the Post Title Font: This was a little bit complicated, especially when it came to finding the code, but the tutorial is clear and easy. You can find the directions here.

How to centre Page Tabs: All my blog have page tabs that are two lines long, and I thought that it would look way better if they were centred. I like this tutorial because it's clear and you can copy and paste the needed CCS code.

How to change Page Tabs background colour: For some reason, my page tabs had a grey background colour and I had no idea how to get rid of it. But, if you apply the CCS shown in this tutorial, you can customise the colour (background and font colour) easily.

Now, for this website, I wanted to make a static home page like this:

This is the home page. Note that it's at the "Welcome" tab
This is where my blog posts appear. It's at the "Learning, Doing,
Reflecting" tab. 
This was, in the end, the reason why I didn't use a blog template. Instead, I followed this tutorial from Southern Speakers to create a static homepage. I did get stuck on the redirect step because  when I tried to do the page redirect, I got a comment that said "The source and destination values cannot be empty or more than 256 characters and must start with /". It turns out that typing "www.eustaciatan.blogspot.com" in the From field and "www.eustaciatan.blogspot.com/p/welcome.html" in the To field is wrong. Instead, I should have inserted a forward slash / in the From field and inserted "/p/welcome.html" in the To field.

Next, I wanted to hide all the gadgets on my welcome page. This tutorial from Souther Speakers did the trick.

If you're looking to change your blogs, I hope that this post was helpful in that it showed you which tutorials to follow. I've never actually thought much about how blogger worked before I tried all this, so this is really a whole new world to me.

Am I satisfied with my blogs? For now I am. But I'll probably have the urge to tweak it around, so if I do, I'll post an update and show you where I found the tutorials to do so.

Recommended Sites: 

Plumrose Lane: This site is the one that taught me about setting up Picture Template, for which I am ever grateful. There are also lots of tutorials and really cute blog backgrounds! (And post dividers, which I'm considering adding)

Southern Speakers: For anything to do with customising your blog, this is the place to go. There are tons of tutorials and if you have a question, just comment! Yoga (the blogger behind the site) is really helpful and he'll answer your questions.

The Cutest Blog On The Block. There are tutorials and backgrounds here! They also have free templates if you're looking for something more than just a background.