Hacks: Styling your first post differently in Blogger...
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.
Comments
Please stay on-topic, informative and polite. I reserve the right to remove comments for whatever vague capricious reasons seem reasonable at the time.
Um, you probably know about this already, but something has gone rather wrong with your font formatting halfway through this post, and is making the rest of your page - including the right-hand nav - look rather weird. I think it might be the use of the word <font> in the text that's done it, judging by the source code. :-)
→ Posted by: Vaughan at June 21, 2003 1:41 PM
Thanks for posting this - it's very handy. One quick question though - is there any particular reason why some formatting (specifically, font size changes) might not show up when using Safari but work when viewed using IE?
→ Posted by: Phil at June 23, 2003 4:33 PM
thanks alot for that. i couldnt figure out how to change the BG colour without screwing everything up. solved now. got a wicked new design for my site. check it in a month!
cheers
→ Posted by: Ben at August 2, 2003 8:50 PM