Conditional CSS
We're going to use conditional tags to change how posts display on different pages. Add the following code to your style sheet, depending on what kind of template you have:
(for classic templates)
(for layouts)
Note: Before making any changes to your HTML, you will need to make sure that the 'Expand Widget Templates' option is selected.
Your style sheet is usually near the top of your template, between the {style} and {/style} tags. If you have your style sheet in a separate file, you'll still need to add these lines in your template, so the conditional tags will work. Just make sure you add in the {style} tags around them.
IMPORTANT NOTE in the layouts template there is a ]]> tag just above the tag. Add the above code so that it lies between these two tags. What we did here was to define a class called “fullpost” that will appear only on post pages (permalinks).
"Read More" Links
Add the following code to your template, somewhere after the <$BlogItemBody$> or {data:post.body} tag:
(for classic templates)
(for layouts)
This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post. You can replace the "Read more!" text with whatever you like, of course.
Post Modifications
The final piece that we need is a little bit of code in your actual post. Each post that you want to use this feature on will need this code:
source: Blogger Help and www.technobuzz.net/
