Typepad: Adding a Class Kit to the Sidebar and Have It Link To an Existing Post

Many demonstrators are now selling Class Kits or Planners on their blogs and wanted to know how to setup a link on their sidebar.  These instructions can also be used for non-demonstrators or any blogger that would like to have an image of a product they are selling and then have it link or point to the appropriate post.

What you will need to get started:

• A picture of your Class Kit or featured project you are selling.
• A resized, smaller picture of the same image, with a max width of 160 px (this will be used and need to fit in the sidebar area).
• An existing post about the Class Kit or product you are selling.

Saving a Smaller Picture

You may already have an image editing software program to edit and resize your pictures. If not you can use this free program and view the tutorial I have written: http://www.blogsbyheather.com/2008/10/free-image-resizing-and-watermark-program.html.

 

In Typepad 

1.     First save a smaller or reduced-size version of the image (this will be for the sidebar) and upload it to your Typepad file manager (Control Panel, Files tab, then click Browse to find it on your computer, then click upload).

2.     Then the file name appears in the list of files on the left.

3.     Right click on the file name and choose Copy Shortcut (this stores the path of the newly uploaded picture).

4.     Create a temp email or Word document and paste the link in there temporarily.

5.     Then, post your Class Kit info.

6.     Then view your blog and right-click on the Post or Page Title (for your Class Kit), and click Copy Shortcut.

7.     Go to the temp email or Word document and post that there as well. You will need both shortcuts.

8.     Now, go to Typelists.

9.     Create New Typelist.

10.  Title = April Class Kit.

11.  Make sure you click a NOTES typelist.

12.  Then click Create New Typelist button.

13.  Then for the label you can leave it blank or give it the name of your kit, such as Parisian Breeze (if it was based on that DSP for example).

14.  Then in the NOTES area you would write your HTML CODE like this.

<a href="  this is the path you copied for the post title ">
<img src=" this is the path of the small image you uploaded to your typepad file manager">
<BR>
Click here to view this month's featured class kit!
</a>

So for example....(links are not real but to show you what it may look like)

<a href="http://www.handstampedbyheather.com/AprilClassKit.html">
<img src="http://www.handstampedbyheather.com/AprilClassKit.jpg">
<BR>
Click here to view this month's featured class kit!
</a>

15.  Then Save.

16.  Click Publish since it's a new typelist.

17.  Then check off your weblog and click Save.

18.  Then click the Content link (blue text) and that brings you to your blog's layout. 

19.  Then click and drag the April Class Kit wherever you want it to be placed on your blog.

20.  Save changes.

 

You're done!

 

 

Hope this helps!

 

Comments

[Sue]

I finally followed your instructions for this post... Woohoo, I think I did it! I have mucked around all night trying to post my blog tour tutorials and I think I finally did it. Well I hope it's all right. Bet I can't do that again LOL. I forget how to do links sometimes. Thanks for your help and I hope you had fin on the tour. Much appreciated.

PS... if I get stuck again I'll ask for help. Thanks.

[Tassy]

Hi, I have just joined typepad today and was tyring to find my way around.I found your tutorial very useful.You have used one word which I have not found on any other help website...you said: save and publish. This has made all the difference as , before I was saving it and didnt understand why it wasnt showing.so thanks again, really appreciate it:)