Personalizar o Hack “Leia mais” do Blogger – Resumo de Postagem

Se em seu blog você usa resumo de postagem, o famoso link “Leia mais…” e deseja trocar o texto por alguma imagem ou a soma de imagem mais texto, tenho aqui um ótimo tutorial que vai te ajudar nisso. Um blog bem organizado aproveita os espaços disponíveis e os resumos de postagem são fundamentais para a navegabilidade de seu blog, pois facilita para o visitante a busca por conteúdos. Ter um blog organizado e personalizado é muito importante.

Já tratei aqui no [ Ferramentas Blog ] da importância de se ter um blog bem organizado e de se aproveitar bem os espaços. Essa otimização dos espaços em seu blog pode e deve começar pelo seu conteúdo, pelos artigos, para facilitar a leitura e a navegação por suas páginas. Para entender melhor, leia:

• Quantidade e tamanho das Postagens na primeira página

O que vamos tratar abaixo é como configurar o link “Leia mais”. Muitas pessoas entram em contato querendo saber como coloque uma imagem ao lado do link ou como podem trocar o texto por uma imagem, sendo mais adequado para o layout do blog.

O que virá pressupõe que você já está usando e sabe usar os resumos de postagem. Temos alguns tutoriais aqui e recomendo que use:

• Como criar resumo de postagem expansível?
• Resumo de Postagem Expansível automático

Personalizando o link.

Tudo o que vamos mostrar abaixo é bem simples e objetivo, bastando alterar algumas linhas no código-fonte de seu blog. Por isso é recomendável que antes aplique as mudanças em um blog de testes e faça backup de seu blog principal para evitar problemas.

• Backup no Blogger – seu Blog seguro

Como vamos usar imagens será preciso usar um host, uma hospedagem para as imagens que você quiser aplicar. Então é importante saber usar imagens em seu blog e como obter uma URL delas:

• Usando Imagens no Blog Blogger
• Armazenar Imagens na Internet – PicasaWeb (para armazenar imagens na internet)
• ImageSharing – URL de imagens Automaticamente (URL de imagens de forma mais simples)

Identificando o código.

O primeiro passo é identificar a linha do código onde está o texto do link “Leia mais…” ou semelhante. Abra o painel do Blogger em “Layout” ~> “Editar HTML” lembrando de marcar a caixa “Expandir modelos de widget” e procure por algo como:

<a expr:href='data:post.url'>Leia mais!</a>

Exatamente essa linha é que será sempre trocada pelas linhas que forem mais adequadas ao seu caso, conforme mostraremos abaixo. Tenha muita atenção e paciência e verá que é bem simples de usar.

Aplicando Imagem e texto.

Como usamos aqui no [ Ferramentas Blog ] vou mostrar como usar o código de imagem e link ao mesmo tempo e deixando a imagem alinhada com o texto.

Com a linha identificada no seu código-fonte, troque esse trecho por completo, colocando no lugar o seguinte, fazendo as devidas alterações:

<p align='right'><a expr:href='data:post.url'><img src='URL_da_IMAGEM' style='vertical-align:middle;border:0'/> Leia mais...</a></p>

Onde está indicado de vermelhor (“URL_da_IMAGEM”) troque pelo endereço da imagem que você desejar. Recomendamos que a imagem usada tenha no máximo 20px de largura e altura, para se adequar bem aos espaços e ao tamanho da fonte do texto que ficará ao lado da imagem. No caso aqui do [ Ferramentas Blog ] a imagem tem apenas 16px em suas dimensões.

Onde está indicado de rosa é o alinhamento do link, aqui no caso alinhado à direita (“right”). Para alinha à esquerda troque a indicação por “left” e para alinhar ao centro escreva “center”.

E para o texto que virá junto da imagem você pode escrever o que quiser.

Aplicando apenas Imagem.

Se deseja aplicar apenas uma imagem no lugar do link, substituindo inclusive o texto, basta trocar a linha indicada exatamente por:

<p align='right'><a expr:href='data:post.url'><img src='URL_da_IMAGEM'/></a></p>

Da mesma forma as partes indicadas de vermelho e rosa devem ser modificadas conforme o seu interesse.

Nesse caso a imagem pode ter o tamanho que achar melhor e for mais indicado, pois não precisa alinhar-se ao texto, mas recomendamos que não seja nada exagerado e que o ícone indique exatamente o que se propõe para que seu visitante saiba o que fazer quando ver o ícone.

Mais artigos sobre como personalizar seu Blog.

• Personalizar Links de Navegação do Blogger
• Medidas de um Template do Blogger
• Adicionar nova Barra Lateral ao Blog [Nova Sidebar / Coluna]