27 de jan de 2013

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 essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

5 comentários

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

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

      Excluir
  2. 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.

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

      Excluir
  3. como alinhar o "Leia Mais" a direita ???

    ResponderExcluir

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo