Tuesday, July 19, 2011

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="http://4.bp.blogspot.com/-SatCDnSOYmU/TiMMU2rLL7I/AAAAAAAAB4o/de2qBfLnRdM/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.


15 comments:

Krista said...

I set up a similar "tutorial" page (with far fewer tutorials) and wanted it to look just like this. But had no idea how to make that happen. Yay for sharing your knowledge! Some day when I have enough tutorials to justify it, I'll have to do this. :)

Kelly said...

Okay, we are on the same wavelength because I have been thinking about how to do something just like this all week! Thanks so much for putting this together for us!

Laura Beth said...

Thanks for the how to! So helpful :)

Cowgirl Crafter said...

As a newbie blogger, I thank you very much!

Just Jaime said...

Cool! Love how yours looks!

Abby said...

Oh I've been dying to do this...thanks so much for showing me how!

Catherine said...

What a great idea! Perfect... no one likes sifting through archives trying to find something!

Leslie said...

I’ve been thinking about creating my own Tutorials page...thanks so much for sharing the great tips!

Chelsea said...

This looks awesome! Thanks for sharing your tips.

Maureen said...

Oh my gosh! You are awesome! I have been wanting to fix my Tutorial Page, and now I can!
I happily found you on the Tea Rose Home Linky Party, and am now your newest follower!

Tammy said...

I am just beginning to dabble with HTML code. This was very helpful. Thanks sooo much!!

Rhiannon said...

I think I cheated when I did mine! (I also asked my husband who works with computers) I just highlighted my picture and then clicked 'add link' and then pasted in the page I wanted it to go to.

http://myhandcraftedhome.blogspot.com/p/tutorials.html

Thanks for the pro way to do it, now I can feel like an expert!

Kricia Palmer said...

I've been wanting to do this but didn't know how. Thanks! This will make it so much easier. Great post! I'm a new follower via Shabby Nest.
Kricia

Inspire Me Heather said...

Thank you very much for this - I've got it linked to my blogging post too today!

Anthea said...

Just found this post (and your lovely blog too) via Pinterest. Great tutorial - exactly what I was looking to do on my own blog but didn't know how! Thank you x

Related Posts Plugin for WordPress, Blogger...