The Wonderful World of Blogger

What is a blog?

A blog (derived from the words "web log") is essentially an online diary. It is a content management system designed to take your musings, store them in a database, and spit them out into your template at will.

Blogger is the tool we'll be using for this workshop. It was among the first (if not the first) web publishing tool out there to be free to everyone. They've done a terrific job of making it quick and simple to use, even providing hosting for those who need it.

Blogger can be set up in 2 minutes, or you can dig into customization options, which we'll do today.

Something we won't cover, but is possible: More than one person may share a blog with you. If you're collaborating on a capstone site, this might be quite valuable. Click the "team" button in the "edit your blog" screen for more information.

What do we do first?

0. Please use Internet Explorer for this exercise, not Netscape. And a note from Birkin: "For those of you fortunate enough to be using Macs, the Safari browser works just fine."

1. Go to www.blogger.com. On the top of the page, click the "Start Now!" button

2. Next screen: Give them your name, email address, username, and password. Agree to terms of service.

3. Next screen: You will be asked for a title for your blog, which is required. The description is not. If you make the blog "public", you will occasionally have your name appear on the Blogger home page after you publish. If you say "no", this will not happen.

5. Next screen: You'll be asked to host at blog*spot, or FTP to your own server. Hosting at blog*spot is free, but you'll get a banner ad on the top of the page (or pay $15/yr to have no ads). You may host your site on zonorus. I recommend you select the FTP option.

6. Next screen: It will ask you for 4 pieces of information. I assume you're installing on zonorus at this point.

FTP server: zonorus.marlboro.edu
FTP path: If you want the blog to appear on your home page, or in your root directory, the path is:
html
If you want the path to appear in a directory, the path is:
html/capstone/blogger
The folders for your blog must exist for this to work. If the folders don't already exist on your server space, you'll need to create them via FTP before using Blogger.
Blog file name: If you want this to be the home page in your directory, this should be index.html. If you want it to be another page, type in that file name.
NOTE: if this file already exists, it will be overwritten! Make sure you save your current version before using Blogger!
URL for blog: Assuming you put your blog in the blogger directory in the capstone directory, and assuming you're calling it blogger.html, the URL would be (for me):
http://zonorus.marlboro.edu/~jkramer/capstone/blogger/blogger.html

7. Next screen: Blogger will generate some possible layouts for your blog using its templates. You may either choose one of these to use forever, or you may choose one to be a placeholder until you can install a template of your own (which we will go over later).

8. Blogger will generate your blog. Stand by...

9. You will be dumped into a screen where you may now edit your blog.

I got blog! Now what?

The screen you are in is for putting in entries. Let's do that now.

1. On the top frame of the screen, enter a message: "This is my brand-new blog! Way Cool!"

2. Note on the top, you'll see several buttons. One is a hyperlink-looking button (from Word), one is a B and one is an I. This is the way you may add hyperlinks, bold, and italics to your text. There's also a spellcheck button and a way of attaching files to your blog.

These buttons work just like you'd expect. Nice usability!

For right now, make "brand-new blog" in italics, "Way Cool!" in bold, and add another line: "Visit my favorite website." Highlight the text and click the hyperlink button. You'll be prompted to enter a URL. Don't forget to add the http:// on front, or else your link will not work!

3. Notice that Blogger enters the correct HTML right there in the window. You may tweak or edit it, or you may add alternative HTML tags. It accepts all HTML. You can insert images via the HTML tag and referencing the correct image source location.

4. When you are done editing, at the bottom, you'll see a big Preview button. Click this to preview the look of your post.

In the next screen, if you're satisfied with the look of the post, click "Publish your post". Otherwise, click the "re-edit" button.

5. You may be prompted for your username and password on the next screen. Enter those and click "login." (This can be automated, as we'll see in a minute, so you don't have to log in every time.) If you have not been directed there, choose the "Publish Status" on top to determine your publishing status.

6. Finally, you'll see that files were transfered to your server, hopefully to the right location! To determine if everything worked, click the link to view your web page in a new window.

Did it work?

If not, chances are the FTP path was incorrect. The folders must exist, and your path must be correct.

In your design, you may see some garbage about date/time stamps, etc. Don't worry about these for the moment. We're going to configure them now.

Basic Configuration

1. On the top, just under the URL, you'll see links for Posts, Settings, and Template. Click the "Settings" button.

2. Most information is required. Beneath each blank, a little information is given about how each form field is used.

3. In the "Publishing" section, enter your FTP username and password. If Blogger keeps this information for you, you'll never have to enter it again. You can also adjust your path to FTP here.

