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. bb101-150

  3. Choose Save As from the menu.
  4. Choose where you would like to save the image on your computer and click Save.
  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”>
  10. (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.

  11. In the “link URL” box enter this URL: http://www.bloggingbasics101.com
  12. Click “Save item”.

Tah dah! It should be there now.

New Blogger:

  1. Log in to your Blogger dashboard.
  2. Click on “Layout”.
  3. Click on the “Page Elements” tab.
  4. Click on “Add a Gadget”.
  5. Scroll until you find the “Picture” option and click the plus sign button.
  6. Type in the necessary information.
    • If you don’t want your graphic to have a text title above it or below it, leave the “Title” and “Caption” fields blank.
    • Type the URL of the blog or page you want the image to link to in the Link box (e.g., http://www.bloggingbasics101.com).
    • For Image, choose the “From your computer option” by click on the radio button beside it. Click “Browse” and find the file you want to use.
  7. Click “Save”.

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:
  9. <a href=”www.insert-internet-destination-here.com“><img src=”http://www.paste-image-url-here.com“></a>

  10. Close the text widget and save.

Comments

  1. 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?

  2. 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.

  3. 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!

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

  5. 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.

  6. 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.

  7. 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!

  8. 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!

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

  10. 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.

  11. 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?

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

  13. 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.

  14. hope this works

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

  16. Thank you so much! This is perfect.

  17. 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.

  18. Thanks you were a big help Got it done

  19. Are these directions still applicable?

  20. I tried to do it in WordPress, and I can get the widget on, but it’s too big for the column and the right half of it is missing. Can you help? Thank you!

  21. Let’s try that again. WP is trying to make my code into a graphic. Here is what I was trying to say:

    Rhapsodyinbooks, it sounds like your image is too big for the sidebar. You have two options:

    1. Use the width and height tags in your img src code. It will look like this:

    <img src="yourgraphic.gif" width=100 height=100>

    You can change the number of pixels in the width and height to whatever you need for your sidebar (e.g., instead of 100, type 250).

    2. (This is the better of your choices.) Change the size of your graphic to the correct dimensions in a grahics editor like Gimp or Photoshop and then reload.

  22. 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?

  23. Tips on fishes families:

    I think your issue may be the same as Rhapsodyinbooks above. Her graphic was too large for her sidebar.

    You have two options:

    1. Use the width and height tags in your img src code. It will look like this:

    <img src="yourgraphic.gif" width=100 height=100>

    You can change the number of pixels in the width and height to whatever you need for your sidebar (e.g., instead of 100, type 250).

    2. (This is the better of your choices.) Change the size of your graphic to the correct dimensions in a grahics editor like Gimp or Photoshop and then reload.

    I hope that fixes the problem!

  24. i am so confused – how do i determine the URL from the photo? I downloaded the image to my computer and then to photobucket, but I am lost as to the URL. I can even figure out how to put it in my blog, but not without the URL.

  25. I am unable to get photos to show up in my blog posts, when i type a new post there is a image icon you click on to upload images into the post but it never works, never and so I have no idea how to get the images to display so my posts are plain all the time no pics.

  26. Rita Sheppard says:

    I’m trying to add other peoples’ buttons to my sidebar. I copy their html but can’t post it in my sidebar. I’ve tried the add gadget feature but can’t get the button to add. Please help. Thanks!

  27. i’m lost at step #6 for wordpress blogs. I don’t see a ‘presentation’ button anywhere and then ‘sidebar widgets’ mine is hosted by wordpress but is and independent link. Does that make a difference?
    so far I can only create the link as a blog post in the center of my page. – not a widget that stays on the right hand side. Help!

  28. I did it, and now I’m going to post about it! : ) Thanks all!

  29. I can’t find the presentation button in wordpress! I want to add a button to my sidebar but can’t find the presentation button so I can’t finish the steps. I’m on wordpress by the war.
    Thanks,

    Liza

  30. *way

  31. Liza, thanks for your comment. It brings this old post to my attention and I can see it needs to be updated. I’m not sure when I’ll get to the updates given my current schedule!

    Here’s what you need to know. WP has updated a few things over the years and ‘Presentation’ is now ‘Appearance’. You want to go to Appearance > Widgets > then drag a text Widget over to the sidebar > enter your code.

    Hope that help!

  32. YAHOO!!! I can’t believe I did it all by myself. (see how I took all the credit!) Oh my Hubby is going to be so happy he didn’t need to do it for me. THANK YOU THANK YOU!!!

  33. Thankx a lot!! I did it….thanks again! CHEERS!!!!:)

  34. Melissa ,
    Thanks for the tutorial- I was able to create a button in my blog. I will appreciate if you can provide how to add a scroll bar below so that my followers can add my blog to their blog. Your help will be much appreciated. Thanks God bless

  35. I have a problem with my button on my blogger blog… If i put a photo(image) that have a transparent background , when i put it on my blog it’s a withe background /line around the image… What can i do? I tried whith different buttons :(…

    ps: Sorry for my bad english :(.

  36. Thank you! The directions work for me.

  37. THANK YOU!!! I am so glad I found your site…I had the image already uploaded into my wordpress blog, I just needed to code to add to the widget. Very simple and easy!! Thanks again!

  38. I’m having a hard time with this. I’d love to highlight some of my favorite blogs by adding their buttons but once I follow your instructions to do so, there’s no button added anywhere to my site :( I’m using the flipcard style blogger, I love the way it looks, how organized and clean it is buuuuut I don’t love that it’s not adding my buttons anywhere :( please help?

  39. Hi guy’s

    Does anyone know how i can add blogger.com button to my site to link up my existing blog?

    I would really appreciate it any help .

    Thanks
    Darren

  40. Thanks so much for the post! Worked perfect for me!!

  41. Reformamos toda clase de interiores como cocinas, baños, garajes, etc, con unos acabados elegantes y de calidad, tanto en los alicatados como en los enlucidos de yesos, en acabados de piedra, etc.

  42. Big thanks to you and your site!!

  43. Thank you for sharing! I’m very new to blogging and this helped me a lot. Can’t wait to start adding more buttons!

  44. What is the advantage of putting someone else button on your site? I have done it but for my own convenience.

    • Sheila,
      Personally, I don’t see a huge value to it unless you’re just trying to draw attention to a friend’s site or to advertise something. However, there are many people who like to use the buttons of others as a sort of blogroll (sites they like).

      When blogging was just starting to gain traction (think 2004-2007) many people would share buttons with each other to get more visibility. Now, some sites use it as a promotional tool for giveaways, etc. For instance, when I used to host a quarterly giveaway linky, I required that participants post my button with a link back to the giveaway.

Speak Your Mind

*

css.php