How to Add Automatic Read More Hack For Blogger With Summary and Thumbnail


Automatic Read More hack for blogger is quite easy to use and show summary and thumbnail  for image. This gives a neat and summarized look to the blog template and very helpful in case reader is not interested to read the whole post or just going through your blog.

Recent blogger functionality enables the "Read More" through "Jump Break" and "Read More" link, but it shows all content before the jump break. For summary of the post, the blogger functionality is good but not for image thumbnail. It displays the image in its original size.

The solution of the problem is quite easy and highly used, follow the tutorial below:

1. Login to Blogger Dashboard.
2. Go to Template in Settings.
3. Click on the link Edit HTML.
4. Check Expand Widgets ( i.e Tick Expand Widgets check box )
5. Find the closing </head> tag.
6. Replace it with below Code.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>
</head>

in above codes we can change the numeric numbers according to our requirement as:
summary_noimg = 430; Summary length if no image
summary_img = 340; Summary length if it has image
img_thumb_height = 100; Thumbnail image height
img_thumb_width = 120;  Thumbnail image width

7. Now find this <data:post.body/> tag in your template and replace it with below code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>
8. Finally Save your template and check your blog.

9. Two Read More Problem: 
If you can see two "Read More" links on your blog. you find the code below and remove it:

   <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

Did this post help you? Discuss your problems and suggestions in comments

No comments:

Post a Comment