how to: blog button with code box

hey guys! i've been asked a few times how to put your blog button on your blog with the drop down code box (like below). so here is an easy step by step tutorial that hopefully helps you accomplish that task! for those that have never done this before, it can be a little complicated, but don't get frustrated because i'm hoping this little how to will help make it super easy for you. let's get started.

if you don't already have a blog button, you need to make one. if you aren't equipped with photoshop, there are a couple free photo editing/design sites like picmonkey & gimp to help you do that. it's easiest to square size your image to either 200x200 or something smaller. whatever you prefer. save your image as either .png or .jpg -- if you want your image to have a transparent background, save it with .png

<a href="http://emilyosborne-andloves.blogspot.com" target="_blank"><img alt="love me like you do" src="http://i1221.photobucket.com/albums/dd466/emilyosborne3/buttondemo.jpg"></a>

once you have you have your button, upload it to photobucket. this site generates codes for images you use on your blog. so if you don't have an account with them, sign up! it's completely free. and if you plan on doing more customizing to your blog, this is the perfect site to help you get the right codes you need. trust mama.

okay, so upload your button to your photobucket library. if it's not already, resize your image to the size you want. just my opinion, make sure it's not too big. if you want bloggers to put your button on their page, they probably don't want anything bigger than a 200x200 of your pretty smiling face. i mean, i would.. but they might not ;-)

now that you have your button sized appropriately, you'll see link options on the right hand side. you can either copy the DIRECT link now and paste it in a word document or keep the tab open until we're ready to come back to it. your choice.

head back over to your blogger layout. open a new HTML widget, this is where you are going to put your code.

copy & paste this code:

<div align="center"> <a href=”IMAGE DIRECT LINK” target="_blank"><img

alt="NAME OF YOUR BLOG" src="IMAGE DIRECT LINK"/></a> </div> <div

align="center"> <form><textarea rows="6" cols="20"><a href="URL OF YOUR BLOG" target="_blank"><img alt="NAME OF YOUR BLOG"

src="IMAGE DIRECT LINK"/></a></textarea></form> </div>

you need to replace all highlighted text according to you.

for example:

NAME OF YOUR BLOG is simply, the name of your blog. so mine would be "love me like you do". you can and probably should use spaces. but that is the only area of the code where you will want to put spaces.

URL OF YOUR BLOG is your blog url. say what?! haha i know.

IMAGE DIRECT LINK this is where your direct link from photobucket is needed. replace the highlighted text with your copied link. mine looks like this -- http://i1221.photobucket.com/albums/dd466/emilyosborne3/buttondemo.jpg

important! make sure you do not add any spaces or remove any of the code text besides the highlights. it will mess up the code and it will not work otherwise. even one extra added space will ruin it.. so be careful!

once you've done that, your gadget window should look like this...
(html form & rich text)

hit SAVE and you're done!

like i said before, if you've never worked with codes it can be a little confusing and frustrating. if it doesn't work the first time, trace your steps to see where you might've gone wrong or to save from confusion, start over completely.

if you need any help at all or have any questions/concerns, please ask! i'm here for you!

or if you want to forgo the process completely, i can design and add your button for you. check out my pricing page for more info.

i hope this helps!