Thursday, December 30, 2010

How to make a badge for your Blog

How to make a badge for your Blog

1. Go to

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.

If you look at my buttons on the side the big one is 200, the smaller ones are 170

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).

6. Go to your Dashboard, then Designs (on your blog). Then you will hit "Add a gadget" in the spot where you want to add your new badges. Select the "HTML/JavaScript" button. A window will pop up.

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 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! :)

1 comment:

Anonymous said...

Hey, I am checking this blog using the phone and this appears to be kind of odd. Thought you'd wish to know. This is a great write-up nevertheless, did not mess that up.

- David