Wednesday, April 21, 2010

How To Make A Clickable Banner Image For Your Blog

You will see just how simple it is to create a clickable banner for your website or Blogger blog.  It is very important to have an image banner on your blog or website that your readers can copy and past on their own sites with a link back to you.

Why You Need A Clickable Banner:

This is perhaps even more important than the written content on your blog.  Think of it this way.  If no one comes to your site to read it, what's the use of doing all of that writing.  If you do not take the necessary steps to make people aware that your blog exists and enable them to share it with others, you will have no visitors.  Additionally, search engines are faster to index optimized images and other multimedia content like videos than the written word.

It's as simple as this.  You must add a clickable banner image  to your blog or website for visitors to post on their sites and link back to you.  When others add your clickable bannner image to their site, this will also enable their readers and visitors to find your site as well, thus increasing your traffic, link popularity, Google page rank, and SEO.

How A Clickable Banner Works:

How this works is that you create a clickable banner image (that links to your site), then post it on the home page of your blog, along with the html code, which will render the image display.  Other webmasters or blog publishers will then, copy and paste your link (that you provided on your page) to their blogs.  Whenever anyone clicks the image, they are taken to your site.  You will be surprised by how much traffic you pick up and how many more visitors you will get.

Let's Make Your Banner:

Create your banner using the same method used to create a blog logo, which I taught you in a previous post.  After following those simple, step-by-step instructions, come back to this page and follow the remaining instructions on how to make your banner.

How to Make It Clickable:

Now that your banner has been created, let's optimize it and make it clickable, and post it to your blog so that your readers can post it to their own blogs now.

Refer to my previous post, which provides an easy, step-by-step tutorial on how to upload and host your images on Blogger Blogs.   In that article, I also showed you how to get the URL or location of your image, which you will find in the browser bar by "right-clicking" on your image and then clicking "View Image."  The web address that displays is the image location.  Copy and paste this web address into a notepad file. Next, copy and paste the following code into the notepad file:

This will serve as your template.  Use this code as a guide anytime you want to create a clickable banner.

From here, you will go back to your notepad file and fill in the details on you template.  Where it says "YOUR WEBSITE URL GOES HERE," replace it with the actual address of your blog.  For example.  For this blog, I would enter ""  Keep all of the quotation marks in the code.

On your template, replace "NAME OF YOUR WEBSITE GOES HERE" with the actual name of your blog.  For instance, I would enter "Google Image Blog."  Keep in mind that there are two places for you to add the name of your blog.

Replace "IMAGE LOCATION URL GOES HERE" with the image location that you already copied down before.  This should end with an extension like .jpg or .png. 

Where it says, "IMAGE WIDTH GOES HERE," enter the width of your image and enter the image's height where it says, "IMAGE HEIGHT GOES HERE."  You find this by "right-clicking" on "View Image Info." or "Image Properties."  This step is not essential for the rendering of the picture, but it is very important with regard to optimizing your image for search engine results pages (SERPS).  The whole goal here is getting picked up by search engines, right?

Well folks, there you have it.  Your image is now clickable and people can link back to you.  Post this on your home page.  Good luck.  Let me know if you have any questions, need any assistance, or want me to do this for you.

Here's An Example:

This is my code and banner image.  If you find this article or others here on the blog at all useful, please link to me by adding my banner to your site.  I greatly appreciate it.  Thanks a bunch and happy imaging!

Freelance Jobs Daily Update

Thanks for visiting Google Image Blog. Please subscribe and visit often for more images.


  1. it is very easy for users to understand...................

  2. This is a great tutorial. Thanks for the tips.

  3. The logo reflects the company's function, service, or product and what the customer or client can expect in terms of quality, service, reliability and satisfaction from the company.

  4. oh.. nice article. I had learned something interesting with your post. thanks a lot. keep on updating.
    seo tutorial


Leave comments on Google Image Blog and we will give you quality backlinks to your website or blog, improving your search engine optimization (SEO), traffic, and Google page rank.