3 simple steps to create expandable post

By Deb October 02, 2007

Important Note:

Replace all '[' by '<' and all ']' by '>' in the following codes.
Follow the instructions carefully and ditto.

Step 1:

The first step is to login to Dashboard and click on Layout for your blog. Then click on Edit Html and backup your template by using the Download Full Template link. Then scroll down till you come to [/head] tag and paste the following code immediately above it :

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

Save Template.

NOTE in the layouts template there is a ]]][/b:skin] tag just above the [/head] tag. Add the above code so that it lies between these two tags. What we did here was to define a class called "fullpost" that will appear only on post pages (permalinks).

Step 2:

"Read more" Links

The second step is to add the Read More links which will appear after the paragraph summaries. To do this put a check in the Expand Widgets Template checkbox at the top of the Edit Template text box. This is in the Edit Html subtab of Template tab. Then scroll down in the code till you come to the Blog Posts Widget code where you have to locate this line of code :

[data:post.body/]

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]

Save Template. This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post.

NOTE : Do not use any other code or it will give error.

Step 3:

The last step is to modify the post template so that each post when 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, then Formatting and scroll down to the end of the page to the box for the Post Template. 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]

Save Settings. When you click on Create Post and then Edit Html tab of Post Editor you will see the following

Replace the line "Here is the beginning of my post." (Type your summary here) with your summary paragraph. Then replace the line "And here is the rest of it." (Type rest of the post here.) with the rest of your post. Do not delete the other lines [span class="fullpost"] and [/span]. Also add your summary paragraph above both the lines and your rest of the post between the lines. Then click Publish to publish post. Expandable posts help to get indexed by search engines quickly as it acts as an extra permalink to your site.

Note:Replace all '[' by '<' and all ']' by '>'