#ContactForm1 { display: none ! important; }

Friday, May 1, 2009

HTML Class 101- Making a Button

I learned a new trick! (go ahead, click on the socks... you know you want to)

Liana Brooks

I have discovered how to reprogram a button for html to post on a side bar or to let your friends have to link to you. Nifty!

What You Need:
- The web address you want people to go to
- A picture with a web address (load one onto Flickr or Deviant Art and then right click "View Image" and it will give an http/jpg address)
- About ten minutes to play with settings

The basic HTML looks like this:

[a href="http://lianabrooks.blogspot.com/2008/01/liana-brooks.html" onclick="" target=_blank][img src="http://th02.deviantart.com/fs39/300W/i/2008/338/0/a/Funky_socks_by_DangerousMeg.jpg" width="165" border="0" title="Liana Brooks" alt="Liana Brooks" /][/a]
Open notepad on your computer and copy and paste the HTML above into it.

Replace every square bracket [ ] you have with the alligator mouth's < >

Replace the Green text with your target address.

Replace the Purple text with your picture.

Replace the Red text with your title.

Open your blog's layout page, add a HTML gadget, and paste your new HTML inside.

Ta-Da! You should have a fully functional button.

Now all you need to do is customize the picture to be your perfect button. :o)


  1. L--you are totally the queen of coolness! Thanks so much!

  2. Very cool. Only...I might need extra tutoring to understand this. What can I do with it? I'm so confuzzled...

  3. Advertising is the main purpose. You make a button for your review site and have other people post it so that instead of a link saying "Yuna Reads Books" you have a nifty bright button. People click the picture and come to your site.

  4. Liana, that is so kool! Now, do you know how to combine mirror images of a picture into one image? Help! My blog looks blah in it's new format without a header picture. :-(

  5. This is so fantastic! I'm taking notes - thanks :) Now the question is can I really do it or will I make a mess of things?????? Wish me luck!

  6. Amy- Think of it like biohacking and creating a custom virus. You take the basic form of the HTML and insert the genome you want. In this case, take out the web address for my bio and insert the web address for your blog. Take out the JPG address for my socks and put in yours... it's really very easy :o)

    Tess- You'll be fine!

    Frances- mirror images? Maybe in a photo manipulation program but I don't know if I could program is in HTML. Let me see what I can come up with over the weekend.

    Dani- Glad you love it!

  7. This comment has been removed by the author.

  8. Sorry 'bout that. Finger dysleic, and the post came out really wierd.

    Liana, this bio-hacking thing is too scary. LOL, Seriously, I have MS Digital Image Suite 2006 and Photo Shop 2. Funny, I can do some stuff, but this has stumped me.

  9. Frances- What part has you stumped?

  10. Liane, I can't seem to be able to make two images stick together into one image. Gee, I feel so mentally challenged right now. Too late at night, I guess. I can't even decide if I want to keep the new stretch format of my blog or go back to the old narrower format. The narrower is actually easier for me to read. What I'd really like is a three column format, but Blogger doesn't offer one in their templates. I like your set-up, but I want to keep things simple. :-) Famous last words.

  11. There's a website: http://tips-for-new-bloggers.blogspot.com/2007/02/three-columns-blogger-template.html

    That has 3-column minima templates.

    You can find others by cruising through Google.

    Installing a new template isn't too hard. Just be sure to save your old template onto your computer first because you might lose widgets. You can get them back, but it's a bit or work doing a copy and paste from the old template to the new one.

    Make sure you set aside enough time for it.

    For pictures... ask Lady Glamis if there's a good photo manipulator you can download. It sounds like you need to work with the picture on your computer and then reload it onto the web.

  12. Thank you Liana. Ya see, it all goes to show, it's not what you know, but who you know. :-) I appreciate the help.

  13. Nifty. Thanks for sharing. I thought I was doing all right by just knowing how to to italics and bold.