Want to create a button code so others can display your button on their blog? It’s easier than you think.

First, we’ll start with the anatomy of a blog button code:

Red = Website reference. This is the website you want your button to link to when people click on it.

Maroon = Website title. What is the name of your site/blog?

Blue = The URL where your photo is stored. To find your photo’s URL, right-click on the photo and select properties. A window will pop up that shows the URL assigned to your photo.

Green = Length (rows) & width (columns) of the box that displays BELOW your button/graphic. You may wish to adjust this to make it easier for others to copy/paste your button code for their website.

This is the same code as listed in the photo above, but in a convenient box so you can copy/paste to follow along with the steps below:
<center><a href="http://www.lifewithlevi.com/breastfeeding-blog-hop/" target="_blank" title="Life With Levi"><img alt="Life With Levi" src=" http://i198.photobucket.com/albums/aa94/dvanti77/th_BFBlogHop06.png?t=1299696326"/></a> <center><br /> </center><center><textarea id="code-source" rows="13" cols="18" name="code-source"><center><a href="http://www.lifewithlevi.com/breastfeeding-blog-hop/"><img border="0" src=" http://i198.photobucket.com/albums/aa94/dvanti77/th_BFBlogHop06.png?t=1299696326"/></a></center>

Creating The Code:

Creating the code is as simple as replacing the colored portions above with your specific information.

1) You’ll need to start with an image that you want to use for your button. I used GIMP, a free program, to create this button.

2) Once you have your image, you need to upload it to an image hosting service (PhotoBucket, your blog, etc…).

3) Replace the colored text in the code above as needed.

4) Copy the new code (with your text, not mine) and paste it into a blog post, button page, sidebar widget, or anywhere else on your blog you want your new button and copy code to appear.

5) Check that the button looks correct AND test the code from the code box below your button. You can test this code by copying it and inserting it into a new blog post. Use the “Preview” button on the blog post – if you see your button in the preview, you know your code is correct.

6) Congratulations!! Now you have a button with a code so other people can share your button and promote your blog!

Here’s what my finished product looks like:

<center><a href="http://www.lifewithlevi.com/breastfeeding-blog-hop/"><img border="0" src=" http://i198.photobucket.com/albums/aa94/dvanti77/th_BFBlogHop06.png?t=1299696326"/></a></center>

More From Life With Levi

• How To Pump While Working Out With PumpEase Video | Life With Levi
• Breastfeeding Blog Hop – Week 4
• How To Blog Hop

Life With Levi Recommends

• Here is how you can create Passive Income with little to no money down  (verenetta)
• How to set up a Blog?  (verenetta)

Ask Life With Levi To Recommend Your Posts

Like what you see? Don't forget to share :)

• 

• Tweet

LifeWithLevi  (665 Posts)

Jen is the busy MN mom behind this site. When she's not busy at work or at school, she's either chasing her son Levi around the playground with her husband Jason or hiding in the bathtub with a book & a glass of wine.

Related posts:

How To Blog Hop

Breastfeeding Blog Hop - Week 4

Fertility & Sex - Breastfeeding Blog Hop