Adding a Tutorial Page Without using CSS or HTML

 

I was recently asked how to add pages in Blogger to help organise posts without it being {ultra complicated}, which to me and my simple ways means no faffing about with CSS or html.

As easy as some folk find these things to tinker with there are some who just don’t want to mess with it, can’t blame them really and if there is a way to do something without having to alter them directly, I’m all for it!

I decided to use Windows Live Writer to create my tutorial page, so if you haven’t already, download now.

First thing you want to do is create standard sized thumbnails for each tutorial you are going to have, I went with one image per post, squared the image, added text and then resized to 250x250, all done in PicMonkey.

Once you have the thumbnails prepared, add them to a new page in WLW, using the {Picture} tool. The way you arrange your thumbnails is entirely up to you, I’m going with groupings by type i.e. Sewing, Paper etc.

Add some headers to make navigation clear for the readers.

Using this tutorial, you need to add a link from the thumbnail image to the appropriate URL of the tutorial.

Once all the thumbnails and links have been added you are ready to publish.

Now we hit the snafu with WLW, they have somehow forgot to turn on the publish page tab, but not to worry.

Simply publish the tutorial page you have created in draft.

Open the draft, copy the html {make sure you get everything, if you change any of it or forget to copy some, it won’t work}.

Open a new page tab and paste the copied html in the html tab flick over to the Compose tab and you will see you tutorial page.

It will look lightly different in layout, just click on Preview and you will see that once published it will look like the page you created in WLW.

Once you are happy hit Publish.

Keep the draft of your tutorial page for future editing, as and when you have new tutorials to add.

So, there is my way of making a tutorial page without having to add or alter any complicated CSS or html {I don’t think copy & paste is too difficult}.

I hope you found this a useful way to organise your blog posts, let me know if you have any questions!