- Select a photo that you'd like to use and edit it. I edit all of my photos on PicMonkey and I definitely recommend it for anyone who's looking for a spectacular FREE photo editing website. It's super easy and you don't even have to have an account! So the first thing you need to decide on is the size of your button. You may have to do a bit of fiddling around to get the size you're looking for, but the most common size is probably 125x125. I decided to make my button width 240, because it looks nice on my sidebar. 240 is ginormous for a blog button, but I'll be creating more buttons in various sizes to add to my button page (which is accessible via my nav bar). I'll share with you my PicMonkey editing process to give you an idea of what you can do. Once your photo is uploaded onto PicMonkey go ahead and re-size the photo to the width of your choice. The next thing I like to do is go into the effects menu (click on the little chemistry vial image on the far left of the screen) and add whichever effects I like (there are so many to choose from!). After that I go down to the text menu and add text to my image. Once I've done those three things I go ahead and save the image to my computer.
- Upload your photo to a host website. I use Photobucket and highly recommend it-it makes things soooo easy! Once you're photo is uploaded to Photobucket (or your image host of choice), copy the image code. Write it down or paste it into a word document so that you have it close by-you're going to need it, but not yet.
- Create the html code. Don't worry you don't have to be an html whiz to be able to do this step. It might be a bit tricky, but I'll make it very easy. The code you'll need is at the bottom of this post. Replace the words: YOUR IMAGE CODE with the image code you got from step 2. Replace the words: YOUR WEB ADDRESS with your website address :) There's the code! That wasn't too difficult eh?
Here is the basic code that you need to plug your image code and web address into:
<center><a href="YOUR WEB ADDRESS"><img src="YOUR IMAGE CODE" /></a><textarea><a href="YOUR WEB ADDRESS"><img src="YOUR IMAGE CODE" /></a></textarea></center>