If you wanted to give your blogger blog a Wordpress look, here is an another step you can take forward. New Read More post plugin for Blogger blogs can show post summary on homepage with auto generated thumbnails. These thumbnails are taken from the post pages automatically and gets displayed on home page, archive page, labels page etc. Earlier I posted about Read More post hack for Blogger, but this trick will make your job more easier, with a professional touch.

Add Read More Post Plugin to Blogger blogs

• Navigate to your Dashboard >> Layout >> Edit HTML >> Expand Widget Templates
• Search for </head> in your template (Press CTRL+F)
• Replace the above code with the following code

<script type=’text/javascript’>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src=’http://files.bloggerplugins.org/excerpt.js’ type=’text/javascript’/>
</head>

• Now search for another piece of code inside your template >> <data:post.body/>
• Replace this with the following piece of code :

<b:if cond=’data:blog.pageType == &quot;item&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 style=’padding-top:5px;;float:right;text-align:right;’><a expr:href=’data:post.url’ rel=’bookmark’><b>Read More…</b></a></span>
</b:if>

• Save the changes and you are done.

Customize Read More Plugin Look

You can customize the look and feel of this Read More blogger plugin by changing few parameters and values. Checkout the below possible customization options :

You can add an image in place of Read More.. text, by replacing that part from second code with <img src=”http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif” align=”right” border=”0″/> or with other words like : Continue Reading, [..], Read full post here etc.

You can edit the look and feel of the image by editing the following parameters:

1. thumbnail_mode var = “float”; >> Thumbnail will appear above post summary
2. summary_noimg = 230; >> No of characters to show in summary in case of no image
3. summary_img = 140; >> No of characters to display in the summaries with pictures
4. img_thumb_height = 100; >> Display post thumbnail height adjustment
5. img_thumb_width = 100; >> Display post thumbnail width adjustment

That’s it. Now enjoy having Read More post summary on Blogger blogs with auto generated post thumbnails. [via]