ikmalTips : summarize blog post on blogspot ( III )

Quite recently, I post guide for summarizing blog post on main page. The purpose of using this hack is you can display more post at your front page without clogging the layout with too many posts and texts. Thus, you will maintain a clean and easy to read page content.

There are actually two types of summarizing your post. The first hack, will provide you link at the bottom of summarize post and once clicked you will directed to the post page of the topic desired.
While, the second on will expand/collapse your post on the page itself. You can check out both hacks here :

In this post, I will write about the third option. I read about it at BloggerBuster by Amanda. Check out her blog for lots of easy to follow tutorial. These hack utilize the jQuery Expander Plugin by Karl Swedberg.

The advantage of using this hack is

You no longer need to edit your post with span command to divide between full and summarized
Expanding post are equipped with smooth transition (i recommend older hack if you are planning for this, they have fade effect too and proper alignment on collapse mode)
You can manually select the length of your post by characters.

Let's get on with it.

jQuery Expander Plugin

Step 1 - Back up your original template

Whenever your tries to customize your blog template ALWAYS save the original template into your computer. In case of anything goes wrong either with the code or the after-effect are worse, you can always revert back to the original template before you applied the editing.
To back-up your Blogger template, go to Layout > Edit HTML and click on the "Download Full Template" link near the top of the page. You will be prompted to save a copy of your blog template as an XML file to your computer. Be sure to save this to a location where you can easily find it if required.
To restore to the original setting (before editing), simply upload the template using the upload form located on the same page.
Or, a quick method I always use. Check Expand Widget Template option and copy all the text (Ctrl + A) in the scroll bar box and save it onto any simple text application (Notepad, Wordpad, etc). In case of mishap, simply reverse the process. - useful when you are going to restore in between editing time.

Step 2 - Start adding the codes
- This are for the expand/collapse hack | i want post page method

Find the </head> tag (use Ctrl + F on Firefox for quick find), and paste the following code BEFORE the tag.

<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>

Next, find the following codes (or similar) ;

And replace all with these following codes :

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

Preview your template and save upon success
Skip to Step 3

- This is for the post page hack | show me expand/collapse hack again

Find the </head> tag (use Ctrl + F on Firefox for quick find), and paste the following code BEFORE the tag.

<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.extractor.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

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

});
</script>

Next, find the following codes (or similar) ;

And replace all with the following codes :

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
<a expr:href="data:post.url">Continue Reading</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</b:if>

You can change this to desired text
Preview your template and save upon success

Step 3 - Settings available for hack

Take note on code your applied on </head> mentioned on Step 2. You will notice these codes :

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

This can be customizable to your liking. And also other few available options.

Hope you achieved the summarize layout you want so much. Thanks to both Amanda and Karl again.

That's all. Thank you and happy tweaking.

More topics on ikmalTips.