1st of all a little disclaimer. I will admit I'm NOT a techy, totally not a techy!! But after 5+ hours of figuring out how to make a badge, button or whatever you call it that you want peoples to grab w/the name & link to your blog on it. I think & hope this will save you LOTS of time & guess work! I do also want to give both credit & thanks to Naturally Me Creations She was a life saver in directing me to 2 websites that helped me a ton! I'm hoping this will be helpful to you. I tried to make it as simple & step by step as possible. So if anyone "like me" who's a newbie & is clueless as to what a badge is or how to make one, it is now possible! Please let me know if you were able to add a button, I'd love to come visit your blog & check it out. Maybe I'll even become a follower while I'm there! :)
How to make a badge for your Blog
1. Go to http://photobucket.com/
2. Upload desired picture or graphic
3. Select the pic you want from your album, scroll over it & at the top of the pic a bar w/selections pops up. Choose Resize, then more options.
4. To resize only type in the box on the left, the other box automatically calculates the right size. 200 is fairly big. I made mine 170. Anywhere between 170-200 is ok.
This is sized at 170 To give you an idea of the difference in size. This is sized at 200
Once you make it the correct size hit the button that says "Apply". Then you can continue to write on it w/text add frames ect.. When your happy w/your picture. Hit the "Save a Copy" button at the bottom. Then return to your album & go to the picture you just edited. KEEP THIS WINDOW OPEN, you'll need it later.
5. Pull up your blog in another window. I also found it helpful to have a blank e-mail for pasting codes on (however you want to juggle it).
7. Copy & paste this code in the box.
8. Now's where it gets a little tricky. Go back to your Photobucket page w/the pic you want to use. If your photo is selected (just by clicking it 1x). You should see a box on the Right that says Share this photo, look for the box marked "HTML code". You just simply click in the box w/the code & it copies it for you.
9. Now, go back to your box you opened on your blog. You will now paste this code you copied in the 2 spaces where it says "http://YOURBUTTONLOCATION.jpg" Leave the quotes there, but put the code between the quotes.Replace only this part. http://YOURBUTTONLOCATION.jpg bottom one doesn't have the "s to help you. You will put it between the = & the >, the part you replace on the bottom line is this and NO more. http://YOURBUTTONLOCATION.jpg
10. You're almost done!! Now simply type in or copy your EXACT blog address, complete w/the "http://" stuff & paste it in place of this http://YOURBLOGADDRESS.com in the middle of the code.
Now hit save on your blog & you should have yourself a new badge you can be proud of! :) I noticed on mine for some reason when I would go & look at my blog there would be an annoying " /> next to the picture. I played around deleting here & there & found there is 1 spot where there is this pattern "/> back to back in the code. So if you have this problem occur, go back to your new gadget in edit mode & find the double & delete only the double & nothing else! Whalla problemo solved! I have yet to figure out how to prevent it, but at least you can get rid of it! :) Happy button making!