Cool! I got this “Read More” Expandable Posts Link from www.eblogtemplates.com. It is very simple to install in new blogger blog. I can say it 'as easy as ABC'.
With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post.
Ok, let's see how to do it.
Step #1 - Update Your Template Code
Add the following code below the <div class=’post-header-line-1'/> and <div class=’post-header-line’> tags if you’ve got both.<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Step #2 - Add a Class Tag in Your Default Post Template
Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in.<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>
Lastly, you need to navigate in your Blogger account to “Settings” -> “Formatting” and scroll all the way down to the bottom. Paste the following code in the last option called “Post Template”.<span class="fullpost">
</span>
Ok, we’ve got everything all setup and it is time to go and test it out!
When writing your new post, anything you put outside the <span class="fullpost"> tag will be the teaser text and appear on the screen by default. If you want to hide the rest of the post, you needs to go in between the <span class="fullpost"> and </span> tags in order for the “read more…” link to work properly. See the screenshot below.
Good luck!
Read more...
