Resumo automático apenas nas postagens para Blogger

Resumir as postagens do blog ajuda na organização e facilita a leitura de vários títulos e introduções. Importantíssimo para todos os blogs.
Existem vários e vários tutoriais de como resumir suas postagens, de forma automática ou manual. Cabe vocêescolher a melhor forma para os seu trabalho.

Recentemente encontrei um tutorial muito bacana, ensinando a resumir de forma automática todas as postagens, colocando sempre uma imagem principal na lateral esquerda do resumo.

Veja a imagem:

O melhor desse script, é que as páginas individuais do blog não são prejudicadas. O resumo é aplicadoexclusivamente nas postagens da página inicial.

Leia também:

• Como criar páginas no Blogger 

O tamanho do resumo e tamanho das imagens é configurável. Além da opção de resumo automático com mais caracteres (ou menos) caso não tenha nenhuma imagem na postagem resumida.

Caso você queira um resumo manual, onde você decide em cada post se vai resumir ou não e qual o tamanho do resumo, leia:

• Postagens resumidas no Blogger

Vamos aprender a instalar o resumo automático no Blogger:
1) Faça login no Blogger, entre em “Modelo” do seu blog.

2) Clique em “Editar modelo” (está no final da página).
Caso não apareça essa opção, use o Blogger in Draft.

3) Marque a opção “Expandir modelos de widgets” e procure (Ctrl + f) por:

</head>

4) Cole o seguinte código ANTES do código encontrado:

<!-- Resumo automático -->
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</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>
<!-- Fim resumo automático -->

Configure o resumo:
summary_noimg = Número de caracteres do resumo caso não tenha imagem na postagem;
summary_img = Número de caracteres do resumo caso tenha imagem na postagem;
img_thumb_height = Altura da imagem em px;
img_thumb_width = Largura da imagem em px.

5) Agora procure por:

<data:post.body/>

6) Substitua o código encontrado por:

<!-- Resumo automático -->

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/> 

<b:else/>

<p><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>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leia mais...</a>

</span></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

</b:if>

<!-- Fim resumo automático -->

Leia mais... = Texto do link para continuar lendo a postagem. Pode ser editado.

7) Clique em "Visualizar". Se as postagens estão resumidas clique em “Salvar Modelo”.

Importante: Se você usa outra forma de resumo de postagens, é importante retirar antes de instalar um novo script.

Esse tutorial foi desenvolvido pelo blog Dicas e Encomendas.