How to place your blog button in your sidebar

Everyone needs a blog button. You can view my previous post here about what a blog button is, why you need it and how you can make one for yourself. 
       
Now to continue my post on blog buttons, I will be showing you how to place your button in your side bar with the text box below it so everyone can copy the html and place it on their blog.

Step 1

You would probably like to host the button online. I use photobucket and my explanations and screen shots will be based on that. So if you would like to follow me along with this, make an account on photobucket and then upload your button(s) in the size(s) you want to add to your blog.

Step 2

Open the "Albums" section of your photobucket and click on the row that says "HTML code". Good, if you saw "copied" quickly flash, this means you have just copied the html code of your button.

Step 3

Open your blogger account and go to layout.

Step 4

Click on "Add a Gadget" and then select "HTML/JavaScript". A new window will pop up with empty fields.

Step 5

Insert the code which you copied from Photobucket by pressing "Ctrl+V" in the content field. I like to add "<center>" at the beginning and "</center>" at the end so the image is centered.

Step 6

Highlight the entire text in the content field and click on "Rich Text". This will let you see the image the way it would look on your blog instead of seeing the html code.

Step 7

Highlight the image shown and click on the ball with chain. This will make a new window to pop up in which you will need to insert the URL to your blog. This is done so the image links to your blog when clicked and not to your photobucket.

Step 8

Now we have to make the text box below the image so everyone can easily copy the code. For this, use the following code:

<center><textarea id="button-source" rows="4" cols="20" name="button-source">Paste html code from Photobucket here</textarea></center>

Just copy the code above and insert it into the content, delete the sentence written in red and paste the same code which you copied from photobucket. After inserting the code, click save.

End result

Here is what your end result should look like.

I hope this has helped you in placing your own button in your sidebar. If you need any help, don't hesitate to contact me.