Site Update

For the last few months I've received a few messages from my old school that I will soon be cut off from using their web hosting for this site.  I can't complain seeing as I graduated in mid-2009 and it's now nearly the end of 2011!

I debated what to do - should I get my own domain and find storage somewhere else?  Instead, I found another solution - Blogger Pages.  This [somewhat] new feature allows users to create static pages in addition to their blogs, and with a little template magic I was able to pretty much clone the old pages - apart from the URLs I think the migration has been pretty seamless, and am quite pleased with the results.

Since I have pretty much written my own template and gotten rid of almost everything except the bare minimum blogger-related code, I had a few challenges in migrating to the new page system.  First of all, I was using CSS before to switch the tabs' appearance when you switched pages, so the current tab was always emphasized.  In the new setup, I had to do this all within the template.  What I did was use conditional blogger tags. Before, the list that forms my tabs looked something like this:

<li id='current'><a href='http://kjtsouka.blogspot.com/p/home.html'>Home</a></li>
<li><a href='http://kjtsouka.blogspot.com'>Blog</a></li>
<li><a href='http://kjtsouka.blogspot.com/p/academic.html'>Academic</a></li>
<li><a href='http://kjtsouka.blogspot.com/p/professional.html'>Professional</a></li>
<li><a href='http://kjtsouka.blogspot.com/p/personal.html'>Personal</a></li>
<li><a href='http://kjtsouka.blogspot.com/p/contact.html'>Contact</a></li>

Now that I have a single template, I needed to use the conditional blogger tags to put a tab 'switcher' within the template itself. Looks like this:

<div id='menu'>
<ul>
  <b:if cond='data:blog.url == "http://kjtsouka.blogspot.com/p/home.html"'>
    <li id='current'><a href='http://kjtsouka.blogspot.com/p/home.html'>Home</a></li>
    <li><a href='http://kjtsouka.blogspot.com'>Blog</a></li>
    <li><a href='http://kjtsouka.blogspot.com/p/academic.html'>Academic</a></li>
    <li><a href='http://kjtsouka.blogspot.com/p/professional.html'>Professional</a></li>
    <li><a href='http://kjtsouka.blogspot.com/p/personal.html'>Personal</a></li>
    <li><a href='http://kjtsouka.blogspot.com/p/contact.html'>Contact</a></li>
  </b:if> <b:if cond='data:blog.url == "http://kjtsouka.blogspot.com/p/academic.html"'>
    <li><a href='http://kjtsouka.blogspot.com/p/home.html'>Home</a></li>
    <li><a href='http://kjtsouka.blogspot.com'>Blog</a></li>
     <li id='current'><a href='http://kjtsouka.blogspot.com/p/academic.html'>Academic</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/professional.html'>Professional</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/personal.html'>Personal</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/contact.html'>Contact</a></li>
  </b:if> <b:if cond='data:blog.url == "http://kjtsouka.blogspot.com/p/professional.html"'>
     <li><a href='http://kjtsouka.blogspot.com/p/home.html'>Home</a></li>
     <li><a href='http://kjtsouka.blogspot.com'>Blog</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/academic.html'>Academic</a></li>
     <li id='current'><a href='http://kjtsouka.blogspot.com/p/professional.html'>Professional</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/personal.html'>Personal</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/contact.html'>Contact</a></li>
  </b:if> <b:if cond='data:blog.url == "http://kjtsouka.blogspot.com/p/personal.html"'>
     <li><a href='http://kjtsouka.blogspot.com/p/home.html'>Home</a></li>
     <li><a href='http://kjtsouka.blogspot.com'>Blog</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/academic.html'>Academic</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/professional.html'>Professional</a></li>
     <li id='current'><a href='http://kjtsouka.blogspot.com/p/personal.html'>Personal</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/contact.html'>Contact</a></li>
  </b:if> <b:if cond='data:blog.url == "http://kjtsouka.blogspot.com/p/contact.html"'>
     <li><a href='http://kjtsouka.blogspot.com/p/home.html'>Home</a></li>
     <li><a href='http://kjtsouka.blogspot.com'>Blog</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/academic.html'>Academic</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/professional.html'>Professional</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/personal.html'>Personal</a></li>
     <li id='current'><a href='http://kjtsouka.blogspot.com/p/contact.html'>Contact</a></li>
  </b:if> <b:if cond='data:blog.pageType != "static_page"'>
     <li><a href='http://kjtsouka.blogspot.com/p/home.html'>Home</a></li>
     <li id='current'><a href='http://kjtsouka.blogspot.com'>Blog</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/academic.html'>Academic</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/professional.html'>Professional</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/personal.html'>Personal</a></li>
     <li><a href='http://kjtsouka.blogspot.com/p/contact.html'>Contact</a></li>
   </b:if>
</ul>
</div>

Have you found conditional tags useful in your blog(s)? I think this is pretty cool and in a way makes me less reliant on the various css, javascript, and html hacks I was using before to achieve the same effects.