Tuesday, October 19, 2010

Creating a button that links to your blog

This article is about how to make a button for your blog that other people can put on their blog or website.

Occasionally, someone may ask you to give them a "button" for you blog that they can put onto their own blog or website, instead of just using a boring linked-list or Blogroll entry.

Really, a button is just:

  • A picture and 
  • Some HTML code that says "show this picture, and when someone clicks on it, go to this website".

If someones needs to ask you for this (and not just your permission to use your logo), they probably don't have the skills to make the code and/or picture themselves.   So if you want to be helpful, and if you're interested in having them help to promote your blog  (and you probably are interested), you will need to do most of the work.

How to make a button for your blog:

1 Make or choose a picture to be your button.  

This could be your icon or title-image, if you have one, or any other image file that you own or that is not copyright to someone else. 

Make sure that it's saved as a fairly small size file, but still looks good on screen.   If you want to be particularly helpful, you could ask the other person what size of button they would like, and make you picture the same size.

You could use the Blogger icon as your button but:
  • It may not be the image your want to represent you, and 
  • The other person may be breaking Google's rules if you do - check the current roles at Google Permissions

2 Upload your picture to an image hosting service

Blogger stores photos in Picasa web albums, but you can use any file-hosting service.  Ideally it should be somewhere that will exist for as long as your blog exists.

If you are using Picasa-web-albums, make sure that the security of the folder where you've put it is either "Public on the web" or "Anyone with the link" - not "Private"

Make a note of the URL of the picture (not the album) after you've uploaded it.

3 The code to use is like this:

<a href="THE URL OF YOUR BLOG" imageanchor="1" >
<img border="0" src="THE URL OF YOUR IMAGE"  alt="Link to YOUR BLOG TITLE"/>

Or, if you would like the other website to stay open and your blog to open in a new tab or window:
<a href="THE URL OF YOUR BLOG" target="_blank" imageanchor="1" >
<img border="0" src="THE URL OF YOUR IMAGE"  alt="Link to YOUR BLOG TITLE"/>

To make this code work for your blog, you need to change:

to the correct values for your blog.

Installing your button

The method for installing your button on the other person's website depends on what tool they are using.  

If they are using Blogger, they have several options for installing third-party HTML (which is what you have made for them).

If they are using some other tool, they may need to consult the manual, or help forum, for that tool.

A warning about copyright

Copyright law applies to blogs, just like it applies to all created things.

If you make yourself a logo, then you own the copyright of that logo.   But if you make a copy of it available to someone else, then legally you may be implying that they are welcome to use it - details of this depend on the law in your country, and perhaps the laws in the country where you file-host is, and where Google is located too.

Notice that the method I have suggested gives you control over the image file that you've provided:  if you want to change the image later on, you can provided that the replacement gets exactly the same file location as the original file had.   (Google Sites file-stores currently do work this way, provided replacement files are makde by by uploading a file with the same name as the original had.)

If you use someone else's imagine as your button, make sure that either you have the owner's permission to use the picture, or that it is in the "public domain".

Related Articles:

Finding a picture's URL in Picasa-web-albums

File-hosting services

Putting 3rd party HTML into your blog

Copyright, blogs and bloggers

Linking your blog to the Social Networks.

Share this Article


HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter


  1. this was very helpful! I'm trying to do a little tutorial myself but i can't seem to figure out how to get the code to just show up as code and not show up as what it's supposed to become you know? if that makes sense. could you please explain to me how you got yours to show up there as just code?

  2. Amanda, in the Post Editor go to Post Option, and change Compose Settings to Show HTML literally