title: Customizing each post pages based on label in Blogger
body: <p>I came across a post Label-based Post Customization which showed how to design each blog post based on the label it was posted. That is every post with the same label will automatically have the same design.</p>
  
  <p>But the problem is with that I am unable to customize outside the post content(main wrapper) because the  'label' is defined only as the post content area.
  I like to have different color of the header and other outer wrapper for my labels.</p>
  
  <p>I will give the code I used</p>
  
  <p>replace the second occurrence of <code>&lt;data:post.body/&gt;</code> (between span attribute) with this</p>
  
  <pre><code>&lt;b:if cond='data:post.labels'&gt;
  &lt;b:loop values='data:post.labels' var='label'&gt;
  &lt;b:if cond='data:label.isLast == "true"'&gt;
  &lt;!-- Only using the last label --&gt;
  &lt;div expr:class='"label" + data:label.name'&gt;
  &lt;p&gt; &lt;data:post.body/&gt; &lt;/p&gt;
  &lt;/div&gt;
  &lt;/b:if&gt; 
  &lt;/b:loop&gt;
  &lt;b:else/&gt;
  &lt;div class='labelNone'&gt; &lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt; &lt;/div&gt;
  &lt;/b:if&gt;
  </code></pre>
  
  <p>Then In the style portion of your template, apply a style by specifying the div class. Here's an example that will put a background image for all posts with label "tech":</p>
  
  <pre><code>&lt;style type='text/css'&gt;
  div.labeltech {
  background-image: url(&amp;quot;http://yoursite.com/Wallpaper-Widescreen.jpg&amp;quot;);
  background-repeat: no-repeat;
  background-position: bottom right;
  display: block; 
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>It would be very nice if the knowledgeable members at stack overflow would help me since I am only a student.</p>