How to create your own blog button or banner

If you’ve ever signed up to a blog network like Technorati, you’ll know that they often ask you to put a button on your site. The reason for this is to increase the number of links into their site, thereby increasing its own PageRank. It’s the same process with animated banners. Creating these yourself isn’t too difficult, as long as you know a tiny bit of HTML. And you don’t need to know much more than how to cut and paste if you follow the instructions below…

1. Create your button or banner

There are plenty of places around the web to be able to create your own blog button. I used a helpful button creator on Adam Kelsey’s blog. Banners are easy enough using Photoshop – just remember to make a note of the pixel size of the image.

2. Upload your image

If you’re using WordPress, then this is easy enough by adding through the Media page. If you’re hosting your own website, you can always do this directly through your file manager or FTP software. Once you’ve done, make a note of the full location of the image (cut and paste it into Notepad).

3. Add the code

This isn’t too hard as long as you’ve got a basic understanding of HTML. Simply open Notepad (or any text editor), cut and paste the code in and adjust it to reflect your site rather than mine.  Then post the code into the page on your blog (in HTML mode) that you want button download to appear on and publish.


Some helpful notes:

  • Basically, the HTML attached creates a table with two cells on one row. The html box is through the <text area></text area> code
  • If you want to change the size of the HTML box, edit the cols number (it’s 40 in the example above)
  • One of the areas that sometimes gets glitchy is the speech marks, which don’t really like being cut and pasted between applications – if this happens to you, look at the shape of the speech marks in my box and compare them to yours in preview mode (cut and paste separately if necessary)
  • The src= bit refers to where your image is stored – you can find this out by right clicking over your image
  • If you have a different sized button or banner, remember to change the width and height (80 and 15 here respectively)

It should look a bit like this:

dontdisconnectus

4. Tell all your friends
Let your friends and followers know about your button or banner via your blog and twitter.
That’s it!