How to add Blogger post Readmore summaries and thumbnails on homepage-simple steps

Every blogger know that blogger allowed to design your home page with your recent post with summery and image thumbnail.If there are large amount of post available then you should summarize your blog post with ReadMore with image thumbnail.  working with image thumbnail in blogger is most difficult task than other.

Now there are also some java script widgets available to generate post thumbnail on your blogger home page.but its little bit complicated task.here both two method explained with java-script and CSS only script.

Post summery/snippet with CSS only script[No JavaScript]:

Step 1. Backup
Backup Your Current blogger template.if after customization if your template crash then it will helpful for you.

Go to Template>>Backup and Restore[Seen right on the Top].

Step 2. Its time to implement code to display  post summery and thumbnail. 

Go to Template>>Edit HTML
Now Find this code.

<data:post.body />

Now replace it with following code.

<b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

Now save template.

Step 4. adding CSS
again Go to Template>>Edit HTML
Find

]]></b:skin>

and put below code before above code.[this shows image thumbnail on leftside]

.thumb img {
  float: left;
  margin: 0 10px 10px 0;
}

Or [this shows image thumbnail on right side]

.thumb img {
  float: right;
  margin: 0 0 10px 10px;
}

Step 5.
Click on "Save Template"
This will looks like

Post summery/snippet with Java script:

Now here you can do same task with java script also.java script allowed more customization then above tricks.you can change post summary,change height width of  image thumbnail also.

Step 1. Lets start 

Backup

Go to Template>>Backup and Restore[Seen right on the Top].

Step 2.Find

Go to Template>>Edit HTML
Now Find this code.

</head>

Step 3.
Copy and Past below code before  </head>

<script type='text/javascript'>
summary_noimg = 600;
summary_img = 600;
img_thumb_height = 250;
img_thumb_width = 350;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop)
{
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}
chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img [0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Customize it if you want. 

1. summary_noimg = 600; means that the no of characters show when there is no image with blog post. Change the 600 to your own value to adjust. 

2. summary_img = 600; means that the no of characters show when there is an image with blog post. Change the 600 to your own value to adjust. 

3. img_thumb_height = 250; shows the height of thumbnail with blog post summary. Change the 250 to your own value to adjust. 

4. img_thumb_width = 350; shows the width of thumbnail with blog post summary. Change the 350 to your own value to adjust.

Step 4.
Now search for the following

<data:post.body/>

It may possible you see there are multiple code found above.But replace everyone with following code.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 class='readmore-wrap'>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text- align:right;'>
<a expr:href='data:post.url'>Read More&#187;</a>
</span>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>

Step 5.
Click on "Save Template"

Conclusion:

With CSS only	With JavaScript
It Will easy to implement.and Blogger friendly. Not Possible to customize image thumbnail Size like height and width. Not Possible to customize Post summary Words.	Not easy to imlement Not Blogger Friendly Possible to customize image thumbnail Size like height and width. Possible to customize Post summary Words.