How do I add a button to my sidebar? *Updated*

Sidebar links are a great way to share link love and show things that are important to you. Let's practice with the Blogging Basics 101 button, shall we? I know you all are just dying to have our button on your sidebar. We'll name our first monkey after you if you put our button on your sidebar. Promise.

Before we begin, you need to have the graphic you want to put on your sidebar. In this case it's our Blogging Basics 101 button. Follow these instructions to download our button and save it on your computer (this way you don't pull from our bandwidth and we're both happier).

1. Right click the image below.



2. Choose Save As from the menu.
3. Choose where you would like to save the image on your computer and click Save.
4. For Typepad and WordPress you can use the image straight from your computer; Blogger users will need to upload their photos to a secondary host (e.g., Flickr, Photobucket, etc.).
5. Follow the directions below for either Typepad, Blogger, or WordPress.

Typepad

1. Log in to your Typepad account.
2. Click on Control Panel > Files.
3. Over on the right will be "Upload a New File". Browse for the image on your hard drive and then upload it.
4. After uploading the image, click on the image filename (now in the main list) to view it in your browser. Your browser's address bar will show the URL for the image, such as http://example.typepad.com/image.jpg. Copy the code from the address bar.
5. Click the "Typelists" tab.
6. If you already have a Typelist for things in your sidebar find that list and click on it. If you do not have a Typelist, you can follow these instructions from Typepad.
7. Click "Add a new item".
8. In the "Link title" paste the URL for the image that you copied in step 7.
9. Now edit the URL so that it looks like this:
   <img src="http://example.typepad.com/image.jpg">

(The "http" part should be the URL you copied in step 4.)

NOTE: Do not forget the quotes at the beginning and end of the URL or it will not work.

10. In the "link URL" box enter this URL: http://www.bloggingbasics101.com
11. Click "Save item".

Tah dah! It should be there now.

New Blogger:

1. If you haven't already, upload your image to a secondary host (e.g., Flickr, Photobucket, etc.).
2. Determine your image's URL and copy it to the clipboard.
3. Log in to your Blogger dashboard.
4. Click on "Layout".
5. Click on the "Template" tab, then click on "Page Elements".
6. Click on "Add a Page Element".
7. Scroll until you find the "HTML/JavaScript" option and click the "Add to Blog" button under it.
8. Type the link code into the "Content" field. (You can leave the "Title" field blank.) Your code should look like this:

<a href="http://www.bloggingbasics101.com"><img src="http://www.example_image.jpg"></a>

(Remember to change the img src URL to the URL you copied in step 2.

NOTE: Do not forget the quotes at the beginning and end of the URL or it will not work.

9. Click "Save Changes".
10. Click "Save".

"Old" Blogger:

(Thanks to Desert Diva for writing up this info so I didn't have to!)

Placing the graphic in a new post:

1. Create a new post.
2. Insert the Blogging Basics 101 image and publish the post.
3. View your blog.
4. Click on the Blogging Basics 101 image. It will take you to a page w/ just the image.
5. Copy that URL from your address bar.

Now let's add that button and link to your sidebar!

1. Log in to your account, click on your blog.
2. Click the "Template" tab.
3. Scroll down, almost to the end of your template. I'm going to assume that you want to put the button underneath your archived posts. Look for some text that looks like this:

    <MainOrArchivePage>
  <h2 class="sidebar-title">Archives</h2>
    <ul class="archive-list">
         <BloggerArchives>
        <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
      </BloggerArchives>
  </ul>
  </MainOrArchivePage>

4. At the end of this text you want to copy and paste this block:

<a href="http://www.bloggingbasics101.com"><img src="http://THIS TEXT WILL BE CHANGED"></a>

5. Replace the part that says THIS TEXT WILL BE CHANGED with the URL from step 5 above.
6. Click Save and view your blog.

WordPress

(Thanks to http://bringinggoodhome.wordpress.com for sending in these instructions!)

1. Go to 'write new post.'
2. Upload the picture you want to use.
3. Go to 'Manage' and then 'Uploads.'
4. Click on the picture you want. See the URL for the image location.
5. Copy the URL (highlight, control 'C')
6. Go to 'Presentation,' and then 'Sidebar Widgets.'
7. Add a text widget.
8. Enter your code like this:

<a href="www.insert-internet-destination-here.com"><img src="http://www.paste-image-url-here.com"></a>

9. Close the text widget and save.

Don't forget to visit Desert Diva and tell her thanks for letting us use her instructions! It was quite generous of her and we really appreciate it!

Comments

[Tirzah]

Okay, I am not getting this. I understand, but it is only doing a link with one of those little white boxes with an "X" in it... Does it work differently in the new version of blogger or something?

[Karen C.]

Hmmmm.... for me, this makes a picture in my sidebar, but I see no explanation of how to make this button clickable, and having it open a window to a new website. I am using new Blogger. Thanks.

[Jodie]

I'm having the same problem as Karen. I've uploaded the picture of the button in my sidebar but am unable to click on it and connect to the button's site... PLEASE HELP!

[Nancy]

I'm in the same boat as the above comments. Something's missing in the new blogger instructions to get the button to link.

[Elizabeth]

I also followed these instructions and ended up with a non-clickable picture.

I succeeded in linking my button to it's site by choosing html/java script as the PAGE ELEMENT that I am adding.

I uploaded my button to image shack to get a URL, and then used the instructions given for Old Blogger, (the code in Step #4), for posting my image as a link. Yay! I don't know html so I'm always very happy to find the code that I can use. Thanks guys.

[Veronica]

For mac users who have no right-click, you hold the ctrl key down while you click and choose the "save image to desktop" option.

[BeadKnitter]

Thanks so much for this info. I am trying to learn html, but it is coming very slowly to my anti-computer language programmed brain. I have put 3 linked buttons on my blog. So cool!

[BeadKnitter]

Thanks so much for this info. I am trying to learn html, but it is coming very slowly to my anti-computer language programmed brain. I have put 3 linked buttons on my blog. So cool!

[Dawn]

Thank you so much for this. It is so simple the way you explained it. I can't wait to add more buttons now.

[The Lazy Organizer]

Thanks for doing this so I didn't have to! I hope you don't mind that I linked to you and copied some of your code to show how to change the size.

[Lynn]

OK, I have old blogger. I put the button in a different blog as the only thing on the post. I clicked on the button and got the URL. I posted it into my template. The button shows up on my sidebar, kinda... it's there but the picture is an "x" and you can't get it to show. What am I doing wrong?

[Dawn]

I think I'm naming my first monkey after YOU b/c you are making life SO much easier on me! I lurve you!

[Barb]

I am trying to insert clickable links into my blog message.
When I follow the prompt, at least I think I am following it properly...the link is highlighted on my blog page. When it is clicked, a page appears that says the link can not be found. Any help for me available? Thanks.

[kathy kolacz]

hope this works

[jubilee]

Thanks so much, it worked! This info blog has helped a newbie not feel so, well, like a fish out of water

[Nicole]

Thank you so much! This is perfect.

[Cyndy]

Do I hafta have Flickr or Photobucket to make this work? I've got the picture of the button on my side bar but it isn't linked to anything.

[Alicia]

Thanks you were a big help Got it done