Blog Button Semi-Tute and Sponsorship Swap

Have you ever accomplished something and looked back and had absolutely no idea how you did it?
Welcome to my relationship with html:) [For all you non-bloggers, that's the computer code you use to make magic happen on your blog...links and clickables and all that jazz.]

Out in bloggy-land there is a sponsorship swap going on. Basically, it's a way for smallish blogs to help spread some love to other similar smallish blogs. I put your button on my blog, and you put mine on yours. And I really wanted to play along...I mean REALLY!

Unfortunately, that means that you have to be good enough with html to make that whole button and grab box thing happen. HA! With the help of a new bloggy-friend, Rachael (that's her over there on the sidebar at Imagine Gnats, so go say hi!), I managed to get the crazy thing functional. But, I have no idea how I did it! NONE! Really!

But, I'm quite certain that I'm not the only html-hating bloggy gal (or guy) out there, so I'm gonna try to help y'all!

So for you fellow html-clueless...here's kinda how I did it.

1. You need a square image. I'm a photoshop girl, but for this I highly recommend photobucket. It's just way too simple to make a cute one and get the codes you need. It also cuts out a step because you do the edit right on the host. And if you have no idea what I'm talking about it's ok, I don't either...but, here's what you do.

1a. Find a pic of something that relates to the content of your blog. I chose the pic of the fabric rainbow I'm using in Belle's bedroom (that is - yes- STILL unfinished). It is colorful, fun, a decent photo, and hints at the content of my blog.

1b. Upload that pic to photobucket...you will need to create an account if you don't already have one.

1c. Crop that pic to as close to square as you can. Then be sure to save a copy and work from the squared copy. That preserves your original image so you don't have to upload it again.

1d. Add your text by using the decorating tab. It's super easy and pretty self-explanatory...just click around until you get something you like. You can also play around with the other tabs to make changes...I think I sharpened the image, but that was all...but there are some fun things you can do:)

1e. Save all those edits.

2. So you have your square image...great! I wish I could tell you that was the hard part....but, sorry. No. Now you need some code. I would love to just be able to give you the exact code I used, but I'm pretty sure I messed it up somehow because blogger changed what I typed after I saved it. And unfortunately, I have no idea what I did wrong, what blogger changed, or how to help you use the code that is embedded in my button. So instead, I'm going to tell you how I got to where I am and we will hope that it works for you too! I am completely convinced that the html deities just sit around all day and arbitrarily give you a "WORKS," or "NO WAY LADY!" response depending on their mood or what they had for breakfast. So I really will keep my fingers crossed for you.

2a.Anyway...go into your design tab if you're on blogger...or wherever you make changes to your blog. Open up a text widget...in blogger you click Add a Gadget and select Text from the list.

2b. Then hop over to The Little Hen House and check out the post on button making. There you will find the code that I started with. Go ahead and copy and paste it into your text widget.

2c. Then it's time to make it work. You will need to edit the code you just pasted to include your own links. You will know your blog URL (be sure to include the http:// business). When you need to input the code for your image, photobucket is going to come in really handy. Swing back on over to your image and you will find a little box on the right hand side. Click in the boxes to copy the html code, the img code, or the direct link...depending on what your particular code asks for. There are different codes for different hosts.

2d. Cross your fingers and click save.

3. Now it's time to test it.

3a. Test one...is it there? Yes - Good!

3b. If you click on the pic does it link you back to your blog? Yes - Excellent!

3c. Copy the code from the grab box. Create a new html widget on your sidebar. Paste in the code and save it. Now view your blog. Click on the NEW button...does it link you back to your blog? Yes - SUPERCALIFRAGILISTICEXPEALIDOCIOUS! You did it!

4. Now for those of you who answered NO to one of the above questions...that was me. About 600 times. I actually broke out in a sweat trying to make this thing work. If you're totally stuck, feel free to shoot me an email or leave a comment here and I will try to help...notice I said, "TRY." I really want to help. I do. But, I think I was pretty clear that I have no idea how I actually made mine work, so my assistance will be limited. But, I will try!

Good luck and let me know when you're ready to SWAP!