Blogger Design: Making Sidebar Buttons.

So, I just had a question in class about some things on my sidebar, in particular, the buttons.

This is going to be an easy, yet somewhat lengthy lesson on how to make these buttons. This is an easy way to connect your readers to your social media sites or within your own sites.
Here goes:

1) These buttons are images to begin with! Who knew?!
So make your pretty little button in photoshop or your software of choice and save as a .jpeg or .png

*HINT! If you make your image with a transparent background, YOU HAVE to save it as .png for the transparency to work.
*Hint! Make your image the size of your sidebar minus 10 pixels. (Ex: my sidebar is 310 pixels, so I make my buttons at most 300 pixels wide).
*Hint! Is this font too boring for you?? Download your own at dafont.com!


2) Upload your photo to a photo-hosting site such as photobucket.com
3) After you've uploaded click and copy the "DIRECT LINK"  under your image.

4) This step will be the most important step of your life, it will change EVERYTHING!! (okay, I'm exaggerating, but it's pretty neat.) The following code will be the html for your image. 

<a border="0" href="Where you want your readers to go after clicking this button" target="_blank"><img src="yourimagedirectlinkURL"/></a>

So for example: in the first set of "" I would put the link to my facebook account, and the second is the direct link to my image. Here is my code: 

<a border="0" href="http://www.facebook.com/pages/Sincerely-Kylee/207198959333654" target="_blank"><img src="http://i1131.photobucket.com/albums/m544/sincerelykylee/BlogButton_1.png"/></a>

*Hint! Anytime I make my own buttons (or anything that requires some coding), I save it in a word doc to have it for the future. It keeps me from making a million buttons. 

*Hint! With this bit of html you can basically link an image to whatever you want! Try linking within your own site to your favorite post or a search label option. Whatever is in the top in the browser bar is what I put into the first set of quotation marks. :) 

5) Final step! Copy your code and place it into a "HTML Widget" in your blogger sidebar. 

Then, you get something like this:

*Hint! Save it!!!

Well, there you have it! Go now, and become designing divas. I mean, you're practically a graphic designer after accomplishing that feat!