How To Add Button Code & Code Box To Your Blog

Above: Here's an example of a button with a code box below 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.

You will need to create a Photobucket account if you don't already have one.

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

When you hover your cursor over the button a box should appear. Click on the blue link that says Link Options. This will give you a list of all the possible codes you can grab. The main one you will use is the Direct Link. Make sure this is checked. Now when you go to your image you can click in the box on Direct Link, copy this code. It will look something like this:

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

Open a Text Editing page (do not use Word as this creates extra text in your code) to copy and paste your code into. Follow the directions below:

A. To create the actual button link code for your blog you will need to take this code 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 go 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. Click Save. Your code box will appear beneath the button in your sidebar.

Above: This is what your Sidebar Code area will look like.
Title it something funny, like - Grab My Button!

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.

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!