How to Create Expandable "Read More" on Blog

Creating expandable "read more" on blog has advantage over longer post. This can save space and let readers only read the initial content about the post and if the content interest them, they only click the "read more" in order to read the entire content of the post.

Here's the very easy steps to create the tweak:

1. Log in to Blogger account.
2. Go to Dashboard and click Layout.
3. Click Edit HTML
4. Check mark the "Expand Widget Templates"
6. Press CTRL+F and find the code below:

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

7. Replace the above code with the following code:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

8. Click Save. Done for the First Step.

Next, we need to add few codes to blogger settings.

1. Click Settings.
2. Click Formatting.
3. Go to lower portion and look for "Post Template" and paste the code below inside the blank box:

<span class="fullpost">


</span>

4. Click Save Settings.



We're almost done. Next is how to post the content of your blog so that the Read More will take effect.

1. When you compose your post, make sure to select "Edit Html" tab/mode and not Compose mode.

2. You will notice the following code:

<span class="fullpost">


</span>

3. Post the initial content you want to display above the code:

<span class="fullpost">

4. Post the remaining content of your post below:

<span class="fullpost">

and above:

</span>


Publish your post. It's Done. Cheers! Please leave comment.

Posted in: Create Expandable "Read More" on Blog