Read More or Expandable Post Summaries for Blogger Posts

November 12, 2008

This is one of the most popular hacks in Blogger. And it's very useful. And practical. In case you don't know what it is:

• it makes your post appear just with short introduction (a teaser), followed by "Read More" link, which opens (or collapses) your full post
• it's a great way to make your posts more exposed (especially older ones on the main page)

There are two ways of doing this:

1. "Read more" link that OPENS the full post (same way you click on the post title normally) - see the EXAMPLE HERE
2. "Read more" link that COLLAPSES full post on the main page (so you'll still be able to see the rest of the posts from the main page)...see the EXAMPLE HERE

1. "Read more" link that OPENS the full post (example)

First thing, back up your template. Then, go to:
DASHBOARD --> LAYOUT --> EDIT HTML, click on the EXPAND WIDGET TEMPLATES box in the upper right corner. Use CTRL + F and find the following code:

]]></b:skin>
</head>

Place the following code in orange in the middle, like this:

]]></b:skin>
<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</head>

Next, find this part of code:

<data:post.body/>

...and place the code in orange below it, like this:

<data:post.body/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span style='font-weight:bold;'><span><a expr:href='data:post.url' target='_blank'>Read more!</a></span></span>
</b:if>

Save Template.
Now, how to apply those settings to our post? Look at the code below:

Your short introduction will be here
<span class="fullpost">
And the rest of your post here
</span>

...all you have to do is "surround" your text / pictures (in orange) with "span"...
Now, you can place "span" manually on every post you make.
Or you can make it appear every time you write a new post. You'll do that like this:
DASHBOARD ► SETTINGS ► FORMATTING, scroll down to the "Post Template" box, and place this code below:

Your short introduction will be here
<span class="fullpost">
And the rest of your post here
</span>

..Save Settings.
Now when you write a post, click on the EDIT HTML mode, and you'll have this:

..just place your content accordingly.

Ok. Little bit on styling. You can change the alignment of "Read more" by adding this to your code:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span style='float:right; font-weight:bold;'><span><a expr:href='data:post.url' target='_blank'>Read more!</a></span></span>
</b:if>

...we've changed the alignment to the right by adding style in orange. Text has a "bold" style, we can change that to "italic" or remove that style to keep "normal" text.
...we can change the font size of "Read more" and color too...add the code in blue...

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span style='float:right; font-weight:bold;'><span><a expr:href='data:post.url' target='_blank'><font size="0" color="black">Read more!</font></a></span></span>
</b:if>

...change the number 0 to whatever size you want, and for the color, you can use hex values (#000000) or color names (from libraries)...

!IMPORTANT! - by default, "Read more" link opens a full post in a new tab. If you want it to open it in the same window, delete the orange part in your code....

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span style='float:right; font-weight:bold;'><span><a expr:href='data:post.url' target='_blank'><font size="0" color="black">Read more!</font></a></span></span>
</b:if>

...Save Settings.

NOTE:

• you'll have to edit old posts manually to apply "Read more" link in them....
• you can change the text of a Read more link. In the code section, instead of Read more, you can write whatever....(like Continue reading, or See full post...)
  

The original hack from: hackosphere.com
Customized version: blogdoctor.me

2. "Read more" link that COLLAPSES full post (example)

This is much better way for post appearance. What does it do? It collapses you post on the same page (with a nice effect), without leading you to a individual post page. You can also "collapse it back".
But, this method will place a "Read more" in every post you've made! Which can be all right, but also can be a disadvantage. Choice is youurs...

Let's do it. Back up your template, then go to:

DASHBOARD ► LAYOUT ► EDIT HTML ► click on the EXPAND WIDGET TEMPLATES in the upper right corner. Using CTRL (Option) + F, find the following line of code:

</head>

...place the following code in orange ABOVE it, so it will look like this:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});

});
</script>

</head>

....next, find this part of code (it may look a bit different in your template):

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

...DELETE it, and REPLACE it with this code:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

...and that's it!

NOTE:

• you can change [...] into whatever you want. In the code (CSS part), just replace it with Read More (or anything you wish)..
• use some different styles from Javascript below

This style uses the jQuery JavaScript library. There are different plug-ins for the script on here...

Thanks to BloggeBuster for tips.

Good luck and....Smile!