Create a Clickable Logo and Banner for Your Blog
Buzz it
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/” mce_href=”http://www.blogbloke.com/” title=”InstaBloke Home” >< img align=”left” width=”105″ src=”http://members.shaw.ca/advocare/images/bblistenlogo90.gif” mce_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” mce_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/” mce_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” mce_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” mce_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.)
Filed under: Blog Design Tips, Blog Tutorials, Blogger
What Next? Read More Tips From BLOGBloke:
Subscribe here to the Better Tips Newsfeed! 
Follow @BLOGBloke on Twitter for Social Media Tips & News!
Opinions? (click here to jump to the comments form)
Video
.gif){kind=small}
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…
[
Reply..]
I whipped this up this morning and hope it helps. Let me know if there is anything you don’t understand.
…BB
[
Reply..]
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.
[
Reply..]
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.)
[
Reply..]
Hi bloke,
Thanks for the tutorial, what do think of the result?
danmurdoch.blogspot.com
Dan
[
Reply..]
What a difference a banner can make. Looks excellent from here Dan and very appropriate for your blog topic.
[
Reply..]
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.
Cheers!
Mushfiqur Rahman
[
Reply..]
Great idea Mushfiqur. It’s on my to-do list.
[
Reply..]
Bookmarked ! Damn interesting how did you explain. I use a free image hosting, http://www.cerzo.com for host my blog images, my logo and my banners.. but I didn’t know how to make my logo clickable
[
Reply..]
Whatever other guys would comment on this particular blog I don’t mind as I am quite pleased with this study on banner and logo. These are must for promotional blog which gives the cutting edge look.
[
Reply..]
THANK ALOT FOR THE TUTORIAL, IT IS OF GREAT BENEFIT TO US THAT HAVE NOT GOTTEN MUCH ON HOW TO BUILD SITE. PLS I WILL NEED YOUR ASSISTANCE SHOULD THERE BE NEED IN THE PROCESS. ANDY
[
Reply..]
[…] a tutorial like yesterday’s takes a tremendous amount of work and effort. In fact, the day after I usually suffer with a […]
[…] You can read more about it here if you like: Create a Clickable Logo and Banner for Your Blog […]
[…] You can read more about it here if you like: Create a Clickable Logo and Banner for Your Blog […]
[…] […]
[…] You can read more about it here if you like: Create a Clickable Logo and Banner for Your Blog […]
Thanks Dev! http://bit.ly/2pkIJb
awesome site brotha http://bit.ly/1pXPfp
awesome site brotha http://bit.ly/1jshln
@Gaia Herbs, some look like downtown Las Vegas in the evening. http://bit.ly/2ub7iQ
@Gaia Herbs, some look like downtown Las Vegas in the evening. http://bit.ly/2ub7iQ
@CFI, @hospitalera … my head was spinning when I wrote it
http://bit.ly/1CQix9
RT @BLOGBloke: 10 Reasons Why I Don’t Like Your Blog http://bit.ly/2TRLSx
10 Reasons Why I Don’t Like Your Blog http://bit.ly/2TRLSx
@Humayon, if you are just a blogspot user then you don't need to bother with dns settings. But I still recommend ge… http://bit.ly/1fDYre
@hari saryono, I wrote an article about why we should not play into terrorists hands by linking to these horrific v… http://bit.ly/2aTKBw
@InternetMarketingMentor, here's another analogy for you. Your blog is your permanent home and social networks are … http://bit.ly/4hZtE
Optimize Your Blog - Making Your Blog Search Engine Friendly http://bit.ly/4A9Go5
@Mike, glad you liked it. If you're serious about blogging then Wordpress is the way to go. http://bit.ly/33GQUp
via @BLOGBloke: Hi There! Thanks for following. Why not ask me a question or for more blog tips visit http://tinyurl.com/5zjajb. Cheers!
@Michelle, you do not need a subdomain for it to work. A subdomain is also a bad idea for SEO. You need to go over … http://bit.ly/5Z3vbE
@Justin Gill .. thanks for saying so Justin. It always feels great to hear from another happy customer.
Cheers! http://bit.ly/5Z3vbE
blog hating at http://www.blogbloke.com/10-reasons-why-i-dont-like-your-blog was just pinged to 91 Services!
@Kay, I never thought of it that way http://bit.ly/1CQix9
@humglum http://www.blogbloke.com/moving-wordpress-blogger/ basically… no. doesnt look like it'll happen.
@BLOGBloke,
I decided to get rid of the Blogger redirect as the redirect via modification to .htaccess works, t… http://bit.ly/5Z3vbE
@Michelle, redirect speeds will depend on the blog host's servers and your internet connection. You only need to pa… http://bit.ly/5Z3vbE
@drugi, you mean "you can please some of the people all of the time and all of the people some of the time, but you… http://bit.ly/4CvJh7
Finding Your Blog Voice http://bit.ly/5LD5kQ
@zarazek, don't get your domains through Wordpress. Use GoDaddy or something similar. http://bit.ly/1fDYre
Saw an advertisement for Moving Blogger to Wordpress Service. Why not save your money and read my free guide? http://bit.ly/6rFYFE They do
hmm.. informative )) http://bit.ly/6krJX6
I should notify my girlfriend about your post. http://bit.ly/6iqFfC
hello everybody, how are you all doing.i am liking this web sight i might start staying on it more. me i stay sick … http://bit.ly/6krJX6
@Cdathy Tibbles, I host images on my wordpress.com account. Let me know it goes. I always like to hear from happy c… http://bit.ly/5Z3vbE
@BLOGBloke, Yeh, I had a domain from a different comapny but Wordpress said I still had pay them to be able to link… http://bit.ly/1fDYre
@zarazek, so if I understand you correctly your blog was being hosted by Wordpress and then they insisted on chargi… http://bit.ly/1fDYre
I'm very happy with the refinements I made to the blog. What do you think? http://www.blogbloke.com/
How to Produce Your Own Podcast http://ff.im/-dm32o
"10 Reasons Why Twitter Is So Popular" ( http://bit.ly/8CM5gX )
Updated my Blokester Buttons for 2010. Grab yours now .. http://www.blogbloke.com/introducing-new-blokester-buttons/
How to Make Professional Podcast Videos for Your Blog (Vlog) http://bit.ly/7EHvN8
RT @projournalist: How to Make Professional Podcast Videos for Your Blog (Vlog) http://bit.ly/7EHvN8
RT @journtoolbox RT @projournalist: How to Make Professional Podcast Videos for Your Blog (Vlog) http://bit.ly/7EHvN8
@BLOGBloke - really ok - am trying to pull off this from your blog http://bit.ly/5Zv5kW (thank you so much for documenting this - it rocks)
@BLOGBloke - do you think I could use this service to redirect or park my domain like you mentioned in http://bit.ly/5Zv5kW
Great tutorial on migrating your blog from #blogger to #wordpress. http://bit.ly/Nlr2k
@10timesone .. have you read this http://www.blogbloke.com/migrating-redirecting-blogger-wordpress-htaccess-apache-best-method/
@FijiLomalagi my email is at the bottom of my blog http://www.blogbloke.com/
@Kwame, you will have to play around with the Apache code .. http://bit.ly/5Z3vbE
@Ankit_A see if this helps.. http://bit.ly/Nlr2k
@drewmillikin My technical skills are limited, but I found this post to be very helpful: http://bit.ly/7LY764. My advice: pull the trigger.
@Adam Johnson .. it was my pleasure and glad it worked for you .. http://bit.ly/5Z3vbE
@gopmommy Your domain name redirection is done on your hosting service. Check this tutorial http://is.gd/8TXkI
@stepfanieb Check #6. http://bit.ly/Nlr2k
RT @BLOGBlokeTips How to Make Professional Podcast Videos for Your Blog (Vlog) http://bit.ly/2JgxLd