me: how to create a tutorial library

If you subscribe to this blog via email or a reader service, you probably haven't noticed that the "favorite projects" listed on my sidebar have gotten a little out of date.


You also wouldn't notice that I've replaced those images with a tutorial library button.  You can click on the image above to access the library.


{BlogLovin' is a great reader service that allows you to keep tabs on blog design also.  Click here to follow me on BlogLovin'}


I can't believe that I have already created over thirty one tutorials!  Wow!  I am hoping to update the library once a month with new tutorials.


If you want to create your own tutorial library in Blogger, here are some tips:


(I am by no means an HTML expert, but here's how I accomplished my tutorial library.  I hope these tips work for you, but if they don't I may or may not be able to help.)


1.  I created my tutorial library as a page rather than a post.  To create a page click the "Edit Pages" link rather than the "Edit Posts" tab when you are creating a post.


2.  Upload photos from the Compose tab as you normally would when posting.  Size the photos and left align them.  Click over to the Edit HTML tab and replace the link following "<ahref" with the link to your blog post.  This will take people to your blog post when they click the picture.  I have highlighted this portion of the code below.




<div class="separator" style="clear: both; text-align: center;">
<a href="http://craftycpa.blogspot.com/2011/04/return-on-creativity-big-bang-pillow.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixmwBacB6xxlCC7QMjJNKLKz9sPvfpGiMG72XYxoNbEPeANJyU3wUyq-EYa9ZdGpHojsMixBEIrbDGjWilymeg8xG59gvB2pv1AkjaXcvbbJ6-kRrd5MlRtV-LsIWW52uahbm3aa5A8-AL/s1600/big+bang+pillow1.jpg" /></a></div>


3.  Add <td> before the code for each image and </td> after the code for each image.


4.  Add <tr> before the code for each row and </tr> after the code for each row.


5.  I created separate tables for pillows, bags, embroideries, etc.  Add <table> <tbody> before the code for each table and </table> </tbody> after the code for each table.


Your code should end up looking something like this for a library with two rows of three pictures each:


<table> <tbody>
<tr>
<td>
Code for image 1.
</td>
<td>

Code for image 2.

</td>

<td>

Code for image 3.

</td>

</tr>

<tr>

<td>

Code for image 4.

</td>

<td>

Code for image 5.

</td>

<td>

Code for image 6.

</td>

</tr>

</table> </tbody>

I hope this gets you there.  If not, here is one website I used for reference and here is another one...

6.  Finally, publish your page and create a link on your blog using the Picture widget.


Creating this tutorial library was rather tedious, which leaves me thinking that there must be an easier way to do it.  However, I'm please with the results.  Give it a try.