Understanding Blogger Template - 3 Feb 5, 2009

The blogger template is a xhtml document which is rendered based on variables. These tutorials aims at helping to understand the blogger template and hence to experiment, learn and change it. Blogger template has mainly three types of variables one which controls the flow of the code, one which pulls data from the databases behind and the third are expressions. This variables are then distinguished with the help of following xml namespaces.

This is third in the series of the three tutorial for Blogger Template and deals mainly with the explanation of the expr: namespace and understanding its usage. The other tuts are:

1. Blogger Template Explanation - Sections, widgets, includables, includes. b: namespace
   


2. Blogger Template Explanation - Data access. data: namespace elements.
   


3. Blogger Template Explanation - How to use expr: namespace - customize links.
   

Expr namespace is simple but its usage is very important. Expr is basically used in conjuction with data tags. For making the blogger engine aware that the xml tag attributes coming next are having data tags in them and have to be parsed. Whenever there is a tag say anchor tag, you will have attributes like href and in that case you want the href link created dynamically with help of some data say data:post.url then you will have to use href as expr:href.

Simple implementation of expr:href in the title includable.

This includable is the title section of your blog. Check the usage of expr:href with the anchor tag.

<b:includable id='title'>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <data:title/>
  <b:else/>
  <a expr:href='data:blog.homepageUrl'><data:title/></a>
 </b:if>
</b:includable>

See this code below for understanding the implementaion of expr:src and over other such tags. It is being used for parsing the data tags in image img tag attributes.

<a expr:href='data:blog.homepageUrl' style='display: block'>
 <img 
  expr:alt='data:title' 
  expr:height='data:height' 
  expr:id='data:widget.instanceId'
  expr:src='data:sourceUrl' 
  expr:width='data:width' 
  style='display: block'
 />
</a>

As you can see how expr tag is applied to the attributes selectively. Wherever data was to be used expr is applied and in style where data tag is not required the expr is ommitted. Therefore the expr namespace variables are all the attributes which might have some data namespace variable inserted in it. So use expr for data tags used in any attribute values like expr:title, expr:id, expr:onClick and so on. These attributes can be for any xml tag. I have seen it in anchor a, image img, span, div, select, input, button etc., so pretty much everything.

Example Social Bookmark StumbleUpon button for Blogger.

This code listing below explains how to insert stumble upon button for blogger. Although it serves as an example on how to do this but my main focus here is on the usage of quotes. So check how the single and double quotes are used in expr:href for creating and using the url to submit and/or thumbs up the specific post correctly. It generally does not matter that you are using single or double quotes, but when your attribute has to use both of them single quotes decide the attribute opening and closing and double quotes are understood as part of attribute.

Blogger uses single quotes for attribute values, and double quotes within, so change your code as necessary. Within the attribute value, if there are extra single or double quotes as part of the original code, e.g. Javascript, you need to escape them. Also check that the ampersand '&' is converted to '&'. So you might have to create your url in this way. Check more on the stumble upon post url on their site StumbleUpon http://www.stumbleupon.com Widgets and button section.

<a 
 rel="nofollow" 
 target="_blank" 
 expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' 
 title="StumbleUpon">
 <img 
  src="../stumbleupon.png" 
  title="StumbleUpon" 
  alt="StumbleUpon" 
  class="sociable-hovers"
 />
</a>

Example Social Bookmark - Add Digg to Blogger

Again although the below code listing is an example of Adding Digg to Blogger template, my focus here is on the escaping done while using javascript. Check how data:post.url is used while inserting it in the javascript variable digg_url. You can use this code to display a counter of diggs done for your post in a neat compact manner on your blog. Check out the digg documentation of this on the http://www.digg.com tools section.

<script type="text/javascript">
 digg_url = &#39;<data:post.url/>&#39;;
 digg_skin = 'compact';
 digg_window = 'new';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script> 

So as you saw proper escaping of quotes is done above. Although this is not direct example of the expr: tag usage as javascript onclick or anyother such event is not used here. But you got the logic right? But if you didn't check this code listing displaying the button to add comments. This is generally found in the footer section of your post and its obviously customisable :).

<div class='post-footer-line post-footer-line-3'>
 <span class='post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:post.allowComments'>
    <a 
     class='comment-link' 
     expr:href='data:post.addCommentUrl' 
     expr:onclick='data:post.addCommentOnclick'>
      <b:if cond='data:post.numComments == 1'>
       1 <data:top.commentLabel/>
      <b:else/>
       <data:post.numComments/> <data:top.commentLabelPlural/>
      </b:if>
    </a>
   </b:if>
  </b:if>
 </span> 
</div>

The data:post.addCommentOnclick generates appropriate javascript based on your blog setting for example a popup window or comment post page. And data:post.addCommentUrl will generate the url pointing to the comments for the post.

This comes to the end of the three tutorials which I was intending to write on the blogger template. But If you want anything else to be added in this tutorial series let me know and I will do it.

If you have done anything interesting with the blogger template create a back-link to it in this tutorial. Please share you comments about the things discussed and add information that you feel will benefit others. Thanks for reading.