Blogger Template Issue

Today I tried to understand Blogger's template and then to reorganize my template for my blog. As I understand that the template is a html-like file. I can update this file so that I can add other elements such as RRS link I did previous.

Based on xml and html knowledge I have, I tried to change me template. Here is an example tags for blog title before my change:

<BlogItemUrl><a href="<$BlogItemUrl$>"
  title="external link"></BlogItemUrl>
  <$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>

These tags are not looks in right logic. Then I tried to change them as:

<BlogItemUrl><a href="<$BlogItemUrl$>"
  title="external link">
  <$BlogItemTitle$>
  </a>
</BlogItemUrl>

I thought the updated one is better. However, after I saved the new template, I lost my blog title! I had to change these codes back. Fortunately, I saved my template before I did the change. As Blogger suggested, Always back up your template before you make any changes!

By the way, this blog demonstrates an example of using a box for codes as seeing above. I introduced a css class "outlinebox" in my Blogger template:

/* Use this style as class ID for a box for some blocks such as div, p */
.outlinebox {
  width: 450px;
  border-color: #666666;
  border-style: solid;
  border-width: 1px;        /* sets border width on all sides */
  padding: 5px
  }

Then in my post, I used this class in a div like this:

<div class="outlinebox"><pre><code>
  some codes ...
</code></pre></div>

I also created another two css classes in my Blogger template: "outlinebox4wrappercodes" and "wrappercodes". These two css classes can be used in the same way to display additional horizontal scroll bar. Here is another example:

<div class="outlinebox4wrappercodes"><div class="wrappercodes"><pre><code>/* Use this style as class ID for a box for some blocks such as div, p */
.outlinebox {
  width: 450px;
  border-color: #666666;
  border-style: solid;
  border-width: 1px;        /* sets border width on all sides */
  padding: 5px
  }</code></pre></div></div>