New Automatic Read More Plugin for Blogger – Create Post Summary Widget with Thumbnails

This is only a 2 Step Process which will help you to show posts summaries with thumbnails on the blogger homepage,category page(label), archives and search pages. This is a very nice read more plugin from bloggerplugins .

Previously, the read more hack for blogger was good but it was clumsy and one had to manually add function span tags to the post”s html to make it work. But this read more pluging for blogger doesn”t need any tedious work. Its just install and it works like amazing.

Plus its automatically generates thumbnail for the post based on the images inside the posts which is quite cool.

How to Add Automatic Read More Plugin for Blogger – Procedure

Step 1 : First of all Edit your blogger template. Make sure its HTML Expanded.

Find this code

</head>

and replace it with

<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://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
</head>

Offcourse you can edit these parameters.. See below for Customizations.

Step 2 : Now Find

<data:post.body/>

Replace it with

<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>
  <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>

You Can change Read More with Continue Reading , [...] , Read Full Post, etc…

You ca also Replace “Read More” with an Image. For eg..

Replace Read More in the code with <img src=”http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif” align=”right” border=”0″/>

And you are done.. now you should have the post summaries.

Details which can be customized:

1. thumbnail_mode var = “float”;
If you prefer the image on top and the summary below, put “no-float”.
2. summary_noimg = 230;
Place the number of characters in the abstracts that do not contain image.
3. summary_img = 140;
Place the number of characters in the summaries with pictures.
4. img_thumb_height = 100;
Customize the height of the image-thumbnail.
5. img_thumb_width = 100;
Customize the width of the image-thumbnail.

For Any Details …. you ask in Comments.

• Retweet !!
• Digg
• Stumble it!

• Best Related Posts Widget for Blogger – Show Simlar Articles Below Blog Posts Plugin
• How to Create "Continue Reading…" or "Read More…" Link for Blog Post in Blogger ?
• How to Bring Back Newer Post Older Post Links in Blogger ?
• Remove Post Count beside Labels in Blogger Categories ?