Outro dia postei como personalizar o link leia mais das postagens do Blogger, agora trago aqui outro post sobre o assunto mas agora é criando um efeito hover no link. esse efeito será criado com uma imagem muito simples de ser criada, mas mesmo assim deixarei o link para download das imagens editáveis aqui, então vejamos como colocar esse link em seu blog.
Para download das imagens editáveis clique Aqui.
Primeiro observe as imagens para ver melhor o funcionamento deste efeito.
Agora veja como deve ficar a imagem final, essa imagem deve ser hospedada na internet. se ainda não sabe onde hospedar suas imagens leia esse outro post meu Hospedagem de imagens gratuita.
A parte que será mostrada antes de passar o mouse será a parte de cima da imagem.
Essa imagem é criada com fundo transparente, mas pode ser alterada ao seu gosto.
Ao passar o mouse sobre o link a imagem simplesmente é trocada sumindo a parte de cima e aparecendo a de baixo.
Agora que já expliquei o funcionamento vamos ao código que fará esse efeito acontecer.
Entre no seu Blog e vá em Design, Editar Html e marque a caixinha Expandir Modelos de Widgets. Nunca se esqueça de salvar uma cópia do modelo do seu template.
Agora de um CTRL+F no seu teclado e procure pelo seguinte código.
Para download das imagens editáveis clique Aqui.
Primeiro observe as imagens para ver melhor o funcionamento deste efeito.
Agora veja como deve ficar a imagem final, essa imagem deve ser hospedada na internet. se ainda não sabe onde hospedar suas imagens leia esse outro post meu Hospedagem de imagens gratuita.
A parte que será mostrada antes de passar o mouse será a parte de cima da imagem.
Essa imagem é criada com fundo transparente, mas pode ser alterada ao seu gosto.
Ao passar o mouse sobre o link a imagem simplesmente é trocada sumindo a parte de cima e aparecendo a de baixo.
Agora que já expliquei o funcionamento vamos ao código que fará esse efeito acontecer.
Entre no seu Blog e vá em Design, Editar Html e marque a caixinha Expandir Modelos de Widgets. Nunca se esqueça de salvar uma cópia do modelo do seu template.
Agora de um CTRL+F no seu teclado e procure 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 >
Se por acaso você não encontrar esse trecho em seu blog faça a seguinte, procure por.<data:post.body/>E logo abaixo dele você cola o trecho
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
Agora você deve trocar o trecho marcado em vermelho por este aqui.<a expr:href='data:post.url' id='lermais'></a>Agora procure por ]]></b:skin> e Logo acima dela cole o seguinte código.
/* link ler mais personalizado */Aqui a marcação em vermelho é onde voce deve colocar o link da imagem que você hospedou na internet, e na marcação em azul é o que faz o link aparecer no lado direito do post, mas se você quiser que apareça no lado esquerdo como o original é só trocar right por left.
a#lermais, a#lermais:link, a#lermais:visited, a#lermais:active {
background: transparent url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/alternativa%20extreme%20menu/ler-mais.png) no-repeat left top;
display: block;
height: 30px;
width: 90px;
float: right;
margin: 10px;
}
a#lermais:hover {background-position: left bottom;}
/* fim ler mais personalizado */
Está pronto agora é só salvar e ver como ficou.
