Article | How To Create Jquery Read More-Expandable Post in Blogger

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

});
</script>

Note:

280 is the number of summary words, the minimum is 100 and the maximum is 400

You Can Change the word Read More... as your choice.



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.Refresh your site to see the effect.

Loading...