Bloggerhacks - User contributions [en]

Bloggerhacks - User contributions [en] http://72.14.177.54/Bloggerhacks/Special:Contributions/Aajoslin From Bloggerhacks en MediaWiki 1.15.1 Tue, 16 Jun 2026 16:04:13 GMT Label-based Post Customization http://72.14.177.54/Bloggerhacks/Label-based_Post_Customization <p>Aajoslin: </p> <hr /> <div>==Version==<br /> <br /> 1.0<br /> <br /> ==Platform==<br /> <br /> New blogger templates<br /> <br /> ==Author==<br /> <br /> Andy Joslin<br /> <br /> ==Homepage==<br /> <br /> http://blog.bandjos.com/<br /> <br /> ==License==<br /> <br /> I don't care! Use it freely!<br /> <br /> ==Required Skills==<br /> <br /> Must be comfortable with editing the template source. Some familiarity with CSS will help to make the style fit your needs.<br /> <br /> ==Description==<br /> <br /> 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<br /> to style the post based on the label that was applied.<br /> <br /> NOTE: If multiple labels are applied to a post, only the last label will be used.<br /> <br /> 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.<br /> <br /> Assuming you have made all the appropriate backups... Here's how you do it.<br /> <br /> '''Step 1)'''<br /> <br /> 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 <br /> post contents are actually written. Look for: <br /> <data:post.body/><br /> <br /> '''Step 2)'''<br /> <br /> Replace that tag with the following code...<br /> <br /> &lt;b:if cond='data:post.labels'><br /> &lt;b:loop values='data:post.labels' var='label'><br /> &lt;b:if cond='data:label.isLast == "true"'><br /> &lt;!-- Only using the last label --><br /> &lt;div expr:class='"label" + data:label.name'><br /> &lt;p> <data:post.body/> &lt;/p><br /> &lt;/div><br /> &lt;/b:if> <br /> &lt;/b:loop><br /> &lt;b:else/><br /> &lt;div class='labelNone'> &lt;p><data:post.body/>&lt;/p> &lt;/div><br /> &lt;/b:if><br /> <br /> '''Step 3)'''<br /> <br /> 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:<br /> <br /> div.labelVacation {<br /> background-image: url("http://images.your-site.com/vacation-bg.png");<br /> background-repeat: no-repeat;<br /> background-position: bottom right;<br /> display: block; <br /> }<br /> <br /> <br /> <br /> ==Method==<br /> <br /> Once the widget is edited as above, the style can be changed as new labels are required. <br /> <br /> ==Sites Using This Hack==<br /> <br /> [http://blog.bandjos.com bandjos.com]<br /> <br /> <br /> [[category: hacks]]<br /> [[category: New Blogger]]</div> Fri, 10 Aug 2007 18:45:51 GMT Aajoslin http://72.14.177.54/Bloggerhacks/Talk:Label-based_Post_Customization Label-based Post Customization http://72.14.177.54/Bloggerhacks/Label-based_Post_Customization <p>Aajoslin: </p> <hr /> <div>==Version==<br /> <br /> 1.0<br /> <br /> ==Platform==<br /> <br /> New blogger templates<br /> <br /> ==Author==<br /> <br /> Andy Joslin<br /> <br /> ==Homepage==<br /> <br /> http://blog.bandjos.com/<br /> <br /> ==License==<br /> <br /> I don't care! Use it freely!<br /> <br /> ==Required Skills==<br /> <br /> Must be comfortable with editing the template source. Some familiarity with CSS will help to make the style fit your needs.<br /> <br /> ==Description==<br /> <br /> 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<br /> to style the post based on the label that was applied.<br /> <br /> NOTE: If multiple labels are applied to a post, only the last label will be used.<br /> <br /> 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.<br /> <br /> Assuming you have made all the appropriate backups... Here's how you do it.<br /> <br /> '''Step 1)'''<br /> <br /> 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 <br /> post contents are actually written. Look for: <br /> <data:post.body/><br /> <br /> '''Step 2)'''<br /> <br /> Replace that tag with the following code...<br /> <br /> &lt;b:if cond='data:post.labels'><br /> &lt;b:loop values='data:post.labels' var='label'><br /> &lt;b:if cond='data:label.isLast == "true"'><br /> &lt;!-- Only using the last label --><br /> &lt;div expr:class='"label" + data:label.name'><br /> &lt;p> <data:post.body/> &lt;/p><br /> &lt;/div><br /> &lt;/b:if> <br /> &lt;/b:loop><br /> &lt;b:else/><br /> &lt;div class='labelNone'> &lt;p><data:post.body/>&lt;/p> &lt;/div><br /> &lt;/b:if><br /> <br /> '''Step 3)'''<br /> <br /> 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:<br /> <br /> div.labelVacation {<br /> background-image: url("http://images.your-site.com/vacation-bg.png");<br /> background-repeat: no-repeat;<br /> background-position: bottom right;<br /> display: block; <br /> }<br /> <br /> <br /> <br /> ==Method==<br /> <br /> Once the widget is edited as above, the style can be changed as new labels are required. <br /> <br /> ==Sites Using This Hack==<br /> <br /> [http://blog.bandjos.com bandjos.com]<br /> <br /> <br /> [[category: hacks]]</div> Fri, 10 Aug 2007 18:43:24 GMT Aajoslin http://72.14.177.54/Bloggerhacks/Talk:Label-based_Post_Customization Label-based Post Customization http://72.14.177.54/Bloggerhacks/Label-based_Post_Customization <p>Aajoslin: </p> <hr /> <div>==Version==<br /> <br /> 1.0<br /> <br /> ==Platform==<br /> <br /> New blogger templates<br /> <br /> ==Author==<br /> <br /> Andy Joslin<br /> <br /> ==Homepage==<br /> <br /> http://blog.bandjos.com/<br /> <br /> ==License==<br /> <br /> I don't care! Use it freely!<br /> <br /> ==Required Skills==<br /> <br /> Must be comfortable with editing the template source. Some familiarity with CSS will help to make the style fit your needs.<br /> <br /> ==Description==<br /> <br /> 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<br /> to style the post based on the label that was applied.<br /> <br /> NOTE: If multiple labels are applied to a post, only the last label will be used.<br /> <br /> 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.<br /> <br /> Assuming you have made all the appropriate backups... Here's how you do it.<br /> <br /> '''Step 1)'''<br /> <br /> 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 <br /> post contents are actually written. Look for: <br /> <data:post.body/><br /> <br /> '''Step 2)'''<br /> <br /> Replace that tag with the following code...<br /> <br /> &lt;b:if cond='data:post.labels'><br /> &lt;b:loop values='data:post.labels' var='label'><br /> &lt;b:if cond='data:label.isLast == "true"'><br /> &lt;!-- Only using the last label --><br /> &lt;div expr:class='"label" + data:label.name'><br /> &lt;p> <data:post.body/> &lt;/p><br /> &lt;/div><br /> &lt;/b:if> <br /> &lt;/b:loop><br /> &lt;b:else/><br /> &lt;div class='labelNone'> &lt;p><data:post.body/>&lt;/p> &lt;/div><br /> &lt;/b:if><br /> <br /> '''Step 3)'''<br /> <br /> 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:<br /> <br /> div.labelVacation {<br /> background-image: url("http://images.your-site.com/vacation-bg.png");<br /> background-repeat: no-repeat;<br /> background-position: bottom right;<br /> display: block; <br /> }<br /> <br /> <br /> <br /> ==Method==<br /> <br /> Once the widget is edited as above, the style can be changed as new labels are required. <br /> <br /> ==Sites Using This Hack==<br /> <br /> [http://blog.bandjos.com bandjos.com]</div> Fri, 10 Aug 2007 18:39:38 GMT Aajoslin http://72.14.177.54/Bloggerhacks/Talk:Label-based_Post_Customization