12 julho 2013

Personalizar o link leia mais

Vá no modelo HTML do seu blog, e procure pelo seguinte código: ]]></b:skin>
Cole logo acima, o seguinte código:

.jump-link {
float: right; /*Escolha para ficar alinhado á direita (right) ou esquerda (left)*/
line-height: 18px; /*Altura da linha, mude de acordo com o tamanho da fonte*/
background: url('link-da-imagem-de-fundo') no-repeat;
width: 200px; /*Largura da imagem*/
height: 32px;/*Altura da imagem*/
margin-right: -20px; /*Margem direita*/
margin-bottom: 30px; /*Margem inferior*/
padding-left: 0px; /*Ajuste para posicionar o texto*/
padding-right: 0px; /*Ajuste para posicionar o texto*/
}
.jump-link a {
font-family: Arial;
font-size: 14px;
font-weight: normal;}
.jump-link a:hover {
color: #000;
text-decoration: none;}

Entendendo
As partes do código que estão em  vermelho são importantes para alinhar a imagem que você usar no fundo. As margin right e bottom vão determinar a posição do link como um todo, puxando mais para a direita e colocando um espaço abaixo dele. Já os padding right e left vão ajudar a alinhar o texto dentro da imagem. Basta modificar os valores para ver a diferença que eles fazem, e logo você entenderá :)

Extra
  algumas imagens para vocês usarem como fundo. Credito Cherry Boomb











Nenhum comentário:

Postar um comentário