My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some
template hacking and javascript too.
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:
<<span style="color: rgb(0, 102, 0);">div class='post-body entry-content'></span><br style="color: rgb(0, 102, 0);" /><span style="color: rgb(0, 102, 0);"> <data:post.body/></span><br style="color: rgb(0, 102, 0);" /><span style="color: rgb(0, 102, 0);"> <div style='clear: both;'/> <!-- clear for photos floats --></span><br style="color: rgb(0, 102, 0);" /><span style="color: rgb(0, 102, 0);"></div></span>
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:
<span style="color: rgb(0, 102, 0);"><div class='post-body entry-content'></span><br /> <span style="color: rgb(255, 0, 0);"><b:if cond='data:blog.homepageUrl == data:blog.url'><br /> <style type='text/css'>.restofpost {display:none;}</style><br /> </b:if></span><br /> <span style="color: rgb(0, 102, 0);"><data:post.body/></span><br /> <span style="color: rgb(255, 0, 0);"><b:if cond='data:post.link'><br /> <a expr:href='data:post.link'>Read more...</a><br /> <b:else/><br /> <b:if cond='data:post.url'><br /> <a expr:href='data:post.url'>Read more...</a><br /> </b:if><br /> </b:if></span><br /> <span style="color: rgb(0, 102, 0);"><div style='clear: both;'/> <!-- clear for photos floats --></span><br style="color: rgb(0, 102, 0);" /><span style="color: rgb(0, 102, 0);"></div></span><br />Now save your template.
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><br /><div class="restofpost">Type rest of post here</div>
And save your settings.
This
will take care of all new posts. Type the summary text in between the
summary-div-tags. Type the rest of the post between the other div-tags,
and publish!
Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-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.
