James John – Software Engineer

Shorten Post in Homepage with Read More link in blogger

Shorten Post in Homepage with Read More link in blogger

Hi all,

It sucks when you open your blog homepage and long posts are seen without been shortened, it makes the blog damn long!

Now i have found a javascript trick to shorten it for you~ :D :)

Procedures:


BACKUP TEMPLATE BEFORE PROCEEDING!

  • Open your template, use CTRL+F and find this
  1. </head>

Just above it, paste this 

  1. <script type='text/javascript'>
  2. var thumbnail_mode = "no-float" ;
  3. summary_noimg = 430;
  4. summary_img = 340;
  5. img_thumb_height = 120;
  6. img_thumb_width = 120;
  7. </script>
  8. <script type='text/javascript' src='http://2netlodge.com/blogger_widget/auto_readmore.js' ></script>

After that, now find another word 

  1. <data:post.body/>
  • Replace <data:post.body/> with 
  1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2. <data:post.body/>
  3. <b:else/>
  4. <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  5. <data:post.body/>
  6. <b:else/>
  7. <div expr:id='&quot;summary&quot; + data:post.id'>
  8. <data:post.body/>
  9. </div>
  10. <script type='text/javascript'>
  11. createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
  12. </script>
  13. <div style='clear: both;'/>
  14. <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
  15. </b:if>
  16. </b:if>

Now you can edit the img thumbnail size and the length of per post text to show in the homepage

summary_ noimg= 430; Length of the text per post if there is no image in the post
summary_img = 340; Length of the text per post if there is image in post
null_thumb_height = 120; The height in pixels of the thumbnail.
null_thumb_width = 120; The width in pixels of the thumbnail
You can also change the Read More to your own word

Hope it helps! :)
Any problem with it drop it

James John

Software Engineer