Blog

Pimp your blog - Make your blog look less bloggy and more like an actual website

Before and After
This tutorial is to show you how to change your blog from something ordinary or boring, to something that looks less like a blog and more like an actual website (or to just become a better looking blog).


Note: Although the techniques for this tutorial apply to any blog, some of the techniques are specific for blogger.

Step 1 - Make a Blog Background

There are a lot of great existing blog backgrounds out there.  Perhaps you don't need a new one, but if you would like to have a more specific feel for your website, you should create your own.

This is not too difficult to do; see my previous post for using Inkscape to make a background if you would like some ideas.


Once you have your desired background, go to Design>Template Designer>Background>Background Image    You will now be able to upload your background image.  If your image is an actual image and not a gradient, you may want to select center for your alignment, and also choose "Don't Tile."

Step 2 - Change your Blogger domain and name

If you are anything like me, then you probably signed up for a blog not really knowing what to use it for.  When you actually started blogging, you realized that the name you chose does not really fit your blog. Fortunately, you can change your blog name fairly easily.  Unfortunately, this breaks all your existing links or links to your website.

Visit my previous post to find out how to make it so you can keep all your stats and links.

Step 3 - Create a nice looking title

It is nice to be able to customize the size and color of your title, but really it would be better to have a nice logo.

I talked about how to make a nice blog logo using Inkscape.  You can use other programs (such as the Gimp) to do it as well.

First logo I made for my blog

Once you have your desired logo, go to Design>Page Elements>Header(edit)  You will now be able to upload your logo.  You will want to select your logo in place of title and description.

Step 4 - Change your Blogger favicon

The favicon is the little icon just to the left on your URL bar.  It is also sometimes seen if you have more than one tab open.  Creating an icon and uploading it is not very difficult, but most people have never even realized that it is possible.

Here are the step by step instructions for changing your favicon.

Step 5 - The Little Things

There are other things you can do to make your blog look a bit nicer.
  • Change the font sizes and colors (Design>Template Designer>Advanced)
  • Change the font.  If you want a unique font that is not one of the default font, go to http://kernest.com/ for some free fonts that can be used on your blog.  Instructions for doing it are posted with the individual fonts (if you choose from Open Source fonts).
  • Add gadgets.  To do this go to Design>Page Elements, then click on "Add Gadget" on the main screen.  There are many gadgets that can make your blog more useful such as a Google search bar, popular posts etc.
  • Move gadgets to a better location.  This can be tricky and uses some CSS code.  To do this, go to Design>Template Designer>Advanced>Add CSS.   This will allow you to change fonts, font size, gadget location and just about anything you may want to do.  See below for an example of css code I added to move my Google search bar:
div#CustomSearch1
{
position: absolute;
top: -15em;
}

The tricky part for doing the above is just finding out what the CSS element is.  I suggest downloading the Web Design toolbar for Firefox and viewing the CSS elements to find out what you want to tweak.

Here is the before and after from my blog:



Before



After
Hopefully the after looks better to you!

Some additional tips:
  • Keep it simple.  The more things you add, the more confusing your site will get.
  • Be original. Anything from the default blogger templates is not very original.  
  • View on multiple browsers.  Browsers are getting more standard, but it is still a good idea to use Internet Explorer, Firefox, and Chrome to view your blog.

About McKay

1 comments:

  1. Thanks Makay your information is amazing and I am loving the simplicity of how your layout is looking, I definitely feel mines is to bloggy after looking at yours

    ReplyDelete

Powered by Blogger.