Expandable summary post using Jquery Posted by vuluganck | at Sunday, May 03, 2009

Hi , have you ever heard the word "Read more"? You are owning a blog and you don't know what "Read more" means? You are having a long content with many posts but you still don't know anything about "Read more" form?Or you know "Read more" but you feel it is very hard to implement it to your blog ? This is the 3rd tip and this is the easiest way to make it , these are 2 others tips about creating Read-more:" Auto Read more-the newest version" or " Basic Read more" .

This Read-more instruction is not similar to the others , it's using Jquery code which is the fastest and lightweight language in blog/website designing.And its special style is always have smooth effect , you can feel that effect every time you click on it.

Now lets try it now..
Log in you blogger account and go to Layout > Edit HTML > Expand Widget Templates.



Now find the </head> tag then paste this code right before it :

<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: '[Read More...]', // default is 'read more...'
});

});
</script>

Notice the red code, 280 is the number of summary words, the minimum is 100 and the maximum is 400 , up to you.
Change the Read More by another word you like as Click here , View full here....( you can't change it by an icon,image..,just word).

Next find this whole code :

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

And replace it by this new 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>

You have Done , now Save and join it.Leave me a comment if you are in trouble with this tip.
And follow me on Twitter here to get more new tips

Requirements:Jquery
Website : http://zenplate.blogspot.com
Convert to Blogger: Zenplate