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:
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:
- 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)
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.
Nenhum comentário:
Postar um comentário