Search This Blog

Thursday, June 2, 2011

How to use different styles of posts for different members of a blog?


By default, Blogger includes an author's display name next to every post in a blog. In group blogs, you can use this feature to create a different appearance for posts written by different users. For instance, one user could post in red and another in blue, or their posts could have different background colours, or borders of different types. Anything that you can do in CSS you can apply to posts of a particular user. Here's a simple example involving colours.
Let's say we have two users sharing a blog, and their names are Alice and Bob. Ordinarily when they post, their entries look the same, like this:
Post screenshotBut now we decide that's too boring. So we're going to make all of Alice's posts be in blue and all of Bob's posts will have a yellow background. First, go to your template and find the Blog Posts section.
You'll see in there either a <$BlogItemBody$> tag or a <data:post.body/> tag, depending on whether you have a classic template or are using Layouts. This tag inserts the text of an entry. Around that, we'll put a span tag with the author's display name as the class. This means that Alice's entries will say class="Alice" and Bob's entries will sayclass="Bob". Here's what the change looks like:
(for classic templates)

<span class="<$BlogItemAuthorNickname$>">
   <$BlogItemBody$>
</span>

(for layouts)

<span class="<data:post.author/>">
   <data:post.body/>
</span>

Now we just need to add Alice and Bob to our style sheet, so that these classes mean something. You can find the style sheet towards the top of your template, between<style> tags. Add in the following Alice and Bob lines:

.Alice {color:blue;}
.Bob {background:yellow;}

Now save your changes and you're done. When you look at the blog again, Alice and Bob will have their own formats, like this:
Post screenshot

2 comments:

Gooser said...

Are there other attributes besides author that can be used?

harshit said...

Yes, like Tags, Location and Author Profile as well.

Post a Comment