July 17, 2012

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.
Copying the html code from photobucket

Step 3
Open your blogger account and go to layout.

Select layout

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

Add a html gadget on blogger

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.

Paste the code from photobucket in html widget

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.

How to make a blog button in your side bar

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.

How to make the textbox area below a blog button

End result
Here is what your end result should look like.
Making a blog button with text area for blog sidebar
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.


  1. this is so helpful! managed to do my button now! thank you!

    http://straycloset.blogspot.com xx

    1. So glad if I can help. I know it took me some time to make and place mine. :)

  2. very helpful-thnx
    I'll be happy if you check out my blog too:)

  3. Helpful and insightful.. Nice share! :))

    Daney ♥

  4. This is a really great and simple tutorial - I think this will be very useful for beginners! x
    Island Girl Insights ♥

    1. Thank you. That was my reason for making it.:)

  5. Hi linked to your blog via the #bbloggers blog hop. Thanks for this and previous tutorial re blog buttons really useful & think I will be creating myself a blog button now:)

    1. Hi lovely, glad to have you stop by. If you need any help creating a button, just let me know. x


Thank you for stopping by. I love reading your comments, so be sure to pop one over x

Blogger Template Created by pipdig