Jquery Read More-Expandable Post | Blogger Tips

This tutorial describes how to add "Read More" link in homepage for expandable post.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head>tag .
4.Copy below code and paste it just beforethe </head> 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: 150, // default is 100
expandText: '[Read More...]', // default is 'read more...'
});

});
</script>
   
Now change the red color text as you wish. Here 150 means number of words for summary, the minimum is 100 and the maximum is 400 



5.Now again Scroll down to where you see this code :

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



4.Now Replace above code with below 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>



5.Click on "Save Templates" and now you are done. I hopy you like this Read More options in your blog.

Comments Post a Comment

Praveen - June 17, 2010

I believe this is the best and efficient way of doing this than any other way. Check it out:

http://praveenbattula.blogspot.com/2010/06/read-more-link-to-blogger-posts-without.html

Leave a Comment