How to make a blog button code

Do you want a blog button or badge, a little square logo to advertise your site, business, or giveaways? Once you have a basic image uploaded to an image host, it's easy enough to figure out the code.

Here's my basic button code:

<div align="center"><a href="http://www.HoboMama.com" target="_blank" title="Hobo Mama"><img src="http://images.hobomama.com/hobo-mama-button-200x200.jpg" width="150" height="150" alt="Hobo Mama: A Natural Parenting Blog" /></a></div>

From the top down, here are the elements in my button code. You can feel free to copy what you like.

1. I've chosen to center mine, which is the opening and closing div tags.
2. Then I have a link to my website: <a href="http://www.HoboMama.com" target="_blank" title="Hobo Mama"> I've chosen target="_blank" so that it opens in a new window when someone clicks on it, and I put my website name in the title tag, so that anyone hovering a mouse over the image will see what page it links to. (You can try it on the top image to see what I mean.)
3. Now it's time for the real point of this code, which is the image for the button itself: <img src="http://images.hobomama.com/hobo-mama-button-200x200.jpg" width="150" height="150" alt="Hobo Mama: A Natural Parenting Blog" />
   • The src tag is where you put the direct link to your button. (I recommend using Photobucket or [Photobucket no longer possible as of 2017] self-hosting the image, because you'll have some control over changing the file in the future if you ever want to alter the image without changing the button code.)
   • The width and height are how big you want your button to appear, and of course the people who grab your button can alter the size as they wish. A 125x125 is a good standard size. I made mine a little larger — for attention, I guess. You can see from the file name that the button image is actually 200x200, so that fans could make the button as large as that without degrading the quality. I recommend making your button image similarly a bit oversized in case of zealous fans!
   • The alt tag lets you give your image a name, so that it will show up in search engine results. I recommend putting a good, brief description of your blog here. It will also help fans who have lots of buttons keep track of which one's yours when they're looking at the code alone.
4. Then make sure to close off all the tags you opened: </a></div>

Make sure you test out the button before giving the code to anyone else. Try publishing it in a blog post or your sidebar and make sure the image shows up the way you want it, and that if you click on it, it goes to the right page. Tomorrow I'll have a post on putting your code into a grab box so your fans can get your code for themselves!