Blog Buttons

Judging by the number of blog button and blog banner inquiries and e-mails I have received in the past 48 hours, a lot of people are taking advantage of the Easter break to spruce up their blogs. Cindy from studied my blog banner tutorial and worked out how to make her blog button link to her blog But she also wanted to show the code for her button on her blog so that others could cut and paste it into their templates. (Those using New Blogger can simply cut and paste the code into a new widget using either the html or text page elements.) The code is very easy:

<a href="http://yourblogurl"><img src="http://yourbuttonimage.jpg" alt="Your Blog Name"/></a>

Accordingly, the code for my blog button is:

<a href=""><img src="" alt="Serendipity & the Art of the Quilt"/></a>

And the button itself looks like this:
Serendipity & the Art of the Quilt

However, if you type this code into a blog post, all that appears is your blog button. If you want the actual code to show up, then you have to replace every < with & l t; and every > with & g t ; and every ” with & quot ; (but without the spaces in each case). Thanks to Lisa Call for explaining this little trick to me when I was more of an html novice. Now you know the trick too!

PS: Don’t forget to keep your blog button images quite small (eg less than 150 pixels wide and less than 10KB in file size). Otherwise they will not fit in blog side bars and/or take ages to appear.


  1. Hi Brenda,

    I finally got around to changing my blog header on Saturday. Your tutorial was wonderful and worked a treat, thank you. I put a link to your tutorial on my blog and I know a few people have been trying it. Thanks again.

  2. You’re welcome!


  1. […] my blog button tutorial I showed you how to make photo links and to show the code for such links on your blog. […]