Fandom

Bloggerhacks Wiki

Label-based Post Customization

230pages on
this wiki
Add New Page
Talk0 Share

VersionEdit

1.0

PlatformEdit

New blogger templates

AuthorEdit

Andy Joslin

HomepageEdit

http://blog.bandjos.com/

LicenseEdit

I don't care! Use it freely!

Required SkillsEdit

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

DescriptionEdit

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("http://images.your-site.com/vacation-bg.png");
      background-repeat: no-repeat;
      background-position: bottom right;
      display: block; 
  }


MethodEdit

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

Sites Using This HackEdit

bandjos.com

Shirts on Sale

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.