MASIGNCLEAN101

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:



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.



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.



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



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!
Compartilhe esse artigo!
Marcus Vinicius
escreve para o Mundo Informal sob a licença Creative Commons BY-SA 3.0. Você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original do mesmo.
avatar

Hum. Gostei do tutorial, acho que assim fica mais bonito os links.

27 de janeiro de 2013 17:19
avatar

Obrigado Andre! Citei no tutorial como usar no Leia mais, por ser mais útil né...

27 de janeiro de 2013 18:35
avatar

Comecei meu blog esta semana, estou aprendendo a fazer e montar, tenho mt duvidas, mas com este tutorial já me deu uma luz. Obrigada. Vlw.

5 de julho de 2013 08:30
avatar

Que bom que te ajudou! Se tiver alguma dúvida é só perguntar! :>)

5 de julho de 2013 10:54
avatar

como alinhar o "Leia Mais" a direita ???

12 de dezembro de 2013 19:12
Seja livre para expor seu pensamento!

Se preferir, antes leia nossa política para comentários...
Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!