Saturday, March 19, 2011

How To Create a Button (for Donor's Choose... or anything else)


Earlier I posted about the Donor's Choose button I created. Many of you were interested, so here are the directions. These can apply to any button you want to create if you are interested.

Donor’s Choose Button Directions

To make a Donor’s Choose button, you will first need to get a jpeg file of the meter.

  1. Log on to your project and view your proposal.
  2. Locate the meter (When I say meter, I mean the thing that shows how much money you need still and how many donors you have had)


  1. Open the snipping tool. (On my computer I went to start, accessories, then snipping tool)
  2. Click on Options. Under the ink color, uncheck the box that says “Show selection ink after snips are captured”.
  3. Click on New and select rectangular from the drop down menu.
  4. Make a rectangle around the meter by clicking and dragging.
  5. Save the photo in the location you’d like it to be.

You will also need to upload the photo to an image hosting site. I use www.photobucket.com.

Upload the photo and copy the direct link to image. 



Now, open a word document so you can easily edit the following HTML.



<center><a href="http://www.donorschoose.org/donors/proposal.html?id=543491&verify=-41406780" target="_blank" title="Donors Choose"><img alt="Donors Choose" src=" http://i1211.photobucket.com/albums/cc422/caf0117/Blog%20Buttons%20and%20Labels/DonorsChooseButton.jpg
" /></a> <center>
</center>



Only edit the colored writing. Everything else can stay the same.

In place of my green words in the HTML code, enter the link to your DONORS CHOOSE PROPOSAL.

In place of my pink words in the HTML code, enter the direct link to your snippet of the meter.

Once you have finished that, you will use the HTML to enter into blogger.

  1. From the Blogger Dashboard, click on design.
  2. Click on Add a Gadget.
  3. Click the plus sign next to the “HTML/Javascript” choice.
  4. Paste the HTML you just created.
  5. Save and view your blog.

Please note that this is simply a picture that gets you to the link. It will not change as the meter grows. You will have to take a new snippet, upload the photo again, and replace the pink words in the HTML with the new direct link if you want to update the button.
Hope you find this helpful!

Please let me know if this does not work for you. I am new to this HTML thing, too!
-Mrs.Patton

9 comments:

Chrissy said...

You are amazing! I am delighted to add this idea to my "to-do" list for spring break :-)

ReadWriteSing

Camille said...

I my gosh, you must have been reading my mind! Just started my blog and have NO idea what I'm doing! You're the best. I just have to figure out photobucket and if I have a "snip" tool! Haha!

snipssnailsandspice.blogspot.com

Pirate Princess said...

Thank you so much for posting this. I had no idea that I had snip and now photobucket is fun to play with also.

morrjm said...

I believe I have done everything you said and my picture is not showing up - the link is there but not the picture. Thanks for your help.

~Jennifer
http://mrsparkerssecondgrade.blogspot.com
theparkers04@hotmail.com

Deedee Wills said...

Oh... THANK YOU! I am sooo behind the tech stuff. I have been wondering how this all works.

Mrs. Ibarra said...

YAY! Thanks for this post. I finally decided to join Donor's Choose. I hope I get funded!

Caitlin said...

Thank you Thank you Thank you!!! I was trying to figure out how to do this and knew some of the blogs I stalk had the button. So when I checked out yours, I found your great directions also! I really appreciate it!!

Jennifer said...

Thank you so much for posting these directions! I looked everywhere for how to do this. I am so happy to have my cute little Donor's Choose button on my blog now! Now here's to hoping some of my followers are feeling generous! Thanks again :)

www.colwellsincarolina.blogspot.com

Miss Foote said...

Just put a donor's choose button on my blog. This was a perfect tutorial!

Laurie
Chickadee Jubilee