Blog Button Tutorial

I don't know why it took me so long to actually make one of those. Everyone has them, everyone seems to be able to make them, it wasn't so difficult after all.

Here is a How To place a button
with a text box for code on your blog:

First of all, create the image you want on a photo editing program, let's say Photoshop or Picnik sized 125x125px (at least that's the size of mine but I guess you can make it a little bigger) and resolution 72 - 75dpi. Save it as a JPG format and load it on Photobucket. From there you can copy the HTML code.
UPDATED: After experimenting a lot, trying to make a button that would satisfy me, I've found out that  a picture resolution of 150dpi or even higher would do also just fine. Also, for a bigger button you can rearrange the size to 150-180px or even more. Play a little, experiment. Once you finish you'll know the button code and how it works by heart! ;-)

Then in your Blogger Dashboard go to Design - Page Elements - Add A Gadget - HTML/ JavaScript and copy-paste the following code into the text box. You can also put a title like mine "Grab My Button" or whatever. Then, you must be really careful with this because you don't want to accidentally delete anything or put any extra http://, replace the red and blue colored information with your blog's information (web address & blog title) and the orange colored information will be your buttons web address (the html you'll copy from Photobucket).

[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/][center]

[/center]
[center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="http://IMAGE WEB ADDRESS"/][/center][/textarea][/center]

All of the front brackets [ must be replaced with < and

all of the back brackets ] must be replaced with >

Here's an example of mine:

Save and position the button where you want it. Preview your blog and if you are satisfied with the result, save your changes.

This is what your button will look like on your blog:

Well, I'm not yet completely satisfied with my Blog Button, I'm willing to make more of these but until then... go make yours. I can't wait to see them!