Thanks to the new functionality I am able to use the free blogger.com blogs as a website. It’s all thinks to functionally they added after Google acquired them. For example I created a custom template for my sister’s graphic/fashion/photography design website. In this post I’ll go over the basics that allow this to work.

1. Google allows custom domain names. This means the whole website can have a professional look and feel because all links connected to the site will look like www.nameofsite.com/revrefvrv/dfvdfvd… etc.

2. The use of labels, conditional statements, and the database data that blogger allows to be accessed through the template system.

To make a standard website I started with the simplest of the pre-created templates modifying it to suit my needs. I removed a lot of the functionality like comments, backlinks, and whatever else.

For a basic website you first need some links to blocks of site content. I generally hard code them into the template. Now if you’ve used the new blogger template system on a lower level (eg. the code level and not the drag and drop stuff) you will notice a few quips. They process any hard coded html data depending on where you put it, so you have to be careful what/where you place directly code into the template. Otherwise you can add “html/JavaScript” widgets to add whatever code functionality you want. The only problem with this is that all of that code you add is stored in the database and not the template. That kind of irritates me because it’s a pain to backup.

So I will add something like this where I want the menu to be:

<div class='divmenu'>
   <span class='spanmenuitem'>
     <a href='http://www.site.com/search/label/Whats%20New'>What's New</a>
   </span>
   <span class='spanmenuitem'>
     <a href='http://www.site.com/search/label/Fashion%20Design'>Fashion Design</a>
   </span>
 </div>

As you can see, those are just hard coded links. It uses the label search functionality to find all posts that have that specific label attached to it.

So now you have links to site content on every page. Now we want to have a special page display only when the user goes to www.site.com… aka. the index page.
You will have to find the post section of the template:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
  <div id='divcontentsection'>
  <!-- display the index page, or something else -->
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='divindexpage'>
      This is the index page!
    </div>
  <b:else/>
    <b:loop values='data:posts' var='post'>
      <b:include data='post' name='post'/>
    </b:loop>
  </b:if>
  <b:include name='nextprev'/>
  </div>
</b:includable>

Key points to note is the conditional statement checking ‘data:blog.url == data:blog.homepageUrl’. Every time the website is accessed it checks to see if the current page is the index page if it is it will display some html code, otherwise it will process site site as it generally would (show posts).

Now we have to figure out how to use labels to process the site content like a website would. I will talk through what I wanted to accomplish. After that will be the block of code that accomplishes the task.

* When a user clicks on a hard coded link to “Graphic Design”, I wanted it to display a list of post titles only related to graphic design, no actual content. Each title could be clicked on to go to that specific post. That means you need to have “Enable Post Pages?” set to YES in Settings->Archiving. Every post made has a unique link associated with it. It allows us to to use conditional statements to figure out to display the post content or not depending on what page they are on.

* I wanted to create html breadcrumbs. This is a goofy term for links that show your level of deepness in the site. For example “Home > Graphic Design > Ninjas” show what path the user took to get where they are. Each one can be clicked on so they can jump back. This is easily possible with blogger as you will see in the code later.

* Another thing is that I still want regular blog functionality in the site. When the user clicks on the “Whats New” link they should be shown all posts (title, content, everything…). All this takes is a quick check of what label the post has before it is processed.

Here is the code of the post includable that’s linked to from the previous code shown:

<b:includable id='post' var='post'>
  <div class='post'>
    <!-- this post functionality only works if there is ONE label -->
    <!-- look for special cases like whats new, we want that to display like a regular blog -->
    <!-- if it is a special case, display the content as well as the title+link -->
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.name == "Whats New"'>
        <div class='divpostbody'>
          <p>
            <b:if cond='data:post.dateHeader'>
              <h2><data:post.dateHeader/></h2>
            </b:if>
            <h3><a expr:href='data:post.url'><data:post.title/></a> - <data:post.timestamp/></h3>
            <p>
              <data:post.body/>
            </p>
          </p>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
      <b:else/>
        <!-- if this is not a single item, display only the title and link of each item -->
        <b:if cond='data:post.url == data:blog.url'>
          <!-- START display breadcrumb links -->
          <h4>
          <a expr:href='data:blog.homepageUrl'>Home</a> |
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url'><data:label.name/></a>
          </b:loop> |
          <a expr:href='data:blog.url'><data:post.title/></a>
          </h4>
          <!-- END display breadcrumb links -->

          <h3><data:post.title/></h3>
          <div class='divpostbody'>
            <p><data:post.body/></p>
            <div style='clear: both;'/> <!-- clear for photos floats -->
          </div>
       <b:else/>
        <h3><a expr:href='data:post.url'><data:post.title/></a></h3>
       </b:if>
      </b:if>
    </b:loop>   

  </div>
</b:includable>

It took me about 2 days to research and code the necessary functionality. Blogger’s current documentation on their template system leaves something to be desired. Hopefully they will improve on that. Anyways, that’s about it for the template! Now you should have a fully functional informational website that still has blogging functionality.

The code is a pain to paste into here, so if you have some troubles getting it to work, let me know.

The ajax/json site is fully functional now. I had a few problems though that I’ll discuss here.

First off, the simple hosting that is provided my my isp isn’t working correctly, so I had to look for an alternative host to do testing on. I found 50webs.com which provides 60mb of free bannerless hosting. They even allow you to use domain names with their free service, which is great. I got that setup and now my sister’s site (while slow) is on there and directly uses the domain name.

Today I showed the site to a friend, who in turn said that it didn’t work. He was using IE7. I use Firefox usually and had not gotten around to trying the completed site on different browsers… Anyways I figured out the problem and the site now works on Firefox2/Opera9/IE6/IE7.

What caused IE6 and 7 to not display the site? It seems that IE requires a new AJAX object for every request. I had it setup initially to define one AJAX object when the page loaded and reuse it. I also had an extra comma character in one of the json files that completely stopped IE from working (actually a good thing).

Now I can start working on the client application. I’ve decided to use VB.net instead of C# this time, so I can get more practice with it.