Label-based Post Customization - Revision history

ShirtsonSale: /* Sites Using This Hack */

ShirtsonSale — Mon, 09 Feb 2009 04:40:33 GMT

Sites Using This Hack

←Older revision		Revision as of 04:40, 9 February 2009
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]

ShirtsonSale: /* Sites Using This Hack */

ShirtsonSale — Mon, 09 Feb 2009 04:39:15 GMT

Sites Using This Hack

←Older revision		Revision as of 04:39, 9 February 2009
Line 77:		Line 77:

	[http://blog.bandjos.com bandjos.com]		[http://blog.bandjos.com bandjos.com]
		+	[http://www.shirtsonsale.info Shirts on Sale]


	[[category: hacks]]		[[category: hacks]]
	[[category: New Blogger]]		[[category: New Blogger]]

Aajoslin at 18:45, 10 August 2007

Aajoslin — Fri, 10 Aug 2007 18:45:51 GMT

←Older revision		Revision as of 18:45, 10 August 2007
Line 80:		Line 80:

	[[category: hacks]]		[[category: hacks]]
		+	[[category: New Blogger]]

Aajoslin at 18:43, 10 August 2007

Aajoslin — Fri, 10 Aug 2007 18:43:24 GMT

←Older revision		Revision as of 18:43, 10 August 2007
Line 77:		Line 77:

	[http://blog.bandjos.com bandjos.com]		[http://blog.bandjos.com bandjos.com]
		+
		+
		+	[[category: hacks]]

Aajoslin at 18:39, 10 August 2007

Aajoslin — Fri, 10 Aug 2007 18:39:38 GMT

New page

==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"'>

<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("http://images.your-site.com/vacation-bg.png");
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==

[http://blog.bandjos.com bandjos.com]