Como trocar o jump-link do Blogger por uma imagem

O jump-link do Blogger pode ser facilmente estilizado com CSS no código fonte do template. Porém também é possível personalizá-lo mais ainda substituindo o link por uma imagem. É tão fácil quando aplicar estilos á ele.

Acesse o Painel do Blogger e vá em Editar HTML. Marque a opção Expandir modelos de widgets e tecle CTRL+F. Pesquise pelo seguinte código:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Substitua a parte destacada de vermelho por:

<img src='URL_DA_IMAGEM_AQUI'/>

Hospede a imagem em um servidor e onde está destacado de azul substitua pelo link direto da imagem. Também é possível inserir imagem e texto juntos. Para isso substitua a parte destacada de vermelho do primeiro código por:

<img src='URL_DA_IMAGEM_AQUI' style='vertical-align:middle;border:0'/> Continue lendo

A parte destacada de roxo pode ser modificada caso queira. Visualize seu blog para certificar de que está tudo correto. Caso precise fazer algum ajuste em relação á posição da imagem adicione o seletor abaixo no CSS do template:

.jump-link {

}

Entre os colchetes adicione as propriedades e os valores necessários. Depois é só salvar.

Nenhum comentário:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...