How to make a Blog Button/Badge (HTML/Javascript)

Update 1/24/14: Recently Blogger has gone through many updates and changes. Ultimately, I believe these are for the best, and are helping those of us on blogger with SEO and formatting and that good stuff. However, it does render many of our old codes obsolete. Though this method worked well for years, it no longer does. I have not made a new tutorial yet, but I ran across THIS ONE at CODE IT PRETTY, and would recommend checking it out (I've been told by a good source that it really does work).

___________________________________________

So you say you want your very own blog badge...and you don't want to pay somebody to make you one?  That's what I said once upon a time, so with a little digging I found instructions on how to make one and put "code" to it.  Then I found instructions somewhere else on how to make a "code box" to put underneath it so other people can grab your badge/button and add it to their pages, if they so desire.  And it doesn't have to just be a badge that leads to your blog/site...it can be a badge for an event you're holding or a particular post you love or are proud of and just want to show off!  Whatever it may be, you can make your own badge.  The hardest part is deciding what you want your badge to look like...the "coding" part is easy.  So, as best as I can, I'm going to explain to you how to make your own blog badge...and then at the HTML code to make it active.  I know this works for adding to Blogger or blogs that accept Javascript/HTML codes. I'm not so versed on Wordpress and CSS code, though. Hopefully I'll be able to add that in the future.  I'll look into it and hope for feedback!

*I'm going to recommend the sites that I use to make my badges/buttons.  By no means do you have to use them, but the process I'm going to describe is what has worked best and without problem every time.  It may seem that I get reimbursed by the way I'm backing the sites...all I can say to that is...I WISH!  The sites I recommend all have FREE memberships (and paid, but I don't use the paid services at either, so while available, it's not necessary to do what I do here).

1. Okay, start by designing/making/creating a button.  Use your favorite picture, text, or graphics.  Jazz it up a little by using a photo-editing program to add text, frames, fun graphics, etc. You don't have to buy a fancy program (but use it if you have it).  I like to do my editing and other fun stuff at PicMonkey or Canva.  Be sure to "resize" your picture to a good blog badge size.  I think anything much bigger than 200 x 200 starts looking clunky.  Yes, there are always exceptions to the rule, but in general.  It doesn't have to be square, either...just my thoughts on not going larger than 200 in either direction.  Also because if it's a badge that people will possibly add to their side bars, it may exceed space limits and be "cut off" when viewing the page.  If the program you're using to make your badge doesn't allow you to resize, then you should definitely be using Picnik. Kidding!!  I'll tell you how to resize in a different way a little further on.  Once you are satisfied with the look of your soon-to-be button, save it to Flickr, Photobucket or another photo storage service.  I'll use mine as an example:

2. Now it's time to add the HTML code to the badge you've created!  A word to the wise...Create an album on your account in Photobucket and name it (something like Blog Badges or the like).  Make sure this picture is saved IN this album...if it's not, then move it there.  Once you have made your code, you don't want to move your picture or it will disappear everywhere somebody used your code.  Not good.  You want it nice and cozy in its forever-home ;). 

Okay, after you've saved your picture to your Photobucket account, click on the picture.  You should be on a page where just that picture is showing.  [If you were not able to resize it before you saved it, NOW is the time to do it.  Click resize and set it to the size you want it to be (see above).  Re-save the picture once you've done this.  Save it IN PLACE OF the bigger one you just shrunk.  This will save you from confusing them in the future.  Now, continue on.]  You are now looking at the page and you will see a box that looks like this:

Copy and paste the HTML line (third line) into a word document.  It will look like this:

What you want to do next is delete what is in between the first set of parenthesis...

...and replace it with the address/link to the page you want people to end up on when they "click" on your badge. It should look like this when you're finished:

Also, if you don't title your picture on Photobucket, the part between the last set of parenthesis will just say Photobucket.  No biggie.  Erase the words only and replace with the name of your page or whatever.  But, it's not necessary.

3. Now that you have code for your badge/button, it's time to add a code box to the mix, so that other people can "grab" your button!  Copy and paste the following code into the document you're working from *UPDATE- I can't actually type the code out, because it automatically turns into a code box, so what I did was take a picture of it, and you can just copy it down and then proceed. Sorry about that =( ...if I can figure out how to actually type it out so you can copy and paste, I'll change that!:

You will then copy and paste the first, completed code you made into the area between the > < , deleting what is between there now, to look like this:

Okay, this will make a code box with the code for people to copy and paste your badge onto their site. 

4. The final step is the put the two codes together.  Still with me?  You're almost there...promise.  Get to a clear space on your document, because this is it...it's all you'll need in the end.  Copy and paste the first code you made (the one that leads to the picture) into the clean space.  Then copy and paste the second code you made (the code box) directly under the first.  Be sure to hit 'enter' after first code, so that your button sits on top of your code box.  The final result should look something like this:

Okay, now save your work!  That final "stacked" code is all you'll need.  I'm going to do a little digging to see if I can figure out how to install it on wordpress, and I'll update if/when I can figure it out.  If you know, please let me know!  Here is how to install it on your Blogger site....

5. Installing on your blog...  Click the 'Design' or 'Layout' option (whichever your screen says...depends on version, I think) for your blog. 

Click 'Add a Gadget'. 

Click 'HTML/Javascript'. 

Paste your entire code into the box, title it, and click 'SAVE'. 

Now, drag it up or down to put it where you want it located on your sidebar and hit save.  Now, view your blog. It'll look something like this:

Viola!  That wasn't so hard, was it?  It's a lot of steps, but once  you've done it a few times, you'll be able to do it without even thinking!  I'm no computer expert, I've learned all that I know just through trial and error, research and practice...lots and lots of practice!  I hope this helps somebody out there.  If you have questions, go ahead and ask and I'll try my best to answer them.  If I don't know, I'll tell ya so.  Blog on!

*UPDATE 5/3/12:  Hi everybody!  Okay, I know that it's long overdue that I take some time to update this tutorial (although, it still works, so don't fret!).  I just wanted to say add a few extras to what I've listed above.

--->A couple of years ago, I also started using Flickr for everything and stopped using Photobucket due to space constraints.  I already had a Pro account w/ Flickr, so I can save as many things as I like.  "Grabbing" your badge code works basically the same way at Flickr.  Once you've saved your badge/button to Flickr (step 2), simply click on the photo.  Click on Share. Click on Grab the HTML/BB Code.  Choose the size you want to use.  If you've already re-sized, simply choose original.  If you want it one of the other sizes, choose that.  Copy and paste it and continue as written above.

--->Also, I mentioned above that I wasn't sure if this worked for Wordpress blogs or not.  I received a comment from Jennifer at Freedom from Ashes today telling me that YES, indeed you can.  She said...
I added my button to my wordpress site. For Wordpress users, all they need to do is get a text widget and add the html code there (along with a title if so desired) and voila you got an awesome button! 
There you go - That's SO awesome, thank you for letting me know, Jennifer!