Are you struggling to make a tutorial page for your blog that looks something like mine above? I spent hours and hours searching the internet for a method that worked and was simple to use. After much trial and error I finally found one and I've tweaked it into a user friendly format that I thought I would share. In my version you can click the picture or the caption to take you to the tutorial/blog post.
The most helpful resource I found was here and I adapted my version from that one. It is basically a table that you can add pictures and links to as needed. The pictures are always centred so everything looks neat and you can put as many per row of the table as you like. I chose a three column table.
I keep the code saved in Word and just copy and paste as required. Here it is:
[table border="0" cellpadding="5" style="font-family: Times; width: 700px;"][tbody][tr]
[td align="center" valign="center"]
[a href="FULL LINK TO BLOG POST">[img border="0"
src="FULL LINK TO JPG FILE ON PHOTOBUCKET OR BLOG"/][/a][/div]
[span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;"]
[a href="FULL LINK TO BLOG POST AGAIN"]
CAPTION FOR IMAGE[/a][/span][/td]
Change all the pink '[ ]' to '<' and '>' so the html code works properly
Repeat the above text from [td] to [/td] for each column of the table (i.e. each time you add a tutorial picture to your table)
To start a new row copy from [table...] to [/table] for each subsequent row.
- You need to be in the 'html' mode in a new page in blogger.
-You may need to change the width from 700px (first line) to fit your blog.
-To get the link to your jpg photo file, either save the picture into a photo sharing site like Photobucket or Flickr and copy the url from there, or open the picture in your blog and right click on it to copy the url.
- If you want more than three pictures per row, just copy the '[td] to [/td]' part as many times as you need.
-Switch into 'compose' mode to check how it's looking. You may need to resize your pictures. I just make them 'small' by selecting that option on the photo itself.
-You can add categories (eg. 'Girl's clothes', 'Crafts' etc.) in 'compose' mode. Begin a new table below each category heading.
I hope that makes sense. Please let me know if you have any questions or comments, I love to hear them.