3 ways to add "read more" on blogger

Adding "Read More" or post summaries on blogger home page, even label or archive pages, is a great way to create a "snapshot" of your blog posts thus this engages the readers to "read more" about each of them. As Blogger added the Jump Break feature, it's pretty easy to create post summaries now without having to edit the HTML template.

There are basically 3 ways to include a "read more" link on blogger. One is through Jump Break Blogger feature, the other, using Post Template Blogger setting, and third, using a javascript to give an accordion-like effect read-more.

Technique #1. Using Blogger Jump Break feature.

COMPOSE tab on POSTING section.
Place your cursor to the section of your post where you'd like the "read more" link (or jump link) to appear then click the INSERT JUMP BREAK icon.

EDIT HTML tab on POSTING section.
Add <!-- more --> to the post area where you'd like the post teaser to end.

For customized third-party templates, you need to go to the EDIT HTML page of your template and add this code:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

right after this:

<data:post.body/>

For step-by-step instructions, check out Blogger's tutorial on Jump Breaks.

Technique #2. Using Blogger Post Template feature.

This requires editing the HTML codes, so make sure to back up your template!
1. On the EDIT HTML page, search for

<data:post.body/>

2. Replace it with:

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

<data:post.body/>

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

3. SAVE TEMPLATE.

4. Go to SETTINGS. Choose FORMATTING. Under POST TEMPLATE section, add this:

<span class="fullpost">

</span>

5. SAVE SETTINGS.

When you create a new post, add the teaser or snippet ABOVE the span of full post whereas the rest of the post, INSIDE it.

add the teaser here

<span class="fullpost">

rest of the post goes here

</span>

You can also check How to Add "Read More..." Expandable Posts link in Blogger for complete guide and screenshots.

Technique #3. Accordion Effect Read More Using Javascript.

View demo.


The javascript and tweak came from Sharing Everyone. It's almost the same as Technique #2 as it also uses Blogger Post Template feature. The only difference: (1) addition of the read more javascript file on the header, and (2) a change in the template where you replace this:

<div class='post-body entry-content'>

to this:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[-] Resume...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

For complete tutorial and customization, check out Sharing Everyone's How to create Read More.

Other "Read More" Tweaks.

customize "read more" on blogger
2 ways to add read more with thumbnails on blogger
show only post titles on blogger homepage
post titles with thumbnails on blogger

Related Blogs and Website.

Creating 'After the jump' summaries
How to Add "Read More..." Expandable Posts link in Blogger
How to create Read More