instead.

Thursday, May 7, 2009

Tutorial: Making a Blog Button - EDITED!

****Updated****


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 http://rainydayblogdesign.blogspot.com 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!

Blessings,



10 comments:

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

    ReplyDelete
  2. 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.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

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

    -Emma

    ReplyDelete
  5. 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?

    Thanks!

    ~Hannah

    Here's my other blogs:
    www.13hannahs-world.blogspot.com- Main Blog
    www.opinionsofours.blogspot.com- My Sister and I's Review Blog
    www.essentialearrings.blogspot.com- My Buisness Blog

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

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

    ReplyDelete
  8. 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"?

    ReplyDelete
  9. Hi,
    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!!
    Blythe

    www.princessonafarm9.blogspot.com

    ReplyDelete

Questions? Comments? Feel free to leave either!

~Emily Joy