Criar Resumo de Postagens

Nesta postagem compartilho com vocês essa dica de como fazer resumo de postagens. Fazendo isso o seu blog ficará com uma cara mais profissional.

Para colocar em seu blog... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrado esta tag, cole ACIMA dela o seguinte código

#showlink { 
font-size: 11px; /* escolha o tamanho da fonte para o link */ 
float: right; /* escolha se quer link flutuando à esquerda ou direita */ 
margin-right: 30px; /* aplique margens para posicionar link */ 
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */ 
font-weight: bold; 
} 
 
#showlink a { 
color: #ffffff; /* escolha a cor de seu link */ 
} 

Agora, procure pela tag

</head>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

<!-- JavaScript Resumo do Post --> 
<script type='text/javascript'> 
var thumbnail_mode = &quot;float&quot; ; 
summary_noimg = 450; 
summary_img = 400; 
img_thumb_height = 300; 
img_thumb_width = 200; 
</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) { 
if(thumbnail_mode == "float") { 
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; 
} else { 
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>'; 
summ = summary_img; 
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary;} 
//]]> 
</script> 
<!-- JavaScript Resumo do Post - Fim--> 

Os números destacados no código acima podem ser modificados se no seu template não ficar bom esta largura.

A parte destacada de vermelho são as letras do resumo. E, a parte destacada de rosa corresponde a largura e a altura da imagem do resumo da postagem.

Agora, procure por:

<div class='post-body entry-content'> 
<data:post.body/> 
<div style='clear: both;'/> <!-- clear for photos floats --> 
</div> 

Tendo encontrado este trecho, apague-o e substitua por esse código

<div class='post-body entry-content'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&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> 
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span> 
</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> 
<div style='clear: both;'/> <!-- clear for photos floats --> 
</div> 

Tendo feito isto está pronto!!!

Qualquer problema ou duvida, não deixe de perguntar nos comentários.