4. Under "Formatting", adjust these as you wish. You'll want to set the time zone to Eastern. The "show" item is how many posts will be listed on your blogger home page, before they move to an archived page. You may have this show posts in the last x number of days, or you may have it show the last x posts.

If you update this blog frequently -- and if you're using this to track capstone correspondence, you will be using it frequently very soon! -- I recommend having it show all posts in the last 7 days, as it is configured by default.

5. Under "Archiving", it is set never to archive. In other words, once your post falls off the home page, it's gone. You don't want that for capstone correspondence.

Change the archive frequency to "weekly".

FTP archive path should be the same as your blogger path, in my case
html/capstone/blogger

FTP Archive Filename is what you want the home page of your archive to be called. I recommend
archive.html

NOTE: I recommend that you keep all blogger posts in a single directory, rather than writing archives to another folder. If you have images, your templates will break if you store your archives and blogger home page in different directories.

6. Under the "email" setting, you can select an email address to send all of your brilliant posts as they're made. This is a great place to put a capstone advisor's email address, or your own to have a record of what you've done.

7. You can also add team members if you're working in a team for your project. Read up on site feeds on your own.

Advanced topic: Edit your template

To edit your template, simply click the "Template" button in the top row.

Please note that when you do this, you'll be looking at raw HTML!

In the upper right hand corner, you'll see an option to "choose a new template". This will give you a choice of all of Blogger's templates. If you choose one requiring images, these may be sent to your server as well without your intervention.

Otherwise, you'll need to edit the template directly.

I recommend if you choose to do your own custom look, to first design it in Dreamweaver. Make sure the links work correctly for the ultimate location of this file. Otherwise, you'll need to use absolute links.

Copy and paste the template in to Blogger. Then, you'll need to edit the Blogger middleware code to get what you want. An excellent help file is located just under the template, so it shouldn't be too hard for you to do this.

The code I use on the lessreal.org site is this:

This makes my Date, as formatted in the Settings area, appear in the "small" format called out in my stylesheet. This is followed by the body of the blog entry. At the end, a horizontal rule is inserted, formatted to be just a thin grey line. This code loops over and over for each blog entry (color-matched for your convenience):

2/11/2003 03:52:09 PM 
<a href="http://www.boston.com/globe/magazine/2003/0202/coverstory_entire.htm">A Nation of Voyeurs </a> 
How the Internet search engine Google is changing what we can find out about one another - and raising questions about whether we should
<hr size="1" width="90%" align="center" noshade>

Notice that the <Blogger> </Blogger> tags don't show up. They're taken out when the page is processed. Notice also that the variables above are replaced by the value of those variables, below. Some of the code, like the horizontal rule, does not change. It doesn't contain any Blogger variables, so it's simply passed through the processing phase.

Finally, Blogger asks that you please, please, include a link back to their site somewhere in your template, in exchange for the free service they provide. They request that you use their button to do this:

Where things go wrong

1. Any time you put images in your blog template, you're adding a little complexity to the situation. Make sure your archives and the blog home page are in the *same* directory, otherwise your template will break in the archived pages.

2. If you get the Blogger code wrong, the page won't show up as advertised. DON'T PANIC. Your entries are saved in the Blogger database. Fix the template and your posts will show up again.

3. Backups, backups, backups! In the 2001 and 2002 ISM years, we had people with failing hard drives within weeks of graduation -- in one case, 3 days before the capstone was due. Make sure you keep some type of removable storage media with your work on it.

This should include your Blogger files, in case the Blogger database dies. To do this, simply download the Blogger files from your website to your hard drive. Copy to removable media.

4. On occasion, Blogger is down. You might get a weird error message. There are generally links from within the "edit your blog" window that will tell you what the codes mean. Sometimes it's something you can fix, like a broken template. Sometimes the system is down, and you'll have to wait for it to come back up.

Even if Blogger is down, your entries should be saved in the database. Keep backups to be sure. Also, even if Blogger is down, the entries you've already made are stored on Zonorus, so you should be able to access them.

5. File management. Most other issues can be traced to bad paths to images, style sheets, JavaScript, etc. Double-check all paths carefully. Use absolute links instead of relative links if you get stuck.

6. Problems with JavaScript. Blogger has the & symbol as a reserved character. Unfortunately, JavaScript makes heavy use of it. Therefore, if you include DW-generated JS in your Blogger template, chances are it will not work. At the bottom of the template page in Blogger, there are instructions for placing your script in a separate file that can be linked to your blog, similar to an external style sheet.

If you don't know how to do that, or can't figure it out, then don't use JavaScript in your blog pages.