How To Add Button Code & Code Box To Your Blog

Above: Here's an example of a button with a code box beside it.

If you want to watch a video of this process click here. This is a more intermediate skill level.

Create a Button for your blog using our tutorial here (updated soon!)

Learn how to place a button from another blog into your sidebar.

You will want to create a Photobucket account if you don't already have one. Photobucket is a handy tool to keep your blog images on...you can also use Blogger's Picasa or other image hosting service.

Upload your new button (.jpg or .png) to Photobucket and save.

When you hover your cursor over the button a box should appear (as shown above). See the options available? You want Direct Link to create your code.

If you click on the button image itself this will lead you to a larger page that looks like this, that essentially houses the same information (notice the Links in the upper right hand corner of the page below):

Now when you go to your image you can click in the box on Direct Link, now copy this code. It will look something like this:

http://i892.photobucket.com/albums/ac123/yourblogname/a6c27771.jpg

Next open a Text Editing page (do not use Word as this creates extra text in your code) to copy and paste your code into. I find Sticky Notes to be easy to open, there are many that are free on your computer already. Follow the directions below and paste into your text editor:

A. To create the button's link code (or a clickable image actually) for your blog you will need to take the code you just copied from Photobucket and paste it into this code where it is red. Where it is blue, copy and paste the link of where you want the button to link to:

<a href="http://www.yourblognamehere.com" target="_blank"><img src="http://i892.photobucket.com/albums/ac123/beautifymyblog/a6c27771.jpg"/></a>

B. To create the box below the button with grab code in it, paste your code and link into this code:

<textarea readonly rows="10" cols="20">
<a href="http://www.yourblogname.com" target="_blank"><img src="http://i892.photobucket.com/albums/ac123/beautifymyblog/a6c27771.jpg"/></a>
</textarea>

Now copy and paste all the code from Letter A. into the HTML gadget of your blog's sidebar. Click Save. Then check to see if your button has appeared. If it appears you may proceed to adding the code box.

Copy and paste code from Letter B. below the Letter A. code. It doesn't have to on the next line to work...but you can eliminate extra spacing. We like our buttons centered, so notice that we also added CENTER code - <center> open and </center> closed.

 Click Save. Your code box will appear beneath the button in your sidebar.

This is what ours looked like:

Above: This is what your Sidebar Code Box & Button area will look like.
Title it something funny, like - Grab My Button or leave Title blank.

Tip: If you want your code box to be larger or smaller just change the numbers in the code to the size you prefer...go up (or down) in increments to check how it looks. Always remember to Click Save. It is also "draggable" in the corner for users to make larger or smaller.

If you find glitches in these instructions please let us know and we will do our best to improve them. Good luck and happy blogging!