Review - Expandable Post Summaries

EXPANDABLE POST SUMMARIES

Expandable Post Summaries is a method by which each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. He can then click the Read More link if he interested.

3 Steps To Implement Expandable Post Sumarries (New Layouts Template)

The First Step to do is by Login To Dashboard and Click Layout for your blog. Then Click Edit HTML. Before you start editing your Layout HTML, make sure you've BACKUP YOUR TEMPLATE by using The Download Full Template Link. Then Check The Expandable Widget Template Button. and Don't Forget To Save Template Often


1. Conditional CSS

The first step on The Edit HTML Tab is to Find The </head> Tag, and then Add Following Code just Before The Tag.

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

Don't forget to Save The Template. What we did here was to define a class called "fullpost" that will appear only on post pages (permalinks).

2. "Read More" Links

The Second Step is to Add The Read More Links which will appear after the paragraph summaries. On The Edit HTML Tab, just Scroll Down till you came to Blog Post Widget Code, which's usually located Around The Middle Of The Page :

<data:post.body/>

After finding the tag, Add The Code Below immediately After The Above Code :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>

You can also add your Post Title at the end of the Read More link so that it will read "Read More on "My Best Post"!"

3. Posting Modification - Modify Your Blog

The Last Step is to Modify The Post Template so that each new post created will show you where to place your summary paragraph and where to place the rest of the post. To do this go to Settings Tab, Formatting Tab and then scroll down to the end of the page to the box for the Post Template. Just Copy and Paste The Following Lines there :

Here is the beginning of my post. <span class="fullpost">
And here is the rest of it. </span>

Don't forget to Save Your Settings. When you click on Create Post and then Edit Html tab of Post Editor you will see the following :

Here is the beginning of my post. And here is the rest of it

Replace The Line "Here is the beginning of my post." with your Summary Paragraph. Then Replace The Line "And here is the rest of it." with The Rest of Your Post. Don't delete the other lines and don't add your summary paragraph above both the lines and your rest of the post between the lines. Then click Publish to publish post.

Before publishing make sure that the two span (code) lines are Present.
Then You can click The Publish button.

*. NOTE

1. You'll have to edit past posts so that they display in summary fashion on the Main Page of the blog. It's because the hack will not apply retrospectively.

2. The hack applies only to posts on the Main Page. Once a post having the hack moves off the Main Page it does not display in this fashion. This is a Main Page Hack.

*. THE ADVANTAGES OF THIS METHOD

The advantages of this method is you get a link to your posts below your summary paragraph which gets an additional link in the search engines indexing. Also you do not have to rely on any external Javascript. The third advantage is that the Read More link opens into a new page leaving your main page still open in viewer's browser.

Source

Edited By C14