2009/05/03

Expandable summary post using Jquery

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

4 comments:

I Caps said...

Well i added some new features, now one can get expandable post summary for selective posts with more features. Look it here http://www.ialwayscapital.com/2009/05/blogger-expandable-post-summary-for.html

vuluganck said...

@I Caps

That's the oldest "readmore" version in the world, very uncomfortable when using it.

Anonymous said...

Here is another version that is I found to be very good - it is much more up to date and only uses plain CSS rather than javascript. (i found javascript caused me problems)

Check this one out if you are still looking for something that works for you (and is compatable with the new version of blogger):
http://simplerthanyouthink.blogspot.com/2009/04/blogger-expandable-post-summary.html

Infiq said...

Thanks for the tip..

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.