Blog Design

Adding Images with Links to Your Sidebar

EDITED:  THESE INSTRUCTIONS ARE STILL GOOD, BUT IN SOME PLACES I MAKE REFERENCE TO THE ICONS OR BUTTONS ON MY SIDEBAR.  SINCE THIS TUTORIAL WAS WRITTEN I HAVE RESDEIGNED MY BLOG AND REMOVED THOSE BUTTONS SO YOU WILL NOT BE ABLE TO LOOK AT MY BLOG TO GET A VISUAL.

Because many of you have asked how to add an image with a link to your blog sidebars, I have written these instructions for Typepad  bloggers.  If you are familiar with Typepad, this should be fairly easy.

Placing Images on Sidebar

In case you do not know how to put an image on the side bar, I'll first explain how to do that:

1.  Choose the picture you have in mind and resize it to a dimension that will fit on your sidebar.  [The little icons I have on mine happen to be 150 x 150...and I think my sidebar is set to 200 in my Typepad template...just to give you an idea of what that looks like.]  WHEN YOU NAME YOUR PICTURE WHILE SAVING DON'T LEAVE ANY SPACES...EITHER THAT, OR NAME IT LIKE THIS:  MY_FAVORITE_PIX...OR TYPEPAD WILL TELL YOU THAT IT DOESN'T ACCEPT THAT NAME.

2.  Log into Typepad and go to the green CONTROL PANEL tab at the top right and click it.

3.  Now find the  blue FILES tab just below the green WEBLOGs tab.  Click on it.

4.  On the right hand side you will see a title that says, "Upload New Photos." Browse for the photo you have prepared and hit UPLOAD.

5.  Once your picture is loaded it will appear in the Files list on the left-hand side of your page.  Find it there and click on it.  It will open in its own window.  Once it does go up to the browser adress window and highlight it's web address and copy by clicking file>edit>copy or you can also right click and choose copy.

6.  Now you are going to place this pictue in a TYPELIST...you will create a new one or put it under a Typelist heading you already have.  We'll create a new one, okay?

7.  Click on the green TYPELIST tab at the top of your page by the Control Panel tab.

8.  On the green highlighted bar on the right hand you will see a place to create a new Typelist.  Click on that. Your list type will be a link, so from the drop down list choose LINK.  Name your list and hit the CREATE button.

9.  DO NOT add anything in the URL quicly add new link box.  Hit the CONFIGURE tab and under the title 2 ADVANCED CONFIGURATION scroll down to the DISPLAY NOTES.  It will be marked as TOOLTIP but you want to mark it AS TEXT so change that and hit SAVE CHANGES.

10.  Now go up and hit the blue MANAGE tab.

11.  Hit the ADD A NEW ITEM tab {under the Manage and Configure tabs}

12.  Now in the NOTES section type this html code:       

<img src="webaddressofyour picture"/></a>                         

*put the web address that your copied here between the " s

13.  Make sure the language is written exactly as I have shown with spaces and characters the same. 

14.  Hit SAVE ITEM.

Linking to an Image

15.  Now, go to the page you want to link the picture to and copy it's web address.   The little icons on the sidebar of my main page are linked to other Typepad weblogs that I have formatted....I have the account with unlimited Weblogs...

16.  Once you have done this go back to the TYPELIST you have the image saved in. Hit EDIT ITEM and go to that item.

17.  Scroll down to the NOTES section and click just above the HTML that you wrote for your image.

18.  Write the following HTML:  <a href="http://YOURLINKADDRESSGOESHERE">                                              *the web address for your link goes between the " s

Your NOTES section should now look like this:

<a href="yourlinkwebaddress">
<img src="yourimagewebaddress"/></a>

19.  Hit SAVE AND UPDATE

20.  Go to your Weblog and hit EDIT DESIGN

21.  Hit CONTENT LIST.  Find your new TYPELlST and check it and save.

22.  Hit ORDER CONTENTS and place it where you want it.

23.  You can put as many links Under one Typelist heading as your want....just write the html refrencing link on the first line and the image that goes with it on the second line; next link on the next line and the image that goes with it on the next line, etc. etc. etc.

24. Or you can have a separte TYPELIST for every link.