Life in Rehab is BACK! Get ready for a slew of new projects for the new year! We just can't promise we know what we're doing!

Visit Life in Rehab's new Etsy shop
And because we're good friends by now,
our readers get 25% off
by entering the promo code
REHAB when you make a purchase!
So deck out, do some early holiday gift shopping,
strut your stuff and make a statement!


I'm on a mission. If I have never EVER not once replied to your comments, you may want to check this out: No Reply?



Friday, May 21, 2010

How to Make a Blog Button











I've noticed whilst wallowing around the interwebs that quite a few very fine blogs are missing cool buttons for their virtual friends to grab. And I do recall what a mystery those things were to me at one point. So since I am STILL without my computer at home (yes, REALLY), I thought I'd pass on the quick and easy tutorial on how to set yourself up with one of those bad boys.

Before we get started on the actual html code there are somethings you will need to do first:
  • First, you need to create an image. You'll notice mine is a slice of the banner. There are several websites that specialize in buttons if you don't have photoshop. Google "Blog buttons or chiclets" in order to find these websites. Then just save your image to your hard drive.
  • Next, you will need to upload your image from your hard drive to the internet. This is simple; just upload it in a post on your blog. You can also use Picasa, photobucket or Flicker.
  • You now will need two URL addresses to insert into the html code. The first address is the site you're linking to. The second is the address where your image is located on the web. (To find this address, click on the image in your published post. Then right click on the image, scroll down, click on properties and copy the URL address.)

Now we are ready to create the html code and to install it on your blog.
  • Go into the layout section of your blogger account and create a new Gadget.
  • Choose HTML/Java Script.
  • Copy the code below and paste it into the text section of your new HTML/Java Script Gadget.

URL address you're Linking to">URL address of your uploaded image"/>


  • Replace the sections in red with the two URL addresses you just grabbed.
  • Click save.
 Now...





  • Code for Adding a Blog Button with text Box Underneath for Code
     
    Code for Adding a Blog Button with text Box Underneath for Code
    Once the code is properly formatted (with < and >), you need to replace the generic information with your information.

    Replace the YOUR WEB ADDRESS with the address of your blog.

    Plug in your blog's title where indicated and go back and copy the image web address and paste it in the correct location.

    Make sure you delete all of the generic information. Your code should now look like the code in the photo to the left (click on the picture to enlarge). The colored information should all be replaced with your specific infromation.





    ·  9
    Save this gadget and position it where you'd like it to be.





    ·  10
    Save your changes and click View Blog.





    ·  11
    Click on your button to make sure it takes you to the home page of your blog.

    It's also a good idea to copy the code from the box and try to add the button to your blog.

    To do this simply highlight and copy the code from the text box that is now visible on your blog. Then under Layout, add a HTML gadget and paste the code into the text box. Save changes and view your blog. This "new" button will not have the text box underneath (this is what your button will look like on other people's blogs.) Click on the button to make sure it brings up your blog's homepage.
     
  • Rock on with your new button!
Easy, right? And you may have noticed I like to grab people's buttons for a little bloggy promo love, so let me know if you make one and I'll happily pop it in the side bar!









11 comments:

Heather{Our Life In a Click} said...

Thanks for this! I know I have to get around to making one of these buggers!

-heather

Unknown said...

Great button tutorial. I know I've been lazy as far as a button is concerned, too - it's probably about time I made one! :)

~Chelsea

Sawdust Girl said...

Hahaha. I'm working on it but it's the graphic that's holding me up. :-( Thanks for the info!

Life in Rehab said...

You're very welcome guys! I suppose I should make one a little less, shall we say, controversial?

Nahhhhhhhhhhhhhhhhh.

Unknown said...

Hahaha.. nah, I love your button just the way it is! :)

Erin @ The Little Apartment said...

thanks for posting this! I have been procrastinating.... sigh!

Life in Rehab said...

If I can figure this out, anyone can!

Stephanie Sabino said...

Okaay...I'm gonna try this. New blogger here!.

Stephanie said...

Great! That was fun.

Heather{Our Life In a Click} said...

I did all this just to make the button. Now how do I show the html code in a box below it? This is a second step, no?

Firedancer SST said...

Hi Sunny I am finally getting to the button I had so much in my email box that I did not see your message got behind in checking mail and you know unless you scroll down you miss out. Anyway I looked back at the post that I sent you in your blog and saw that you said for me to check my email. Thanks so much for taking the time to help me out I will let you know when I get it done.
This past weekend I was working on a piece to honor women and cancer. So that took most of my time.
Bless you , Soroya