Create a Clickable Logo and Banner for Your Blog

I just finished tweaking my new logo and top banner and I’m very pleased with the results. When I finished it occurred to me that many of you probably don’t know how to do this for your own blog. So I created this tutorial to show how you too can give your blog greater visual impact and reader stickiness.

There is nothing like an attractive logo and/or banner to give your blog that professional look. Granted, some of you may not care about looking all that professional, BUT a nice looking banner (some call it a header) will go a long way to making your blog more appealing to your readers… and that is a good thing.

Why a Logo and Banner?

After all the top banner is the first thing that your readers will notice. New readers will only give your blog a quick glance (not more than a few seconds) before making an opinion and deciding whether or not they want to stick around a little longer. Hence the term adding “stickiness” to your blog.

Before new readers start reading your content, it is the visual impact of your blog that they will first notice. So you want your blog to appeal to the reader’s senses and make that first impression a positive one.

A “picture is worth a thousand words” they say, and with the right banner and logo you can immediate convey to your readers if your blog is:

1. Professional
2. Just for fun, and/or
3. What your niche is

All with just the use of graphics. It also speaks to how much effort and care you put into your blog.You want your blog to stand out from the crowd, and there is no better way to do that than creating your own banner and logo. It is your first line of defence for capturing the interest of viewers and keeping them around long enough to turn them into readers of your great content. (Uhm… your content is great by the way — right :).

How to Do It: For the purposes of this tutorial I am not going to teach you how to create images. That is another matter and there are literally hundreds of great tutorials out there that will show you how to do that.

I use Photoshop Elements software to create my images. With a few plugins it is just as powerful as the full-blown Photoshop, and without the steep learning curve either. Out of all the free software out there GIMP is probably your best choice.

Ok, now assuming that you already have your graphics ready, I will now show you how to code it into your template. Of course I can’t possibly write a tutorial for all of the blog platforms out there, so this post will show how to code it into your New Blogger blog.

So let’s get on with it shall we. First off, before making any changes save a copy of your template onto your hard drive. You will also have to decide if you want to use a background colour or graphic for your banner. In my case I’m using a graphic.

Go into your template and click on “Edit Html” and then put a check-mark in the box “Expand Widget Templates“. Search in your CSS styles for code that should look something like this:

The Code:

/* Blog Header———————————————– */
#header-wrapper {

This is where you will point your template to where your background image will be. Depending on where your image is being hosted on the web, the code will look something like this:

/* Blog Header———————————————– */
#header-wrapper {
background:$titleBgColor url(http://yourimagehost.com/yourbackgroundimage.jpg) no-repeat left top;

Ok, now you can stop right here and go no further if you don’t care to put a logo in your banner. Maybe you think your banner is good enough as far as you’re concerned. That’s ok, but if you really want your blog to have that professional touch with you’re own personal logo then continue reading.

After previewing the changes that you just made, and assuming all looks well, save your template and go into your “Settings” menu and near the top you will find a box called “Description“. It is here where we will put our banner code that will point to where our images reside on the web as well as formatting it to fit exactly where we want it to be.

This is what my code looks like:

< a href=”http://www.blogbloke.com/” title=”InstaBloke Home” >< img align=”left” width=”105″ src=”http://members.shaw.ca/advocare/images/bblistenlogo90.gif” alt=”Blog Bloke” height=”90″> < img border=”0″ vspace=”5″ width=”326″ src=”http://members.shaw.ca/advocare/images/bb-logo.gif” hspace=”10″ alt=”Blog Bloke’s Home Page” height=”57″>< /a>
Blog Tips Tools and News by Blog Bloke, the Original Blog Resource

Yes I know, to the untrained eye it looks like a bunch of gibberish (and believe me some days when the migraine is banging it can look like that to me too :). But don’t worry, I’m going to decode it for you so you can modify it for your own needs.

The first line:

< a href=”http://www.blogbloke.com/” title=”InstaBloke Home” >

Makes your image clickable. It is here where you will change the title and the url address to your own home page.

The next line:

< img align=”left” width=”105″ src=”http://members.shaw.ca/advocare/images/bblistenlogo90.gif” alt=”Blog Bloke” height=”90″>

Refers to my first logo. Take a look at the top left “bb” image on my top banner to see what I mean.

The “height” and “width” refers obviously to the dimensions of my image. You don’t have to put that in there, but it is always a good idea because if you don’t your browser will have to figure it out and will slow down the loading of your page. Images (besides scripts) are the biggest offenders for slowing down page loading and so I recommend that you put in the size of your image like I’ve shown.

The align=” “ of course is the alignment of the image, and there are several choices you can put in there depending on your needs. Don’t forget to change the url address in the src=” “ part to point to where your image resides on the web, and the alt=” “ part is where you will put the description of your image.

Now take a look at the rest of the code:

< img border=”0″ vspace=”5″ width=”326″ src=”http://members.shaw.ca/advocare/images/bb-logo.gif” hspace=”10″ alt=”Blog Bloke’s Home Page” height=”57″>

This portion of the code points to the second logo “blogbloke” and formats it to fit nicely with the other “bb” logo that I just mentioned above. This is what it all means.

The code hspace=” “ part is for the horizontal positioning of the image. The vspace=” “ part represents vertical. You will have to play with these settings for your own particular needs.

The src=” “ part is where you will put the address of where your image resides on the net. You will have to check with your web image host to find out the exact address.

Lastly, why not make a nice tag line that in a short sentence will describe what your blog is all about.

Blog Tips Tools and News by Blog Bloke, the Original Blog Resource

And that’s it. Enjoy!

(P.s.: In the code examples above I have opened the brackets to make it readable as text, so you will have to close-up the brackets in order to make it work.)