Label-based Post Customization

From Bloggerhacks

Revision as of 04:39, 9 February 2009 (view source) ShirtsonSale (Talk | contribs) (→Sites Using This Hack) ← Previous diff		Current revision as of 04:40, 9 February 2009 (view source) ShirtsonSale (Talk | contribs) m (→Sites Using This Hack)
Line 77:		Line 77:
	[http://blog.bandjos.com bandjos.com]		[http://blog.bandjos.com bandjos.com]
		+
	[http://www.shirtsonsale.info Shirts on Sale]		[http://www.shirtsonsale.info Shirts on Sale]

---

Current revision as of 04:40, 9 February 2009

Contents 1 Version 2 Platform 3 Author 4 Homepage 5 License 6 Required Skills 7 Description 8 Method 9 Sites Using This Hack

Version

1.0

Platform

New blogger templates

Author

Andy Joslin

Homepage

http://blog.bandjos.com/

License

I don't care! Use it freely!

Required Skills

Must be comfortable with editing the template source. Some familiarity with CSS will help to make the style fit your needs.

Description

Encloses each blog post in a div tag that has the class set to 'label[your-label-here]'. You can then easily modify the stylesheet to style the post based on the label that was applied.

NOTE: If multiple labels are applied to a post, only the last label will be used.

ALSO NOTE: If you have labels with whitespaces, be ready for some extra testing. I've had luck when the first word is unique. You've been warned.

Assuming you have made all the appropriate backups... Here's how you do it.

Step 1)

Edit the HTML in your template. You will need to select the 'Expand Widget Templates' check box. Find the part in the template where your post contents are actually written. Look for:

  <data:post.body/>

Step 2)

Replace that tag with the following code...

  <b:if cond='data:post.labels'>
   <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == "true"'>
     <!-- Only using the last label -->
     <div expr:class='"label" + data:label.name'>
      <p> <data:post.body/> </p>
     </div>
    </b:if> 
   </b:loop>
  <b:else/>
   <div class='labelNone'> <p><data:post.body/></p> </div>
  </b:if>

Step 3)

In the style portion of your template, you can now apply a style by specifying the div class. Here's an example that will put a background image in the bottom right corner:

  div.labelVacation {
      background-image: url("");
      background-repeat: no-repeat;
      background-position: bottom right;
      display: block; 
  }

Method

Once the widget is edited as above, the style can be changed as new labels are required.

Sites Using This Hack

bandjos.com

Shirts on Sale