Como deixar postagem resumida com miniaturas

Olá galera do 'blogando de verdade', neste tópico ensinarei a como deixar seu blog com aparência bem agradável, de maneira que seu visitante se sinta a vontade de ler seus post's. Sendo assim seu blog terá uma aparência do modo de vista (estética) agradável. Seus textos ficarão abreviados, e junto uma imagem em tamanho reduzido (é claro se no seu post tiver uma imagem, não importa o tamanho).
Recomendo fazer backup (cópia de segurança) completo do seu blog, assim se você não gostar, poderá desfazer.

Vamos a obra:
faça login do seu Blogger, vá até modelo/editar HTML/clique em Expandir modelo de widgets aperte as teclas CRT+F e no canto superior do seu navegador aparecerá a caixa de pesquisa,

<div class='post-body entry-content'>

<data:post.body/>

conforme imagem abaixo

Substitua a parte <data:post.body/>  por a tag abaixo:

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>»»Leia mais...</a></div>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>  

Depois vamos personalizar:

Você poderá substituir a parte "Leia mais..." pela a frase que quiser.

Mais uma modificação: 

Cópie o código abaixo e cole acima da tag ]]><b:skin>:  

.rmlink {

font-size: 120%;

float: right;

margin-right: 30px;

margin-top: 10px;

font-weight: bold;}

.rmlink a {

font-style: normal;

font-weight: bold;

font-variant: small-caps;

font-family: Arial,Sans-Serif;

color: #24618e; /*Cor do Link*/}

.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/

.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/

Agora clique em visualizar e veja se está abrindo a página normal. Obs. provavelmente vai estar somente com o título da postagem sem a postagem (normal).

Agora sim o toque final: 

Procure pela tag </head> e em baixo dela copie todo o código abaixo:

<!-- JavaScript Posts Resumidos-->

<!--

-->

<style type="text/css">

.thumbnailimg IMG {

 max-width:150px;

   width: expression(this.width > 150 ? 150: true);

   max-height:120px;

   height: expression(this.height > 120 ? 120: true);

}

.thumbnailimg {

 float:left;

 padding:0px 10px 5px 0px;

}

</style>

<script type='text/javascript'>

var thumbnail_mode = "no-float" ;

var classicMode = false ;

var summary_noimg = 50;

var summary_img = 40;

var indent = 3;

</script>

<script  type='text/javascript'>

//<![CDATA[

function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {

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

}

function getSummaryImproved(post,max){

   var re = /<.*?>/gi

   var re2 = /<br.*?>/gi

   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi

   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi

  

   post = post.replace(re4,'')

   post = post.replace(re3,'<br /> ').split(re2)

  

   for(var i=0; i<post.length; i++){

    post[i] = post[i].replace(re,'');

   }

 var post2 = new Array();

 for(var i in post) {

  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);

  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

 }

 var s = "";

 var indentBlank = "";

 for(var i=0;i<indent;i++){

  indentBlank += " ";

 }

 if(post2.join('<br/>').split(' ').length < max-1 ){

   s = post2.join(indentBlank +' <br/>');

 } else {

  var i = 0;

  while(s.split(' ').length < max){

   s += indentBlank + ' ' + post2[i]+'<br/>';

   i++;

  }

 } 

 return s;

}

function createSummaryAndThumb(pID){

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

 if(img.length>=1) {

  if(thumbnail_mode == "float") {

   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';

   summ = summary_img;

  } else {

   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';

   summ = summary_img;

  }

 }

 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';

 div.innerHTML = summary;

 div.style.display = "block";

 }

}

//]]>

</script><!-- Fim JavaScript Posts Resumidos-->

Visualize e se estiver tudo certo, pronto seu blog está com as postagens resumidas e junto uma imagem pequena do lado, tornando assim muito mais agradável ao seu visitante.
Conforme figura abaixo.

Obrigado pela visita e qualquer dúvida, deixe em baixo do post a mesma, que retornarei o mais breve possível.

Leia mais...