January 7, 2011

Tutorial: Customizing your button bar

If you'd like to have your own customized buttons on your blog, you will need to design your button first. I used Thistlegirl Designs to create mine. I made 6 buttons for my webpage and resized them to fit on my page neatly.

Once you have your buttons designed, you will need to upload them to an image site (such as imgur), which will generate code for your image.




Next, you will need to decide where you would like to place your buttons. I put my button bar right under my header (click where it says Add a Gadget, as shown in the image to the right).

Once you click Add a Gadget, you will see a menu. You will need to select HTML/JavaScript, as shown below:
I entered the following code to create my buttons:

The green represents the link you will put in. So if the button is for "home", you will enter the code to your homepage.

The blue is the link from imgur, where you uploaded your image.

To create the 6 buttons, I entered this code 6 times, one right after the other. I then entered the specific links needed for each button. The buttons should line up side by side once you have done this.

6 comments:

  1. I need differentiation! I don't seem to understand how to make the buttons. I have pages on my blog. I was trying to get the page links to look like your buttons. This must be two different steps. I am a member of Thistlegirl too. Will you assist me?

    www.saouds2ndgraders.blogspot.com

    ReplyDelete
  2. Hi Mrs. Saoud,
    I will be happy to help...I will send you a more detailed message tomorrow morning (I hope it will be of help!)

    ReplyDelete
  3. Hello Ladybug! I´m trying so hard to make my blog... it is a very new thing where I live, but I wanted to do it right, so everyone else can realize the importance of blog.
    My blog is new, but I want it to have the buttons thing before I start, so can I organize the information, or a need to have some things posted in the blog before I started.

    Margarita (from Bogota, Colombia)

    ReplyDelete
  4. Thank you for this easy tutorial. I knew it couldn't be hard but everyone was making it so complicated! Thanks so much!

    ReplyDelete
  5. I DID IT! I made my own buttons! this is so exciting, Kristen. Thanks for your help...AGAIN!

    ReplyDelete
  6. Hi, I'm trying to make my own buttons...but seem to be running into trouble!! I can make them and post them (in a row) on my blog but there's a HUGE space between the buttons and my first post. Is there a reason why it's doing this?

    Also, I made a button on the side with my blog pic...shouldn't a code be appearing below that people can copy? I don't see it either.

    Thanks.

    Laurie
    http://firstgradelyonsden.blogspot.com/

    ReplyDelete