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 é aplicado exclusivamente nas postagens da página inicial.
Leia também:
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:
Vamos aprender a instalar o resumo automático no Blogger:
1) Faça login no Blogger, entre em “Modelo” do seu blog.
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.
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><!-- 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 -->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/><!-- Resumo automático -->
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</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 == "item"'><data:post.body/></b:if></p>
</b:if>
<!-- Fim resumo automático -->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.
