Aprenda a transformar links em botões utilizando CSS3 no Blogger

Olá amigos! Após alguns dias sem postar, trago hoje para vocês um super tutorial que ensina a transformar os links de seu blog em botões. Mas antes de iniciar o tutorial, peço a todos que notem que é possivel fazer com que todos os links de praticamente qualquer classe do blog se torne botões. Nesse tutorial ensinarei como usá-lo no hack Leia mais do Blogger.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Marque a caixinha "expandir modelos de widgets".

3°passo: Agora usando o Ctrl + F, procure por:

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

4°passo: Como você pode notar que no código acima, a classe jump-link está dentro de uma DIV, então eu passarei ela para dentro do link. O código deverá ficar como o mostrado abaixo.

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

5°passo: Agora que a classe está dentro do link, podemos adicionar o código CSS que dará estilo para o botão. Pressione Ctrl + F e procure o código abaixo.

]]></b:skin>

6°passo: E logo ACIMA deste código, adicione este outro código.

/* ----- CSS do Jump-link (leia mais) ----- */ .jump-link { font: normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif; /* fonte do link, tamanho da letra.. etc */ margin: 0px; } a.jump-link:link, a.jump-link:visited { color: #FFFFFF; /* cor do texto do botão */ background: #FF4040; /* cor de fundo alternativo, aparecerá em navegadores não suportados. */ background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* cores que formarão o gradiente de fundo, a primeira cor fica no topo do botão e a segunda na parte de baixo */ background: -moz-linear-gradient(top, #FF4040, #CD0000); /* repita as cores do gradiente que você escolheu */ border: 1px solid #8B0000; /* cor da borda */ text-decoration: none; padding: 5px; outline: none; -moz-border-radius: 5px; /* valor do arredondamento das pontas do botão */ -webkit-border-radius: 5px; /* valor do arredondamento das pontas do botão */ -goog-ms-border-radius: 5px; /* valor do arredondamento das pontas do botão */ border-radius: 5px; /* valor do arredondamento das pontas do botão */ } a.jump-link:hover { color: #FFFFFF; /* cor do texto do botão com o mouse em cima */ background: #FF4040; /* cor de fundo alternativo com o mouse em cima */ background: -webkit-gradient(linear, left top, left bottom, from(#FF4040), to(#CD0000)); /* gradiente de fundo com o mouse em cima */ background: -moz-linear-gradient(top, #FF4040, #CD0000); /* gradiente de fundo com o mouse em cima */ border: 1px solid #8B0000; /* cor da borda com o mouse em cima */ -webkit-box-shadow: 0px 0px 5px #333333; /* cor da sombra do botão quando o mouse está em cima do botão */ -moz-box-shadow: 0px 0px 5px #333333; /*cor da sombra do botão quando o mouse está em cima do botão */ box-shadow: 0px 0px 5px #333333; /*cor da sombra do botão quando o mouse está em cima do botão */ } a.jump-link:active { color: #FFFFFF; /* cor do texto do botão quando é clicado */ background: #000000; /* cor de fundo do botão quando é clicado */ border: 1px solid #000000; /* cor da borda do botão quando é clicado */ }

7°passo: Você pode alterar as cores sem se perder no código por meio dos comentários. Se não souber o código das cores, você pode conferir uma lista com inúmeras cores para testar no seu botão clicando aqui.

fonte:

Espero que tenham gostado!

Share This :