SimpleBloggerTips: Create Post Summary Widget with Thumbnails

Hi Guys Todays i will help you to show posts summaries with thumbnails on the blogger homepage.Previously i have posted Post Summaries on Blogger With Read More/Continue reading was good but it was so old and one had to manually add function span tags to the posts html to make it work.Its automatically generates thumbnail for the post based on the images inside the posts which is quite cool only you have to follow these steps to install.

Add Automatic Read More Plugin for Blogger

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>

You can edit these parameters.See at end of post 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>

Note:-

• You Can change Read More with Continue Reading , [...] , Read Full Post, etc…
• You ca also Replace “Read More” with an Image. 
• 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..

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.