BLOG BUTTON TUTORIAL!!

YAY! I made a blog button. I feel so official--finally!--after 2 1/2 years of blogging. haha! I decided I really love the cupcake, but I agreed with some of you who said there are LOTS of cupcakes out there in blogland--not very original. So, the mailbox had to be a part of it. And having the mailbox associated with my blog is just cute because, when you read my blog, hopefully I deliver something sweet! (Cheesy, I know.)

UPDATE: I realized after making my mailbox design that I might come across some problems due to the fact that it's not squared design. (Due to some size restrictions on certain blogs or sites?) So you now have a choice of 2 buttons.

After I created the image, I saved it---& that's when it went all pixel-y on me. I hate that, but don't know how to correct it. Anyway, it's a start. I can always clean it up later.

On the right sidebar you will see the image & then the html code you can copy & paste to your website or blog. It'll be so exciting when I see it appear 'round the www!

And, as promised, here are the instructions for creating your OWN badge/button!!

The original instructions can be found HERE. But my helpful badge buddy Julie, of Creations with Heart put the instructions in her OWN easy-to-understand words & sent them to me. (Thanks again Julie!)

♥

These are directions for blogger, but it can be tweaked to use wherever! You will be opening two windows/tabs to make the copying & pasting easier.
A typical button is 150 x 150. This image should already be re-sized before uploading into your online image host.

I use Photobucket for my image hosting - it's super easy! If you aren't storing your photos online, you may want to create an account there like I did. OK. Here we go...

1. Upload your image to your online image host such as Photobucket. In another window/tab, open a text editor/notepad and copy the DIRECT LINK code underneath your image. Just click on it and it will be copied. Now paste it into your editor/notepad. You'll be coming back to this later.

2. Open blogger and click on LAYOUT

3. Click on ADD A GADGET

4. Click on HTML/Javascript

5. Copy the code below and paste it into the HTML/Javascript window in blogger that you just opened.

[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="TITLE NAME"][img alt="TITLE NAME" src="http://IMAGE WEB ADDRESS"/][/a][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"/][/a][/center][/textarea][/center]
***All of the front brackets [ will need to be replaced with < & all the back brackets ] will need to be replaced with >

6. While you're still in blogger, insert your WEB ADDRESS where it says "http://YOUR WEB ADDRESS/" in the code you just pasted. The web address will be the site you want the button to link back to.

7. You're still in blogger, now give your TITLE NAME a name, for ex. "blogbutton", "blog", title of blog, name of your company, etc.) and insert it where it says "TITLE NAME".

8. Now, take the DIRECT LINK code from the image in Photobucket you pasted in your texteditor/notepad, and paste it into the code where it says "http://IMAGE WEB ADDRESS"/> .

9. Click SAVE and you're done! You should now have your image with a text box underneath it for people to copy and paste!

You can copy & paste this code to put on your website too! Now you have your very own button!!

♥