Basically this feature will display a summary (first part) of your post in the main page. When your visitor click on the "Read more" link then only they have a full post.
To do this. Only 3 steps require.
1. Add Conditional CSS.
2. Add the "Read more" link
3. Posting with expandable post summary.
First, login to blogger.
From your dashboard, choose blog you want to edit and click on Layout. On the next screen click on Edit HTML. Under Edit Template tick the Expand Widget Templates box.
1. Adding conditional CSS
Locate <head> tag. Copy and paste CSS code below exactly before the <head> tag.
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
<head>
2. Add the "Read more" link
Find <data:post.body/> and paste these code after
<data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
Save your template.
3. Posting with expandable post summary
Create a new post. Select Edit Html.
Paste these tag:
<span class="fullpost">
</span>
Now, let say you have three paragraph. Paste your 1st paragraph before the <span class="fullpost"> tag.
Paste the other two paragraph between these two tag.
Example:
Paragraph 1
<span class="fullpost">
Paragraph 2
Paragraph 3
</span>
Publish your post
To have these tag appear whenever you create a new post,
goto Setting -> Formatting. Scroll down and paste these tag into Post Template box.
To do this. Only 3 steps require.
1. Add Conditional CSS.
2. Add the "Read more" link
3. Posting with expandable post summary.
First, login to blogger.
From your dashboard, choose blog you want to edit and click on Layout. On the next screen click on Edit HTML. Under Edit Template tick the Expand Widget Templates box.
1. Adding conditional CSS
Locate <head> tag. Copy and paste CSS code below exactly before the <head> tag.
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
<head>
2. Add the "Read more" link
Find <data:post.body/> and paste these code after
<data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>
Save your template.
3. Posting with expandable post summary
Create a new post. Select Edit Html.
Paste these tag:
<span class="fullpost">
</span>
Now, let say you have three paragraph. Paste your 1st paragraph before the <span class="fullpost"> tag.
Paste the other two paragraph between these two tag.
Example:
Paragraph 1
<span class="fullpost">
Paragraph 2
Paragraph 3
</span>
Publish your post
To have these tag appear whenever you create a new post,
goto Setting -> Formatting. Scroll down and paste these tag into Post Template box.
Tags
the web