Styling Blogger Differently for Single Post vs. Multiple Posts

If you are a Blogger user, you may find this useful. I had a situation where I wanted to style something differently for the individual post page vs. the main page where all the latest blog entries are displayed. Looking at the Blogger HTML markup, I found that the HTML is very similar between these two pages. So similar in fact that I could not write a CSS selector that would apply to one and not the other.

To solve this, I added a div that will have a different class name when viewing a single post vs. the main list of recent posts. To do this, I had to edit my Blogger template and 'expand widget templates'. I found the place I wanted to add the new div and entered it as follows

<div expr:class='data:blog.pageType''>
    <!-- the div's I want to enclose for styling -->
  </div>  

Note the 'expression' used within the div tag ("expr:class='data:blog.pageType'"). This is a Blogger scripting expression that will be evaluated at runtime. Blogger will evaluate it and render something different based on the value of it's blog.pageType internal variable. For a single post page, this expression will evalute to "class='item'", whereas on a mult-post home page it will evaluate to "class='index'".

So, after doing this, the single post view will have the following div:

<div class='item'>

and the main list of posts will have:

<div class='index'>

Now I can write CSS rules that target one or the other using the different class names.

.blog-pager .item {
/* do something different on the single post page */
}

.blog-pager .index {
/* do something else for the main page */
}