Blog Tips: How To Make Your Own Blog Button

Thank heavens for great bloggy friends. I don’t know the first thing about coding so when I want something like….saaaaay….a new blog button, the first thing I do is email Jill and beg her to design one for me. She usually responds with something like “I do have a life you know MK…but I’ll throw something together.”

An hour later she’ll send me my button.

And then I email her again and say…”soooo how do I get a code that will display the fancy box with the grab code and stuff?” To which she responds by saying, “here take mine and just insert your own URL and photo destination information.”

To which I respond by saying “Ooh perfect Thanks!” while thinking, “photo destination huh?” And then when I ALMOST get it to work perfectly I email her again, “it’s not working perfectly what am I doing wrong” and she says “Dang….I know…ask Angie if she knows.” So I asked Angie and she gives me the perfect working code.

Here’s what you do:

Design your button.

You can use a favorite photo with a tag line or title on it. You can purchase graphics from istock.com and create a button using tools in Photoshop or Paintbrush or whatever art type program available on your computer. Or you can figure something else out, but having an actual picture that you want to become a button is kind of necessary.

Upload your photo to whichever photo storing site you use online. I use Flickr for personal photos and Photobucket for things like buttons and pictures of nerdy bachelors and other things I steal from the internet.

Make sure your photo matches the size in the width/height area in the coding of the actual button. The picture above would be slightly large looking in my sidebar. The code I’m giving you is for a size 160×120 button.

In Photobucket, if I move my arrow to the top of my uploaded picture, a small toolbar appears with the options to size my photo down. You can, however, change the numbers in the actual code as well. If you want a 125×125 square you would just change the dimensions in the code to match the dimensions of your picture.

Next I copy the code that you need to put the picture on your page that the photo site supplies.

Then I took the code Angie and Jill gave me and inserted my information:

<div align=”center”>
<img src=”http://i913.photobucket.com/albums/ac331/mamakatslosinit/poodle4.jpg” alt=”Mama’s Losin’ It” /><br/>
Copy and Paste Code<br/>
<textarea cols=”20″ rows=”6″><a href=”http://www.mamakatslosinit.com/” target=”_blank”><img src=”http://i913.photobucket.com/albums/ac331/mamakatslosinit/poodle4.jpg” alt=”Mama’s Losin’ It” /></textarea>
</div>

And Wa La:

Now if you JUST want a button without the code box beneath it…maybe for an ad you’ve created or something. The code I use looks like this:

<a href=”http://www.mamakatslosinit.com/“><img alt=”Mama’s Losin’ It” src=”http://i913.photobucket.com/albums/ac331/mamakatslosinit/poodlebutton2.jpg” title=”Mama’s Losin’ It”/></a>

Do you see where you would insert your own information?

First there’s: <a href=”the URL you want the button to take you to” then the image info: <img alt=”the words you want for search results” next is the image location: src=”ie, photobucket” and finally the titel: title=”the words that pop up when you hover over the button“/></a>

And there you have it!!

Update:

I realized after posting this that although the button looked great, it wasn’t linking to my site. I asked Shannon, my blog designer, why she thought the button was not working properly and she said this: “It’s the curly quotes. Sometimes when you type something in one place, then copy/paste it into another, some formatting gets embedded. If you look closely and see some quotes are “curly” it will mess up your link. try going in and manually deleting and re-typing all the quotes in your widget. That should do it!”

Tagged as: blog button, blog tips, code, how to make a button, tutorial