Expandable Posts Hack in Blogger

Expandable Post summaries are widely used today in every blogs. Using expandable posts or Read More links to blog posts would make your blog more visitor-friendly! This post explains how to add expandable post summaries to Blogger blogs.

Please Note: Before Editing your Template, Save a copy of your current template by clicking 'Download Full Template' in 'Edit HTML' page of the Blogger 'Layout' Window and 'Preview' the changes before Saving.

Do the following steps:

1. Go to Blogger Layout - Edit HTML - and click Expand Widget Templates
Add Expandable Posts Hack in Blogger!

2. Search(Ctrl+F) for:

<div class='post-body'>

and paste the following code just after the above line:

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

3. Again search(Ctrl+F) for:

<p><data:post.body/></p>

and paste the following code just after the above line:

<a expr:href='data:post.url'><i><p align='right'>Continue Reading...</p></i></a>
</b:if>

4. Finished! Just remember to add these codes in your blog posts:

(beginning of your post i.e., summary)
<span class="fullpost">
(remaining part of your blog post)
</span>

CSS Credit: Blogger Help and Hackosphere

HAPPY BLOGGING!

Bookmark this post:

I'm reading: Expandable Posts Hack in Blogger ~

Related Posts :