Eu já mostrei aqui como colocar uma imagem no lugar do link leia mais, mas existe outra forma de personalizar esse link tão importante em nossos blogs. Com este tutorial, você poderá mudar a cor, fonte, e até colocar uma imagem de fundo. Confira!
ou ler todos e responder os que eu puder.
Agora vamos ao assunto principal:
Tutorial
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 negrito 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á :)CRÉDITO:http://www.cherryboomb.com
Nenhum comentário:
Postar um comentário