Label-based Post Customization
From Bloggerhacks
| Line 80: | Line 80: | ||
[[category: hacks]] | [[category: hacks]] | ||
| + | [[category: New Blogger]] | ||
Revision as of 18:45, 10 August 2007
Contents |
Version
1.0
Platform
New blogger templates
Author
Andy Joslin
Homepage
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.
