Skip to content

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: https://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., https://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.

45 thoughts on “How do I add a button to my sidebar? *Updated*”

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

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

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

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

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

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

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

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

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

Comments are closed.