Как создать этот фрагмент из последних постов для шаблона блоггера?

Question

У меня есть блог blogpot, и я хочу изменить формат его фрагментов сообщений на домашней странице, аналогично фрагментам на этом веб-сайте blogspot(тема i3 с фрагментами). Фрагменты этого сайта в точности совпадают с полным просмотром его сообщений, за исключением того, что фрагменты показывают только верхнюю часть сообщения (только первое изображение и только около 100 слов, но без различия внешнего вида от полного просмотра сообщения).

Мои текущие фрагменты - беспорядок. Они не применяют разрывы строк даже от заголовков к параграфам, а также стили CSS для постов не отображаются в фрагментах постов на главной странице.

Может кто-нибудь, пожалуйста, помогите мне сделать это?

Как я понял, соответствующие коды моего текущего шаблона для фрагментов приведены ниже. Я думаю, что я должен сделать, удалить их и добавить код для фрагментов вышеупомянутого веб-сайта.

Большое спасибо!

  <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];
}