Blog Buttons

We've had a few people ask us how we make Blog Buttons! So, here's what you do! (or more specifically what WE do) And this is the GRAB BUTTON with the text box so others can add it to their pages. Just to clarify ;) And also this is only for BLOGGER not Wordpress..

FIRST: You're going to start with a program like Photoshop, or we use a FREE program called Paint.NET. You're going to click on File--New-- then create the size of your button (any size and shape you'd like) After you've created the size you want, click File--Save as--scroll down on the "save as type" and switch it to a JPEG, Then click SAVE! And your done with the first part.


SECOND: I personally use Picnik to create my buttons because it is SO EASY! What your going do from here is Upload your photo to Piknik, click on Create and CREATE AWAY! You can play with colors, fonts, stickers, frames, whatever your little heart desires! Then when you feel like it is JUST the way you like it, you click the "Save and Share" tab. You're done with step two! YAHOO


THIRD: What you're going to do is head on over to PHOTOBUCKET. If you already have an account, great. LOG IN. If not, get your account going! Once your all logged in, you upload your photo, click on "save and continue to my album" and there is your perfectly made button! (You'll keep this page open, you will need it in a Minute)


FOURTH:  In your blogger under "Layout", you need to "add a gadget". Choose the HTML/Javascript. For the Title you get to say whatever you'd like {Grab our button here}. THEN in the Body of Text box you add this code:




<center><a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center>

So I've highlighted the areas that need to be changed. 
In  PINK you add your web address in both places
trulie-scrumptious.blogspot.com In ORANGE you add your BLOG TITLE {Trulie-Scrumptious} in both locations
In BLUE you add your Image Web address which is what you get from PHOTOBUCKET. Go back to your uploaded Button and underneath that, you're going to COPY the IMG CODE, then paste it in Both BLUE areas.

So here is what it will look like:

<center><a href="http://trulie-scrumptious.blogspot.com/" target="_blank" title="Trulie-Scrumptious"><img alt="Trulie-Scrumptious" src="http://i373.photobucket.com/albums/oo174/rozalynnrowbury/tssistersbutton.jpg"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://trulie-scrumptious.blogspot.com"><img border="0" src="[IMG]http://i373.photobucket.com/albums/oo174/rozalynnrowbury/tssistersbutton.jpg[/IMG]"/></a></center></textarea></center>

*Notice the  [/IMG] in front and at the end of the code? If this is there DELETE it. But make sure you ONLY Delete exactly [/IMG] and nothing more. And then you are good to go! If you have any other questions or for some reason it's not working for you, Please let us know and we'd Love to help! WHEW!!! If you can survive that post, you can do ANYTHING!
Now that you've learned how to Button up, we'd Absolutely LOVE if you grabbed our button and put it on your blog page! Hope all you scrumptious readers have an amazing weekend..