How to create this recent posts snippet for a blogger template?

Question

I have a blogspot blog, and I want to change the format of its post snippets in home page, similarly to the snippets in this blogspot website(i3 theme with snippets). This website's snippets are exactly same to the full view of its posts except snippets only show the top part of the post(first image only and about 100 words only, but without appearance difference from the post's full view).

My current snippets are a mess. They don't apply line breaks even from headings to paras and also css styles of the posts are not displayed in the post snippets of home page.

Can someone please help me to do this?

As I understood, my current template's relevant codes for the snippets are like below. I think what I have to do is, remove them and add code for snippets of above website instead.

Thank you very much!

  <data:post.body/>
         </div>     
            <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.timestamp/>&quot;,&quot;<data:post.numComments/>&quot;,&quot;<data:post.author/>&quot;);   </script>                            

         </div>     

---

function createSummaryAndThumb(pID,title,url,date,comment,by){
var posturl= url;
var title=title;
var date =date;
var comment = comment;
var div = document.getElementById(pID);
var content = div.innerHTML;

if (/<!--\s*more\s*-->/.test(content)) {
div.innerHTML = getSummaryLikeWP(pID);
div.style.display = "block";

}


else {

var imgtag = "";

var img = div.getElementsByTagName("img");
var summ = summary;


if(img.length>=1) {
imgtag = '<div class="thumb"><a href="'+posturl+'"><img width="300" height="160" src="'+img[0].src+'"/><span class="zoom"></span></a><div class="comment-bubble"><span class="comment-count">'+comment+'</span></div></div>';
}
  var summary1 = imgtag+'<div class="entry-wrap"><div class="entry-header"><h3><a href="'+posturl+'">'+title+'</a></h3></div><div class="metaMore"> '+date+'</div><p class="p-summary clearfix">'+stripHtmlTags(content,summary)+'... </p><div class="metaMore"><a class="readMore" href="'+posturl+'">Read More</a></div></div>';

div.innerHTML = summary1;
div.style.display = "block";
}
}


function getSummaryLikeWP(id) {
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}