I made a button!

So I have no formal computer training and I am so excited to have made a button!
Google is one of the best tools invented, ever.

I am a relatively new blogger and there have been, no doubt, many tutorials for this, but I could not find one easy complete tutorial, so here's my version.

OK so the button design is excruciatingly simple. Figuring out how to insert a squared character in an obsolete version of Word was the most time consuming part!

I first typed it out in Word, of course you could use a picture or graphic, anything really.

I printed it then traced over it for some reason, with a Sharpie?!?

I scanned it, saved it then uploaded it to photobucket.

Here's where google came in, "make a blogger button using photobucket"

You want to use the "direct link" code in the share box.

So I opened a new window and pulled up the Blogger design page,

1. add a gadget
2. HTML
3. Here's the important part, copy this HTML code:

<a border="0" href="http://a-cristy-craft.blogspot.com/" target="_blank"><img src="http://i1236.photobucket.com/albums/ff460/harriscolorado/c2button.jpg"height="125"width="125"/></a>

Replace the pink text with your blogs home page URL, Be careful the parenthesis are important.

<a border="0" href="http://a-cristy-craft.blogspot.com/" target="_blank"><img src="http://i1236.photobucket.com/albums/ff460/harriscolorado/c2button.jpg"height="125"width="125"/></a>

Replace the blue text with the URL of you image, this is the direct link code from my Photobucket image. Or whatever your image hosting site is.

Yes, there are 2 parts you are changing of the same code, the image address that you will see as the button and the link to your blog when they click on it.


Then to make the code available for others to use (the grab box) add another HTML gadget on the Blogger design page, under the button you just made. 

<textarea rows="4" cols="20"><a border="0" href="http://a-cristy-craft.blogspot.com/" target="_blank"><img src="http://i1236.photobucket.com/albums/ff460/harriscolorado/c2button.jpg"height="125"width="125"/></a></textarea>

Just copy the entire code of your button from above, and replace the green text with it. It will have the little scroll box around it.

This is a square button that fits nicely on the sidebar. you can change the size by increasing or decreasing both of the "125"'s. Just be aware that it will force and distort a non square image into a square.

I jumped around too many websites to give any one credit. Thank you cyber world and Google!
Anyone visiting here yesterday stumbled upon some pretty irregular stuff on the sidebar, gigantic button, lots of code instead of the button...until I was able to get the code just right, Yeaaa!!

Disclaimer, hopefully within the month I will have some professional help sprucing up the blog a bit. But it's a great feeling of accomplishment to know that I can do it!

OK I have played around on photobucket and here's one of my practice button pictures, in case the Super simple C Squared, left you wondering about my complete lack of abilities :)

I may be attending these parties 

 Friday

Tatertots and Jello, Miss Mustard Seed, Funky Junk Interiors, 

Saturday

I Heart Naptime,Be Different Act Normal

Sunday

I (Heart) Naptime, DIY Showoff ,The Girl Creative

Monday

Between Naps on the Porch, The Girl Creative, Skip to My Lou, The Graphics Fairy, Craft-O Maniac, Sumo's Sweet Stuff, Midwestern {sewing}Girl, 

Tuesday 

Carolyn's Homework, Tip Junkie, Today's Creative Blog, Home Stories a to z , My Uncommon Slice of Suburbia

Chef in Training

Wednesday 

Southern Lovely, Wicked Awesome Wednesday, LiLLuna,  Blue Cricket Design, Wow Us Wednesday, 

Thursday

Somewhat Simple,The Shabby Chic Cottage, House of Hepworths, Just a Girl, Delightful Order, Crafty Scrappy Happy