Simple weblogging applications like Blogger can make it a breeze to update your site, but there’s a cost attached – every post on your site has to look pretty much the same. Here’s a hack that means you can style your most recent post differently from the ones that follow. It works by staggering the tags that surround your posts.
Here’s possibly the most basic template for a Blogger you could get:
<html> <head></head> <body> <p>My weblog</p> <Blogger> <p style="background-color: red;"> <b><$BlogItemDateTime$>)</b><br><br> <$BlogItemBody$></p> </Blogger> </body> </html>
The important thing to notice on this template is that the paragraph tags (<p></p>) that enclose the Date/Time tag and the BlogItemBody tag are styled so that they have a red background. This is being done with CSS (Cascading Style Sheets) but you could equally do it with table cells or <font> tags. The important thing is that since everything inside the Blogger tags will be repeated for each and every post, all the posts will will be styled in the same way.
Here’s how you’d lay it out if you wanted to style the first post differently:
<html> <head></head> <body> <p>My weblog</p> <p style="background-color: red;"> <Blogger> <b><$BlogItemDateTime$>)</b><br><br> <$BlogItemBody$> </p> <p style="background-color: blue;"> </Blogger> </p> </body> </html>
What you’re looking for in this template is how the paragraph tags have been staggered around your weblog content. The first paragraph tag is outside the Blogger tags and so – because it isn’t repeated for each post – it just changes the background color of the first post. But the </p> and the <p style=”background-color: blue;”> tags at the end are repeated, leaving a paragraph with a blue background open when the next post is inserted. When the second post on the page appears, its background is blue – and this is repeated for every post after that. All that’s left is to close the paragraph tag that’s left open at the end of the page with a simple </p> and there you have it.
This hack isn’t restricted to background-color – you can change the font-face or size, make the whole post bold or put a background image behind it. You can even use CSS to change the posts position on the screen with margin and padding.
This hack was originally supposed to appear in the ill-fated O’Reilly “Blogging Hacks” book. I’ll be putting all my contributions online over the next few days / weeks.