How to Make a Blog Button

I've noticed whilst wallowing around the interwebs that quite a few very fine blogs are missing cool buttons for their virtual friends to grab. And I do recall what a mystery those things were to me at one point. So since I am STILL without my computer at home (yes, REALLY), I thought I'd pass on the quick and easy tutorial on how to set yourself up with one of those bad boys.

Before we get started on the actual html code there are somethings you will need to do first:

• First, you need to create an image. You'll notice mine is a slice of the banner. There are several websites that specialize in buttons if you don't have photoshop. Google "Blog buttons or chiclets" in order to find these websites. Then just save your image to your hard drive.

• Next, you will need to upload your image from your hard drive to the internet. This is simple; just upload it in a post on your blog. You can also use Picasa, photobucket or Flicker.

• You now will need two URL addresses to insert into the html code. The first address is the site you're linking to. The second is the address where your image is located on the web. (To find this address, click on the image in your published post. Then right click on the image, scroll down, click on properties and copy the URL address.)

Now we are ready to create the html code and to install it on your blog.

• Go into the layout section of your blogger account and create a new Gadget.

• Choose HTML/Java Script.

• Copy the code below and paste it into the text section of your new HTML/Java Script Gadget.

URL address you're Linking to">URL address of your uploaded image"/>

• Replace the sections in red with the two URL addresses you just grabbed.

• Click save.

 Now...

• 
  
  
  
  
  
  
   
  Code for Adding a Blog Button with text Box Underneath for Code
  Once the code is properly formatted (with < and >), you need to replace the generic information with your information.
  
  Replace the YOUR WEB ADDRESS with the address of your blog.
  
  Plug in your blog's title where indicated and go back and copy the image web address and paste it in the correct location.
  
  Make sure you delete all of the generic information. Your code should now look like the code in the photo to the left (click on the picture to enlarge). The colored information should all be replaced with your specific infromation.
  
  
  
  
  
  
  ·  9
  Save this gadget and position it where you'd like it to be.
  
  
  
  
  
  
  ·  10
  Save your changes and click View Blog.
  
  
  
  
  
  
  ·  11
  Click on your button to make sure it takes you to the home page of your blog.
  
  It's also a good idea to copy the code from the box and try to add the button to your blog.
  
  To do this simply highlight and copy the code from the text box that is now visible on your blog. Then under Layout, add a HTML gadget and paste the code into the text box. Save changes and view your blog. This "new" button will not have the text box underneath (this is what your button will look like on other people's blogs.) Click on the button to make sure it brings up your blog's homepage.
   

• Rock on with your new button!

Easy, right? And you may have noticed I like to grab people's buttons for a little bloggy promo love, so let me know if you make one and I'll happily pop it in the side bar!