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: https://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!

 

Pin It on Pinterest