Friday, October 21, 2011

Button up!

Call it 'blowing my own trumpet' if you feel compelled to, but I now have a button that I stitched up for this blog all by myself and I am dying to tell y'all how I got it done!

After burning the midnight oil on many, many, many... you know... midnights (ahem), I finally stumbled upon the formula for a fool proof solution and this is what it is.

1. Grab a cuppa steamin' hot chocolate and throw some marshmallows into it. This is the most critical step and you will do well not to skip it.

2. Settle down in your barcalounger and turn on some J.Lo if you please.

3. Begin with an image of your logo, your self, your little toe, your dog, Michelle Obama's arms or whatever else rocks your socks. This should ideally be a square of a size less than 150 pixels on each side because larger buttons can result in their sides being cut off by the ruthless, evil enterprise called Blogger. Of course, in that vein, you can also make it a rectangle of width 150 pixels and height 150000 pixels. But what would you do with that, huh? And anyways, a button is a button is a button. Small and cute. It is not a stick.

I did mine on Photoshop but you can use Picnik or Pixlr or any other photo editing software.

4. Now you need to upload your image on the big bad world wide web through an image hosting website such as Picasa or Photobucket. Once this is done, you can easily find the URL code for the image. In Picasa, you simply need to right click the uploaded image and select Copy Image URL. You will need this URL in the next step, so hold your horses!

5. Copy the following code and replace yourblogURL with (duh!) the URL of your blog and yourimageURL with the Image URL from your uploaded image (Step 4). (The quotation marks are necessary.)

<a href="yourblogURL/"><img src="yourimageURL" /></a>

For your reference, this is what my code looks like.

<a href="http://ephemeralwhims.blogspot.com/"><img src="https://lh6.googleusercontent.com/-ka11siOkR8A/TqBdbHg5dmI/AAAAAAAABxM/ZhySFoctDKw/s128/button.jpg" /></a>

6. In your blog, choose Design, and then choose Add a gadget, and then choose HTML / Java Script. Write whatever you fancy in the 'Title' area and in the 'Content' area, paste the HTML code from Step 5. Save it.

This is what my HTML page for the image looks like.


Now if you go and look at your blog, you would have the title and the button image displayed on it.

7. Pat yourself in the back and go get yourself some Mai Tais. You deserve it at this juncture.

8. Now you need to create the text area for your button so that people who want to grab your button can actually grab it. For this you need to again go to Design, and then choose Add a gadget, and then choose HTML / Java Script. Leave the 'Title' blank and in the 'Content' section, add the following code. 

<textarea rows="4" cols="20">

Then paste in your HTML from step 5 and close with

</textarea>

This is what my HTML page for the code looks like.


Save it and you're done!



There you go, now you have a button for your blog and you're all set to be fabulous!;)

I sincerely hope that I haven't addled your brain further with needless trivia. If you do make yourself a button, please do let me know! I would love to exchange some buttons with you! [Wow! That does not even sound creepy!]

Toodleoo!

5 comments:

  1. love ur button... its so cute! thanks for the detailed post on how to do it!

    ReplyDelete
  2. Thank you Sarah!:) I hope you make a button for yourself. :)

    ReplyDelete
  3. If you hear loud cursing from the other side of the planet....that is me as I try and make a button this weekend. I will let you know how that goes for me.

    ReplyDelete
  4. Ha ha. I'll just use earplugs! But if you need help, just holler! I'll be here, doing nothing as usual!:)

    ReplyDelete
  5. awesome sarah! thanks for this button tutorial :)

    ReplyDelete

Thank you so much for being here. You must know that I love reading your comments more than I love the idea of baby bunnies eating frosted cupcakes sitting atop a cloud. They make me happy when skies are blue, yellow, pink or grey. ♥