blog.si.log. \'blòg-së-lòg\

BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
CUSTOMIZE YOUR BLOGGER BLOG.
All the tricks, hacks and treats while enjoying your breakfast.




Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

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.


add post summaries on blogger


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.

insert jump break link from COMPOSE tab

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

insert jump break link from EDIT HTML tab

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.

how to add read more tweak on blogger

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

<span class="fullpost">

</span>


5. SAVE SETTINGS.

how to insert post summary tweak on blogger

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
share. comment. subscribe. link.


Share.This.Post.
Share.Your.Thoughts.
Subscribe.To.The.Comments.
Subscribe.To.Websilog.
Create.A.Link.


<< 1 Shared Thought >>


Syaiful Izwan
June 13, 2013 at 6:34 PM

Thank You Very Much Bro! I Used Your Third Technique And Its Working!!
This Is My Link after following your method..Http://Infoaday.Blogspot.Com/
It would be much easier to use the Ctrl+F

By The Way, Thanks Again!

Share.Your.Thoughts.

Copy below HTML link to quickly create a link to this post.



back to share



about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.


about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.