Colocar Leia Mais no Blogger com imagens (Tutorial)

Por | Atualizado em 2015-05-22

Hoje vamos explicar como resumir os seus posts no Blogger e colocar a mensagem “leia mais” automaticamente. Este procedimento adiciona uma pequena imagem ilustrativa (thumbnails), concedendo um aspeto mais profissional ao seu blog.

Colocar Leia Mais no Blogger com imagens (automaticamente)


Em primeiro lugar, faça o backup do seu template, para que possa reverter as modificações, caso algo corra mal. Para isso, consulte o seguinte artigo: Backup Template Blogger.

Em seguida, aceda ao menu “Desing” – “Editar HTML” – ative a funcionalidade “Expandir modelos do widget”. Em seguida procure a seguinte linha de código:

<data:post.body/>

Não consegue encontrar a linha de código referida? Experimente clicar no botão “Avançar para Widget” presente no menu “Modelo” – “Editar HTML” do Blogger.

avançar para widget blogger

Agora, selecione o Widget “Blog1” e no código fonte, expanda o do trecho “post”. Para isso, basta clicar na seta posicionada ao lado do código fonte. Substitua essa linha pelo seguinte código:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Salve as alterações, e visualize o resultado. Você poderá alinhar a imagem ilustrativa à esquerda ou à direita, para isso, aceda novamente ao editor do seu template e procure a seguinte linha de código:

</b:skin>

Imediatamente antes cole o seguinte código:

Para alinhar imagem à direita:

thumb img {
float: right;
margin: 0 12px 12px 0;
}

Para alinha imagem à esquerda:

.thumb img {
float: left;
margin: 0 12px 12px 0;
}

Alterar o texto “Leia Mais”..

Você poderá ainda personalizar a mensagem exibida nos resumos dos post, não sendo obrigatório apresentar a mensagem “Leia Mais”.

Para isso, aceda à sua conta Blogger e clique no menu Esquema (ou Layout). No esquema do seu template clique no link “Editar” presente em “Mensagens do Blogue”.

Edite o texto a exibir no campo “Texto do link da Página de mensagens” – Guarde as alterações e verifique o resultado final.

hack leia mais blogger

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *