postSunday, 12 August 2007

How to Add Post Teasers to Classic Blogger

Times were hard for Barbie after Ken left her for an isle 3 doll.Remember when we graced you with the knowledge of how to add teaser posts to the new Blogger… No? Well here is how to add them to the classic Blogger templates.The following is how to create teaser posts for the classic blogger template, to create teaser posts for the new blogger click here.

First, from the blogger dashboard go to settings/archiving and enable post pages. Then follow the guide to adding expandable posts to the classic template here at the Blogger Help Center. Once you’ve done that you should have made three important changes to your blog.

1) You will have inserted this code:

<mainorarchivepage>
span.fullpost {display:none;}
</mainorarchivepage>


<itempage>
span.fullpost {display:inline;}
</itempage>

between your <style> tag and your </style> tag.

2) You will have inserted this code:

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>


after this line of code: <$BlogItemBody$>

3) Finally, you have gone to the settings section of the blogger dashboard. From here you have clicked on the formatting section and inserted the following code into the post template box:

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Note: I have just shat out this process for a detailed explanation of how to do it go to Blogger Help Center as mentioned above. Now let me quickly explain what everything does:

1) This creates a section in you post. With the addition of this section your posts now have two possible sections. The first section will show on your main page and the post page, the second section, however, will only be displayed on the post page.

2) You have added a read more link. This will appear at the end of every post on the main page and it takes you to the individual posts page when clicked allowing the viewer to see both sections of the post.

3) You have added code to your post template to make it easy for you to place your content in the relevant sections of your post. The first section is not marked by anything but everything you want to only show on the posts page must be in between the <span class="fullpost">tag and the </span> tag.

Now if you want to create teaser posts you will have to make changes to steps 1 and 3. To make a teaser post you are basically just adding a new section to your post, so after this you will have 3 sections in a post instead of 2.

To add the new section insert this code above the code you inserted in step 1:

<mainorarchivepage>
span.teaser {display:inline;}
</mainorarchivepage>

<itempage>
span.teaser {display:none;}
</itempage>

Then in your dashboard/settings/formatting section replace the previous code in your post template box with this:

<span class="teaser">Insert teaser here.</span><span class="fullpost">Insert body of post here.</span>

Now your posts have the following three sections:

1) Teaser section: Anything between the <span class="teaser">tag and </span>tag will only appear on the main page and not on the post page.
2) Normal section: Anything that is not between span class tags will appear on both pages.
3) Post section: Anything between the <span class="fullpost">tag and </span>tag will only appear on the post page.

This obviously opens up your formatting to far more than just the basic teaser setup we’ve been using. So have fun experimenting with all the different combinations. Also it can be a bit tricky at first to format these successfully and you can basically forget about your blogger preview as being a useful reference point. My best piece of advice for formatting is make sure there are no spaces before and after span tags.

4 comments:

Ashwita said...

Hi!!

Thanks a lot for updating me about the new post! Yes, like you said, I figured its much easier to use the show/hide option, since I have way too many posts and altering each would be too tedious. Aesthetically, I like the teaser thing better, but I don't see a less-effort way to do it!

But thanks anyway, it was really nice of you :)

Ashwita said...

I just remembered, now I have another question, lol. No one bothered to answer on the groups so I thought I'd ask you.

I've implemented the show/hide thing, thats fine. But I want ONLY the first post to be expanded when a person views the site, esp the main page. Is that possible?

Anonymous said...

Where have you been for 16 days ?

I was close to think you gave up blogging ..

Unknown said...

Mr. Valentin, I just moved to Canada and took quite a detour getting here. Plus I'm battling to adapt to this new timezone but I should be back on track soon.

Ashwita, I'm not very familiar with show/hide posts but I thing there is a way to make your first post display fully but the show/hide link will always be there. Anyway I'll check it out for you and hopefully I'll get it done quicker this time.

graphical counter