Adding a custom email button to your blogger sidebar

Hey friends!  I wanted to share a little success I had over the weekend creating a new email button graphic for my blog.  I'm so tickled that my email button has successfully appeared in my side bar I want to share it with you along with the how...

Isn't she cute?  The cool vintage typewriter image came from the Graphics Fairy.  I added some basic written words and saved it all as my new .jpg image and ta-da!  New image to use as a button!  You can use any image you have on your computer to create your button using the steps I'm going to share with you.  If you like mine, feel free to save the image to your computer and use it.  It would be my pleasure to share.

(The following instructions assume you already know how to upload a photo to an online site like Flickr and that you know how to add a gadget in the Blogger design page)

First you will need to save your image from your computer on a photo sharing site like Flickr.  Once I had my image in Flickr, I could click on it and it will bring up a set of buttons like you see above.  You are looking for the "share this" drop down tab I have circled in green.

The Share This button will display the above options.  Click on the "grab HTML/BBCode" that I have circled in green.

Once you click that button, your HTML will display.  Choose the image size that you want the code for in the drop down box I have pointed to with the green arrow.  After you have chosen the size you want, HTML code for that size will display in the box above.  Copy that code to use in your blogger design page.

Open your Blogger dashboard and click on the "Design" tab.  Your design page should look similar to the above.  Click on "Add a Gadget" that I have circled in green above. 

When the gadget window pops up, chose "HTML/JavaScript" add button that I have circled in green.

In the add window above, paste the HTML code you copied from Flickr into the box.  To also add a clickable "Email me" button, type the code shown at the bottom.  You will need to change the area in green above to reflect your own email contact.

You will need to customize the html code with your contact email in the area I show in green.  I also underlined areas in the Flickr code in RED above.  Due to the size of my sidebar, I needed to adjust the height and width of my flickr image.  Yours may work copied directly from Flickr.  But if it doesn't, edit the height and width numbers here in the box above as I did.  To see how things look, click save and open your blog to see your handy work.  Adjust image size if needed and also drag your button to your desired location on your Add and Arrange Page elements design page in blogger to get it just right.

Got it?  Hopefully my explanation made this process easier not harder  ;) ...after all, paper is my specialty not html code!  Hopefully though, if you are a visual learner like I am, the photo pictorial above gave you some pointers to try this out.  I always figure, if I don't like the way the button looks in my sidebar, there is always "delete" and try try again! 

Happy monday friends!  Thanks for hanging out with me!