Thursday, May 7, 2009

Tutorial: Making a Blog Button - EDITED!


Earwen left a comment and asked how to make a blog button. Well I'm here to help!

1. Create your image and upload it to photobucket.
3. Resize your image to about 200x200 pixels.
4. Once you are back to your album (Done editing), hover over your image and check the box marked with the title of the image.

5. Once you check the box, scroll all the way down to the bottom of the page.
6. Click on 'Generate HTML and IMG code'.

7. It will then take you to a page that looks like this:

8. Copy all of the first code (HTML clickable thumbnails for Ebay, Livejournal, MySpace, etc.).
9. Log into your blogger dashboard and go to layout.
10. Paste the code from photobucket into an HTML/JavaScript gadget.
11. Now you need to change the code. Your code will say something like: h r e f = http / / : 'the photobucket username' Right there you erase it and put in your blog address. (right after the address it will have a line / and a question mark ?. Like I would put in instead of the photobucket username.
12. Now you have your blog button image!
13. Next, you have to make a NEW gadget (HTML/JavaScript)
14. Paste this:
That is your text box!
15. Put that code under your blog button image.
16. Voila! You have your blog button!

How to upload an image to Photobucket:

1. First you need to have an account with Photobucket, if you don't this whole process is worthless! I'm sure you could do it with another photo uploading site, but I've only tried Photobucket.
2. Go to your page (Where all your images are displayed) and click on this:

(Click on the picture to make it bigger)

3. It should allow you to choose your picture and upload it. If not, e-mail and I'll try to give you more step-by-step instructions!

Any questions or comments? Did it not work? Contact me and I'll try to figure out the problem!



Ëarwen said...


Ëarwen said...

I'm sorry, but that wasn't descriptive enough.
How do you upload an image on Photobucket?
Thanks for addressing my questino so promptly!

Ëarwen said...

Awesome, but...
when I click on my button, it takes you to the thing that says 'thoughts of a shieldmaiden does not exist'!
What's going on?
I've double checked and tried different HTMLs.

Emma said...

Did you make the rainy day header and buttons on the side?


Hannah said...

Hi, I'm Emma's sister, Hannah. I also LOVE fiddling around with blog headers, buttons, etc. I tried to do a post giving away an HTML code to my button but all it does is create another picture. Can you help me?



Here's my other blogs: Main Blog My Sister and I's Review Blog My Buisness Blog

Elizabeth J. said...

Thank you for sharing this! I have been wondering how to make a blog button.

Ëarwen said...

Okay, I made one, but help! it doesn't have the HTML code underneath, and it still just sent me to Photobucket!

QueenCrazyMum said...

I love you!
I have the button but i cannot seem to get the text box in there. Do I go under "add a gadget"?

princess in disguise said...

Thanks for sharing this,but our computer has a safety eyes computer blocker and it blocks Photo bucket do you have any other ways to do it???
Thanks and if you could just answer on my blog!!

jamiebartley said...

I got the blog button image done with the link but I can not get the text box with the code so that others can pick it up. Can you advise?