Tuesday, March 13, 2007

Making Blogger Bend Backwards

This blog post is a short tutorial about how to use Blogger to make what appears to be a normal web page.

Why am I inventing and sharing this? Some instructors at LCC are experimenting with ways to have students prepare online portfolios.

If you have clicked on my Moodle website for my Winter term Math 20 classes you have seen what works well within the LCC community for dealing with online learning. But all of these options for grading, commenting on assignments, and so forth are not really what a student wants perspective employers to see.

A nice, clean, stand-alone webpage is needed, with which a student can make an e-portfolio. Here is an example of a college that has such a thing. The students there use special (not free) e-portfolio software to edit a template that creates a simple page with a header image, some text, a picture or two, and links to their best assignments.

Since LCC is having a budget crisis, I was asked to help design a free solution for our students to use. They can already put assignments online using Moodle; all that is needed is a nicer presentation for potential employers. So I spent a couple hours this afternoon forcing Blogger to do the job.

(I admit half that time was spent figuring out how to move the Blogger navbar to the bottom of the screen. Arg. But I would not want college policy to be violating the Blogger terms of service, nor to trouble a barely computer-literate student by removing the obvious "Customize" link to update the page.)


Now anyone can make a simple web page, after being shown the basics about the P, IMG, and A HREF tags, by following the following directions.

(a) Make a new blog using Blogger.

Go to http://www2.blogger.com/ and make a blog. Go ahead, do that now in a second browser tab or window.

First you will need to set up an account with Blogger, if you do not have one already. Then it asks you a few quick questions to determine what your blog's URL will be and what it looks like. Pick any template, since we are about to delete it anyway.

(b) Replace the template

After making your blog, you are automatically put into the screen where you make your first blog entry. Type anything and then click "Publish".

If you want, click "View Blog" to see what you are about to destroy. If you do this, click "Customize" on the Blogger navbar at the top of your blog to return to settings.

Go to where you can change your template. Click on the "Template" tab at the top of the screen, and then "Edit HTML" just under that.

Now you see all this complicated HTML in a scrollable sub-window. Click anywhere there, and then use CTRL-A and the backspace key to delete it all.

Use copy-and-paste to replace all that HTML with the contents of this file. (Use CTRL-A a second time to select all of that file for copying.) Click "Save Template".

(c) Edit the template

Finally edit the bottom of my text so the paragraphs, images, and links are what you want.

(Some more detail for those who know a little about HTML: in between the BODY tags it works like a normal web page, with a few idiosyncrasies about needing to formally close P and IMG tags; just don't change anything in the HEAD section or what is above that.)