Thursday, May 8, 2008

Create summaries for the blog posts

Please refer to the How can I create expandable post summaries? in the Blogger help. Here is my experience with my template.

In blogger Dashboard, click layout and select 'Edit HTML' tab. The first thing you need to do is to download the full copy of the template in case you mess up something with the template. At least, you can recover it by uploading the full copy. The template should be a xml file. Please make a copy before any further action.

Now open the xml file in your favored editor, since I am using the layout template, I have to add the following style definition into <header>
   <b:if cond="data:blog.pageType == "item"">
span.fullpost {display:inline;}
<b:else>
span.fullpost {display:none;}
</b:else>


In my template, there is a big section for <b:skin> tag in the header, so I placed the code above just after it and before the end of <head>. This actually defines the style for class fullpost of span tag. If all blogs are on the same page, any texts of class fullpost will be hidden; otherwise, they will be displayed.

The next thing is to enable the summaries ("Read More" link at the end of the blog) when your blog posts are listed on the page.
</b:skin></b:if><div class="post-body entry-content">
<p>
<data:post.body>
<!--add for blog summary-->
<b:if cond="data:blog.pageType != "item"">

<a href="data:post.url">Read more!</a>
</b:if>
<!--end-->
</data:post.body></p>
<div style="clear: both;"> <!-- clear for photos floats -->
</div>

Finally, you need to specify which part of the blog will be hidden. You can use <span> tag (<div> tag doesn't work). Please refer to the help for more information or check this post itself.

No comments: