Blogging Tip : Making expandable blog posts with links

A key benefit to including a "Continue reading... " link, "Read more..." link or whatever name you want it to be, is you may place few articles on homepage instead of having few number of long posts/articles to read on. Thus, you're making the server to fetch a long data and it will affect your page loading time. In other words, you'll be able to hide all post content behind a link. When the link is clicked, the user will be sent to the post page, where the entire text of the post will become visible. This guide will explain how this can be done.

Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates. Copy the code below and place it right between the closing b:skin tag and the closing head tag.

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
.rmlink {
display:none;
font-weight:bold;
float:right;
}
<b:else/>
span.fullpost {display:none;}
.rmlink {
display:inline;
font-weight:bold;
float:right;
}
</b:if>
</style>

Press Ctrl+F and type <data:post.body/> in the search box.


And place the below code right after it.

<span class='rmlink'><a expr:href='data:post.url'>-&gt;Read More...</a></span>


Save the settings.

Lastly, click on Settings> Formatting and at the bottom, you will find the text box provided to specify the "Post template". Copy/paste these lines into that text box and save the settings.

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>



Save the settings and you're done with it. From now on, your post editor is divided into 2 sections - type your summary and type the rest of your post.