How To Add Read More Function On Blogger Without Thumbnail?

I had my post about adding Read More function on blogger with thumbnail recently. (You can check it here.) This Read More function is also known as Expandable Post or Display Summary Post hack. This is a display summary post hack without thumbnail. This trick on the blog html is for those who doesn't like posting images in their blog posts.

1. Go to Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

2. Find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<!-- JavaScript Posts Summaries -->
<script language='javascript' src='http://www.sigmirror.com/files/16723_kc9lz/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://www.sigmirror.com/files/16722_nbdvm/jquery.extractor.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$(&#39;.excerpt&#39;).expander({
slicePoint: 450, // default is 100
expandEffect: &#39;fadeIn&#39;,
expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
userCollapseText: &#39;[^]&#39; // default is &#39;[collapse expanded text]&#39;
});

});
</script>
<!-- End JavaScript Posts Summaries -->

3. Now, find this section of code (or similar) in your template:

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

4. Replace the above section of code in with the following instead:

<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>
<a expr:href="data:post.url">Read More..</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

5. Preview the template, if you can see the Read More... link then SAVE it.

Drop us a comment! ^^