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).
- Right click the image below.
- Choose Save As from the menu.
- Choose where you would like to save the image on your computer and click Save.
- Follow the directions below for either Typepad, Blogger, or WordPress.
Typepad
- Log in to your Typepad account.
- Click on Control Panel > Files.
- Over on the right will be
“Upload a New File”. Browse for the image on your hard drive and then
upload it. - 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. - Click the “Typelists” tab.
- 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.
- Click “Add a new item”.
- In the “Link title” paste the URL for the image that you copied in step 7.
- Now edit the URL so that it looks like this:
<img src=”http://example.typepad.com/image.jpg”> - In the “link URL” box enter this URL: http://www.bloggingbasics101.com
- Click “Save item”.
(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.
Tah dah! It should be there now.
New Blogger:
- Log in to your Blogger dashboard.
- Click on “Layout”.
- Click on the “Page Elements” tab.
- Click on “Add a Gadget”.
- Scroll until you find the “Picture” option and click the plus sign button.
- 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.
- Click “Save”.
WordPress
(Thanks to http://bringinggoodhome.wordpress.com for sending in these instructions!)
- Go to ‘write new post.’
- Upload the picture you want to use.
- Go to ‘Manage’ and then ‘Uploads.’
- Click on the picture you want. See the URL for the image location.
- Copy the URL (highlight, control ‘C’)
- Go to ‘Presentation,’ and then ‘Sidebar Widgets.’
- Add a text widget.
- Enter your code like this:
- Close the text widget and save.
<a href=”www.insert-internet-destination-here.com“><img src=”http://www.paste-image-url-here.com“></a>
Related posts:
- Facebook Video Feature: Create or Upload Video to Your Community Facebook is a great way to share information with your...
- Microblogging Tool: TypePad Micro BlogHer.com did a short series on mini-blogging and some of...
Related posts brought to you by Yet Another Related Posts Plugin.
WordPress Admin
{ 28 comments… read them below or add one }
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?
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.
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!
I’m in the same boat as the above comments. Something’s missing in the new blogger instructions to get the button to link.
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.
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.
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!
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!
Thank you so much for this. It is so simple the way you explained it. I can’t wait to add more buttons now.
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.
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?
I think I’m naming my first monkey after YOU b/c you are making life SO much easier on me! I lurve you!
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.
hope this works
Thanks so much, it worked! This info blog has helped a newbie not feel so, well, like a fish out of water
Thank you so much! This is perfect.
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.
Thanks you were a big help Got it done
Are these directions still applicable?
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!
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.
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?
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!
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.
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.
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!
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!
I did it, and now I’m going to post about it! : ) Thanks all!