Blog Optimize | Read More on Articles

article by: Charles Ivan Palma
referred by: Kid Tech Guru
information by: Hackosphere

One thing bloggers commonly search to make their site's main page easier to navigate is the "Read More" or "Expandable Posts". In the past when there scripts where not available, people used the anchor or link strategy. The create a link below the post then link it to a duplicate complete article. But Kid Tech Guru had just referred me this one. An expandable post for blogger or blogspot users.

Here is how you create an expandable post:
1. Open your account in blogger.com or blogspot.
2. Go to Layout->Edit HTML
3. Select Expand Widget Templates
4. Find </head> attribute.
5. Copy all the code here before the </head> attribute.
6. Find post-body and copy the red things below:
<div class='post-body' expr:id='"post-" + data:post.id' >

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

<p><data:post.body/></p>

<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>
7. Save Template

Using the tool:
1. When posting select until what part you want to show first.
2. After you have selected, place the code below:
<span id="fullpost">
3. Below the code above is the continuation of the post.
4. After you finished creating the article, place the code below:
</span>

It should look like this:
[ARTICLE FIRST PART...]
<span id="fullpost">
[ARTICLE CONTINUATION...]
</span>

5. Save your post.
6. View your post.

Here is an example of the expandable post: Song Lyrics.

Note: If you want to get the original article, click here
** If you encounter problems, contact the original creator or me at cipals15@gmail.com.