Aprenda a alterar e estilizar o link "Leia mais" do Blogger

O recurso "Leia mais" do Blogger é um pequeno botão acessível que pode ajudar a compactar suas postagens em sua página inicial e aumentar os cliques. Muitos blogueiros utilizam esse recurso, mas às vezes o texto padrão do Blogger pode se misturar um pouco demais com sua postagem. É importante fazer esse link se destacar para que os visitantes saibam que eles devem clicar para continuar a ler o restante de sua postagem.

Felizmente, este link realmente é fácil de estilizar e editar ao seu gosto. Você pode alterar o texto "Read More" para algo de sua própria escolha, adicionar uma imagem em vez de texto e estilizar totalmente a aparência do link de texto "Read More".

Vou mostrar-lhe exatamente o que você precisa fazer logo abaixo! Veja:

COMO EDITAR O LINK "LER MAIS" DO BLOGGER

1. No painel do Blogger, vá para Modelo> Editar HTML

2. Clique dentro da caixa de texto do editor e pressione CTRL + F (ou CMD + F no Mac) para abrir a caixa de pesquisa no canto superior direito. Dentro da caixa, digite:

<div class = 'jump-link'>

E pressione Enter para procurar essa linha.

3. O código que é encontrado deve apresentar como este:

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

PARA MUDAR O TEXTO "LEIA MAIS"

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

Edite o texto em vermelho acima com o texto do novo link, como:

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Continue Lendo...</a>
</div>

UTILIZAR UMA IMAGEM EM VEZ DO TEXTO

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img src="http://urldasuaimagem.com/sua-imagem.jpg"></a>
</div>

Substitua o código original por um código de imagem como mostrado acima. O URL da imagem será, naturalmente a URL da sua imagem será carregada. Você pode usar Photobucket para carregar e hospedar sua imagem, e pegue o URL HTML para usar aqui.

PARA ESTILIZAR O LINK DE TEXTO

Para adicionar seu próprio estilo ao link de texto, faça isso adicionando CSS ao elemento .jump-link. Veja como abaixo:

Pressione CTRL + F para abrir a caixa de pesquisa novamente e desta vez encontrar:

]]></ b: skin>

Antes do código encontrado, insira seu CSS. Você pode pegar o exemplo abaixo:

.jump-link {
text-align:center;
}

.jump-link a {
font-size:15px;
padding:10px;
border: 1px solid #000;
background-color:#ccc;
color:#000;
font-weight:bold;
}

.jump-link vai estilizar a DIV que o texto está incorporado, enquanto. jump-link a vai estilizar o texto do link real. O código acima irá tornar o seu link "leia mais" como este exemplo abaixo:

Você pode modificar as cores e qualquer outra coisa que você quiser, se você estiver familiarizado com CSS é claro rs.

Espero que isso ajude você a criar um link exclusivo "Leia mais" para o seu blog do Blogger! Se você tiver um pouco de criatividade, você pode personalizar ele conforme as cores do seu blog, o fazendo assim se destacar!

Se este post te ajudou, por favor compartilhe-o: