HOW TO CREATE EXPANDABLE POST SUMMARIES (Read more..)

by: Dewanto (4/15/09)

This trick is handy if you have long articles on one blog page. With this trick, you can choose to display an arbitrary amount of text from the beginning of each post, as a teaser for the whole article. Then if readers want to read the rest of your post, they may click read more.. to see the whole article in one page.


Step 1. Go to edit html page
Sing in your blogger account, after you brought in the dashboard choose one of blog you want to edit. Than click “ layout” link than click the edit html tab.

Step 2. save current template and check expand widget template
After you brought in edit html page you may start editing, however before you continue it is very important to save your current template with clicking the “download full template” link. Don’t forget to check the “expand widget template” or you cannot find tag you going to edit.

Step 3. conditioning
This step is to put the code for the conditional css, changes how posts display on different pages. You have to find ]]></b:skin> or </head> tag. Click Ctrl+F than the find toolbar will appear below, just type </head> to the blank field to find them. Than insert these following code between ]]></b:skin> and </head>.

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

than the code must be like this:

]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</head>

Step 4. The “Read more…” links
This is to add the Read more… links which will appear after the paragraph summaries. Just find the <p><data:post.body/></p> code in your template by typing that code via the find toolbar. Add the code below immediately after the above code :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read more..</a>
</b:if>

than the code must be like this:

<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read more..</a>
</b:if>

Than save template to continue

Step 5. Post Modifications
The final job 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:

<span class="fullpost">

</span>

When writing your new post, anything you put above the <span class="fullpost"> tag will be the teaser text. The main body of your post needs to go in between the <span class="fullpost"> and </span>
tags. Note that you must write on edit html tab, not compose tab.

Example:

Tomorrow’s near, never I felt this way
Tomorrow, how empty it’ll be that day
It tastes a bitter, obvious to tears to dried
To know that you’re my only light
I love you, oh I need you
Oh, yes I do

<span class="fullpost">

Don’t sleep away this night my baby
Please stay with me at least ’till dawn
It hurts to know another hour has gone by
And every minute is worthwhile
Oh, I love you
</span>

Now, when a reader visits your blog, this post will appear like this:
Tomorrow’s near, never I felt this way
Tomorrow, how empty it’ll be that day
It tastes a bitter, obvious to tears to dried
To know that you’re my only light
I love you, oh I need you
Oh, yes I do
Read more…
When they click the link, they'll go to the post page where they'll see the whole thing

Congratulations, you have now completed this job! Please tell me how you like it, was this explained clearly enough? I sure would appreciate any feedback you can offer me, thanks.