Blog: ideas, design, and artwork

Idea. I have always kept some sort of log of my travels in the past, on scraps of paper, dog-eared notebooks and lately online. So when this whole idea of traveling around the world started to look like it was actually going to happen, it was only natural for me to start making plans for keeping some sort of a log, not only of the trip, but of all the issues we would have to deal with before leaving. I didn't want this story to mix with the regular content of my other blog, which is full of not-so-PG-13 stories, so there was about time to start a separate site.

Design. I have already outlined why I chose Blogger and not the other free or commercial sites that offer blogging environments. In short, I want the freedom to design my own flexible layout without advertising banners, I want javascript and I want an interactive map - for free. I do all this myself and give up the convenience of having my travel blog advertised and indexed on a travel web site. I'll have to work more to promote this blog. It's a trade-off.

A fixed-width three-column blog layout is vital for an optimal distribution of information without cluttering: a thin left sidebar with the essential links, a wide middle bar with the blog content, text and images, and a right sidebar, wider than the left one but thinner than the content bar, containing the interactive map and a few other widgets.

Blogger doesn't offer three-column layouts but there are plenty of eager blog-template developers on the net who have thought of this before me. I am no artist or professional web-developer, but I have a very acute critical sense and can't stand 90% of the stuff that's out there: either too garish, too simplistic or too overloaded with content. I got my inspiration from various sources, here are a few of them:

• Thur Broeders' "The Blogger Workshop" - lots of templates, and he's also a funny guy, like all Dutch I know.
• Ramani's Hackosphere - which contains many other useful Blogger hacks. This is where I got the code for the peek-a-boo posts (content hidden behind a "Read more..." link.)
• Bloggerhacks - good collection of various Blogger template tricks.
• Random Bytes - this is actually the first post on the topic that I clicked on while searching for "three-column blogger template".
• Andreas Viklund - very creative guy, his template creations are all over the place.
• Grand Stream Dreams - a three-column blog about sites about three column blogs.

... and others, but most can be reached from the links above; it seems to be a close-knit community. I would just mention Scattered Notes and Hoctro's place for their efforts to integrate Blogger with Google maps.

Artwork. I found that, when switching to a three-column template, going for fixed-size width like I did is much harder than sticking with variable sizes (pixels vs percentages), only because one has to come up with entirely new artwork that matches the new sizes. I have spent a lot of hours using Gimp, cropping pictures and moving layers to pixel boundary... My template is based on the Blogger standard TicTac Blue template, but not much is left of the original by now, and more things may change later.

Last but not least, the blog header background is a wide-angle lens picture of Machu Picchu, courtesy of Matt Marino, found on flickr.com. It is by far the best pic of this kind I have seen on flickr - it is superbly focused both in the foreground - the stone bulwarks along the path - and in the background - the citadel and the mountains, and it's wide enough so I didn't have to crop much of it in order to use it as a banner. Thanks Matt for allowing me to use it. You can see Matt's photo stream at http://flickr.com/photos/mattmarino.

If you stumble upon my blog and you like it, feel free to drop design suggestions, after all, it's a work in progress.

For instructions on how to download and use this template click the "Read more..." link.

To use this template for your blog you will need to do some work:

• Download the template to your computer from my file hosting share on MediaMax: http://www.mediamax.com/travelrats/Hosted/template_three_column.xml
• Edit the file in notepad and search for "TODO:" within Javascript comments marked by those characters /* ... */
• Follow the instructions contained by those TODO's, then you can delete the comments
• Basically, the todo's ask you to copy some images that I host on imageshack.com and use your own favorite image hosting instead.
• I would appreciate if you didn't use the Machu Picchu header picture because:
  • I use it as a courtesy of its author
  • It's the one thing that makes the look of my blog unique. You can however use any picture that is wider than 985 pixels
  • If you absolutely have to use it, I won't come after you screaming
• Click on the "Customize" link, go into the "Template" section (you should already be there by default), click on "Edit HTML", then click the "Browse" button, navigate to the file you saved, and finally, click "Upload".
• Don't forget to save!
• To get expandable posts working you must do one more thing: edit your post template and add those lines (read the whole instruction set on hackosphere):

  Type your summary here
  <span id="fullpost">
  Type rest of the post here
  </span>
  

• A credit on your blog for "Big Fat Rat" would be nice, but not necessary.

I haven't included the map widget and javascript code in the template, because it is heavily customized for my own travel data and still a work in progress. There are plenty of web sites with instructions on how to add interactive maps to web pages.

Good Luck bloggers!