Pages

Wednesday, October 5, 2011

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 :)


5 comments:

  1. (found ya on a link party)
    I just recently made a button.. and I was beyond excited too! Our button post

    Have you used picnik.com before? Thats how I made mine. You upload a picture and then it lets you scale it down and do all kinda of cool things. If you need any help feel free to email me!

    Congrats on the button!

    ReplyDelete
  2. Thank you so much! That was my goal for the week to figure out how to make a button. You just made it so much easier for me. :)

    ReplyDelete
  3. Great work girl!! Working with html code can be frustrating!! So glad there's some people who love workin' with it!!
    Thanks for linking up to Show & Share!!

    ReplyDelete
  4. Hey, I was looking for blogging help and I stumbled upon this site! Congratulations and thanks for the information, I intend on taking some computer training classes, but for now I'll just use google and other peoples' blogs!

    ReplyDelete