How To Make a Badge and Button For Your Site

Good Morning.

Today because I do not have pictures of new items ready to post, I thought a tutorial of another kind might be useful and entertaining.

As you may have noticed the side menus have changed, and there are several new buttons and a "Grab Our Badge" Box.  Want to make one of your own?

If you own a shop, have a blog or a site, badges are a simple and quick visual recognition of your shop or brand.

There are four (4) steps to creating the code for your picture / badge and the code box that allows others to "grab your badge" for their own site, blog or what have you.

For this tutorial I will be using the images for Blackbird Metalworks Badge.  I also copied and pasted the code using Text Edit for iMac, although any writing or note program should do.

Step One:

Choose a photo that you like.

Using your preferred photo editing program crop or re-size image to 125 x 125.  This seems the standard size.

Upload your picture to photobucket, iPiccy, or Picasa.  I prefer photobucket.  *Suggestion - Make a Folder titled Buttons or Badges or something, and keep your badge images there, forever.  If you move them you will break the link to the image and then your button or badge will not work.

Edit and add text if you like.

This is what my badge looks like.

Step Two:

Write the code for your image.  Here it gets tricky and I will try to explain as best I can.  This is the code you will use, replacing the RED text with your own address.

<a href="http://YOUR URL.com/" target="_blank"><img src="YOUR IMAGE HTML CODE" border="0" alt=" NAME"/></a>

Copy the text above.  Insert your web address, site URL, or Blogger address where YOUR URL is, this will direct people to your site of choice when they click the button.  My address would look like this:
<ahref="http://alchemistsvessel.blogspot.com/"...


(I can't type the whole code or another image will show up.)


Now return to your Image file (photobucket, what have you) and copy the HTML Code, third item in the menu list.

Paste the code between the quotation marks where YOUR IMAGE CODE goes.

target="_blank"><img src="YOUR IMAGE HTML CODE"border="0" alt=" name"/></a>

Now you can type a short NAME for your button here, like mysitesbutton. I used bbmbutton.

Your URL will direct people to your site of choice when they click your button.  The IMAGE CODE is just that, the URL Address of the picture, it doesn't do anything else except tell the computer where the picture is located.  If you move it from its folder you will break the link / code and the button will no longer work.

Copy and Paste your code into the appropriate place on your site.  For blogger go to
Layout
Choose the HTML Code Box form the Add Gadget
Paste your code in the box.
Tah-Dah!
You have a button / badge / clicky thingy!

All done. If you would like people to be able to post your badge on their site you can create the following code.

Step Three: - Make a "Grab Our Badge" Text Box.

<textarea name="texture" cols="20" rows="4"
wrap="VIRTUAL"><a href="http://YOUR URL.com/" target="_blank"><img src="http://YOUR IMAGE CODE" border="0" alt=" NAME"/></a></textarea>

Copy the text above. Using the same information you used for your picture, insert your URLS into the appropriate spot.

Your site Address - YOUR URL (alchemistsvessel.blogspot.com)
Your Image Code - YOUR IMAGE HTML CODE (copied from photobucket) and should look something like this: 
a123/your account/foldername/picturefilename.jpg
Name - The NAME you gave your button (bbmbutton)


When you have completed your code it should look something like this:

<a href="http://YOUR URL.com/" target="_blank"><img src="http://YOUR IMAGE CODE" border="0" alt=" NAME"/></a>
<textarea name="texture" cols="20" rows="4"
wrap="VIRTUAL"><a href="http://YOUR URL.com/" target="_blank"><img src="http:/YOUR IMAGE CODE" border="0" alt=" NAME"/></a></textarea> 

Step Four: 

OK, Now that you have both codes, return to where you would like to use it.  Paste BOTH codes into the HTML Box in blogger or other appropriate place on your site that lets you add buttons or code.
  
When you are finished your box should look something like this. 



<a href="http://alchemistsvessel.blogspot.com/" target="_blank"><img src="http://i35.photobucket.com/albums/d183/winter_fox/Buttons/button1.jpg" border="0" alt=" alchemistsvesselbutton"/></a>

The text in the box is what others will copy and paste to use your badge / button on their site.

NOTE:  WordPress Users, the GRAB BOX code will not work, it will simply create another picture. I don't know why this is, but the first part of the code will work for the badge.

Thank you for stopping by, we hope we have not confused you and that this information will be helpful.

The Alchemists Vessel would like to wish you a pleasant day.