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

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

placa-seta 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:

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:

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.

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:

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.

4 Comentários

  1. Muito obrigada!! Estava há um tempão procurando por um modo de acrescentar esse recurso no meu blog, mas com todos dava errado.

    Responder

  2. Olá Marcos? Tdo certo? Isso que eu estava procurando, porém no HTML do meu blog está desse modo: … tentei fazer do modo como disse.. só que ao invés de substituir o “Leia mais” substituí o … deu certo não.. me ajuda? Obrigado.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.