<   Prior Home         Share Blog Bloke     Share Blog Bloke Tips       Share to Twitter       Share to Facebook       Share to Twitter       Share to Google Plus       Share to LinkedIn       Pin this       Get Updates            
        Next   >  

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.)

Written October 4th, 2007 by | 194 Comments | Filed under: Blogging Tips, Design Tips, Tutorials , , , , , , ,

Thanks for Sharing     Share - enable java in your browser Share to Twitter            

Did you enjoy this article? Keep up to date with Blog Bloke Tips the moment it's published by email. Your Privacy is Guaranteed and will not be shared with anyone.

Keep it real with Blog Bloke Thanks for reading the original Blog Bloke. You can read more about me here. Contact me if you have any questions, tip requests or if you would like to be a guest blogger. Keep it real every day and subscribe to the newsfeed, share with friends or follow me.

    Subscribe to the Newsfeed     Share to Twitter     Share to Facebook     Share to Google Plus     Pin this     Share to LinkedIn

Got an opinion? Let's be real and start a conversation:

It's your turn to tell Blog Bloke what you think, ask a question or suggest another blog tip. Don't forget the comments policy and I'm looking forward to reading what you have to say.

194 Responses to “Create a Clickable Logo and Banner for Your Blog”

Pages: [1] 2 3 4 5 6 7 8 9 10 1120 » Show All

  1. 1
    TICA MACHA Says:

    Oh my gosh Bloke, that’s some work! I feel like you wrote it just for me. I “bookmarked” it on del.icio.us to save it. One day I’ll get sick of my old blog look and try…

  2. 2
    Blog Bloke Says:

    I whipped this up this morning and hope it helps. Let me know if there is anything you don’t understand.


  3. 3
    TICA MACHA Says:

    I woke up to no water this morning. I don’t understand, we didn’t have much rain last night. I also have a huge water tank on my house but I think all the water oozed out. I have to install the stop valve I bought.
    I enjoy your blog so much but I hope you understand that I am not adventurous enough (to date) to go messing with my blog layout. I don’t have enough memory on my computer to do that back-up you mention. I did it once months ago and it took forever to save!
    Is there another way to save my blog?
    Right now, water is my biggest problem.

  4. 4
    Blog Bloke Says:

    Sorry to hear about your water problems. I hope you can get things resolved soon.

    Unfortunately I can’t help you with that, but regarding the downloading part try a clean boot. (That means with as little things loaded up in memory.)

  5. 5
    Dan Murdoch Says:

    Hi bloke,
    Thanks for the tutorial, what do think of the result?


  6. 6
    Blog Bloke Says:

    What a difference a banner can make. Looks excellent from here Dan and very appropriate for your blog topic.

  7. 7
    Why Should I Bother? Says:

    […] a tutorial like yesterday’s takes a tremendous amount of work and effort. In fact, the day after I usually suffer with a […]

  8. 8
    Mushfiqur Rahman Says:

    Hi Bloke,

    Now that you have moced to wordpress, do you think you could write a follow-up to your post “Create a Clickable Logo and Banner for Your Blog”. Many wordpress bloggers, including me, would find it pretty helpful if you could show us how to make our header clickable.

    Mushfiqur Rahman

  9. 9
    Blog Bloke Says:

    Great idea Mushfiqur. It’s on my to-do list.

  10. 10
    SengHooi.com » Blog Archive » 10 Design Tips That Will Take Your Blog to the Next Level Says:

    […] You can read more about it here if you like: Create a Clickable Logo and Banner for Your Blog […]

Pages: [1] 2 3 4 5 6 7 8 9 10 1120 » Show All

Leave a Reply