A few weeks ago, I posted about my new button and promised I would give easy directions on how to make your own button, so here ya go!
1. Create your button picture: Begin with a picture or your logo, no larger than 150 pixels wide. Why 150 pixels? Most sidebars are only 200 pixels wide, so any larger and your button will be cut off on one or both sides. You'll probably want to include the title of your blog, as the point is to help increase your blog traffic, right? Most of the buttons I've seen have been squares--150 x 150--but my button didn't look right as a square, so a vertical rectangle it was! Tip Junkie's buttons are all horizontal rectangles. I created my button picture in Photoshop 7.0 (which I'm still plodding my way through).
2. Host your picture:Find a place to host your picture. I use Picasa for all my normal blog pictures, but I couldn't find direct links to my pictures on Picasa, so I usedPhotobucket. I made a new account for this blog and it was quick and simple. I uploaded my button to Photobucket and copied the direct link to the photobutton. Here is a screen shot of my photobucket album showing the direct link you'll need to copy.
3. Create HTML for your button: Copy the following code and replace yourblogURLwith your blog's URL and yourimagedirectlinkURL with the direct link URL in Photobucket (the quotation marks are necessary).
4. Place the button in your sidebar: In your blog, choose Layout or Customize and in your sidebar, click Add a gadget and choose HTML/Javascript. In the title area, you can write whatever you'd like--Take a Button, Grab my Button, or don't use a title at all--whatever suits your fancy. Then in the HTML box, post your HTML from the previous step. Save it and preview your blog to make sure your button shows up on the sidebar and that the button takes you to your blog. Here is a screen shot of my button HTML
5. Create your text area for your button: Again, choose Layout or Customize and in your sidebar, click Add a gadget and choose HTML/Javascript. If you leave out the title, the text box will appear directly under your button. In the HTML box, paste the following code:
<textarea rows="4" cols="20">
Then paste in your HTML from step # 3 and close with
</textarea>
Click save. and now, drag this HTML box under your button HTML in page layout. View your blog and make sure the two appear together. Here is a screen shot of what my text area looked like in Blogger.
VOILA! You now have a button for others to post on their blog! Please let me know if you have any questions and also if you use the instructions to make a button!! Enjoy!!
p.s. It isn't 100% necessary, but I'd really, really appreciate your link back to me if you make your own button! THANKS!!
