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

Storing a Picture

 

Since Blogger doesn't have a file manager to upload photos, you can either use your Picasa Web Album if you use that with your Blogger gallery, or you can create a FREE Photobucket account (www.photobucket.com) and upload the image there.  Instructions below are if you are using Photobucket.

• Once the picture is uploaded, put your mouse over the image and select and copy the Direct Link.
• You will need that path (location of the image).  Save it some place like a temporary email or document.

 

In Blogger

• Login to Blogger.
• Create a new post and publish it.
• View the new post and right click on the Post's title and choose Copy Shortcut (to copy and select that path). Store the path, you will need it.
• From the Dashboard, click on Layout.
• Click or go to Page Elements.
• Click Add a Gadget.
• Choose HTML/JavaScript from the list.
• For Title you can enter a title for class kit like "April's Class Kit".
• In the Content area you will copy and paste 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 Photobucket">
<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>

• Save Changes.
• Drag and drop where you want the new sidebar item.
• Save.
• You're done!

 

Hope this helps!