Posted by Admin
In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.
Step 1: Back up your template
Open the Layout|Edit HTML-tab on your Dashboard, and download the template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.
Step 2: Modify the template code
Scroll down and look for the following piece of code:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:
<div class='post-body entry-content'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style type='text/css'>.restofpost {display:none;}</style>
</b:if>
<data:post.body/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>Read more...</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:
<div class="summary">Type summary here</div>
<div class="restofpost">Type rest of post here</div>
And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.
