[Blogger - Customização] - Como transformar links em botões utilizando CSS3 no Blogger

No artigo de hoje veremos como criar botões utilizando CSS3. Já faz um tempo que eu comecei a utilizar esses botões aqui no blog, e algumas pessoas entraram em contato comigo para perguntar como eu os criava. Foi então que resolvi criar este artigo para mostrar como fazê-los. Para quem possui conhecimentos básicos sobre CSS, não mudará muita coisa com relação as propriedades que serão utilizadas, mas para quem não possui conhecimentos, deverá prestar bastante atenção nas explicações para não causar nenhum tipo de problema.

Veja abaixo o exemplo de alguns links em formato de botão.


Eu vou mostrar como criar esses botões em cima de links, mas nada impede que você utilize tais propriedades CSS para customizar qualquer outro conteúdo ou elemento do seu blog. Confira o tutorial abaixo.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML para visualizar o código fonte do seu template. Em seguida clique dentro do código do seu template e pressione Ctrl+F para abrir a caixa de Busca do editor. Procure o código de algum link. O código de um link é semelhante ao mostrado no exemplo abaixo.

<a href="endereço-da-página">Palavra do link</a>

Para facilitar que você encontre os links que existem dentro do seu template, procure apenas pelo começo do código, que foi destacado em vermelho acima. Eu utilizarei como exemplo, para este tutorial, o link "leia mais" do Blogger. Se quiser utilizar o mesmo link, procure pelo código abaixo.

<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>


3. Como você pode ver 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>


4. Você pode manter o nome da classe como jump-link mesmo, ou mudar para qualquer outro que você quiser — eu manterei como está. Agora que a classe está dentro do link, adicionaremos o código CSS que irá adicionar o estilo de botão. Pressione Ctrl+F novamente para abrir a caixa de Busca do editor, e procure o código abaixo.

]]></b:skin>

5. Imediatamente 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 - define o tamanho da letra, fonte 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á nos navegadores que não aceitam CSS3 */
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 */
}


Note que na frente de algumas propriedades do código há comentários, os comentários são escritos da seguinte maneira: /* exemplo de comentário */. Estes comentários servem para que você saiba o que cada atributo faz. Altere somente os atributos que contêm comentários à frente. Você pode ver uma lista com diversas cores para utilizar no seu botão clicando aqui.

6. Depois de colocar as cores que você quer para o botão clique em Visualizar modelo e, se estiver tudo certo, clique no botão Salvar modelo. Pronto, agora é só ir no seu blog e ver como está aparecendo o link "leia mais".

Se você quiser adicionar o estilo de botão a algum outro link, basta procurá-lo dentro do template ou dentro do artigo, adicionar uma classe à ele (com o nome que você quiser) e depois adicionar o CSS, lembrando de mudar o nome da classe no CSS. Por exemplo, para fazer o botão 6 (roxo) que você viu no começo desse artigo, eu coloquei ele dentro do artigo da seguinte maneira:

<a class="post-example-button-6" href="#">Botão 6</a>

...em seguida adicionei o CSS da seguinte forma.

.post-example-button-6 { propriedades aqui }
a.post-example-button-6:link, a.post-example-button-6:visited { propriedades aqui }
a.post-example-button-6:hover { propriedades aqui }
a.post-example-button-6:active { propriedades aqui }


Então é isso, basta mudar o nome das classes e pronto. Espero que vocês tenham gostado do artigo e que façam bom uso dessa customização. Qualquer dúvida sinta-se a vontade para postar um comentário. Até o próximo artigo.

Atualização — 02.05.2012 às 16h55
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 17 comentários neste artigo!

  1. Muito Bom!!!
    Vou testar pra ver se consigo!

    Obrigado

    ResponderExcluir
  2. Muito bom tutorial! Mas se eu consegui entender (tô lesada!), pra aplicar em qualquer link, basta mudar o nome do CSS?

    Uma dúvida que me atormenta: como impedir a cópia de imagens e até de arrastá-la, como você faz? Quero proteger meu logo, que já andaram copiando mas os códigos que eu achei não funcionaram.

    Abraço!

    ResponderExcluir
  3. Sybylla: exatamente, para aplicar em qualquer link, primeiro você precisa adicionar a classe dentro do link, em seguida basta adicionar o CSS, e no CSS você deve utilizar o mesmo nome da classe que você utilizou no link.

    Quanto a impedir que as imagens sejam arrastadas e copiadas, postarei, mais tarde, um artigo mostrando como fazer! Agradeço as visitas e os comentários! Abraços.

    ResponderExcluir
  4. Nem tentei fazer ainda mas acho que daria um bom post....
    Vou tentar fazer agora... A explicação depois do passo 7 ajuda muito.

    ResponderExcluir
  5. kkkkkkkkkkkkkk
    Tô me sentindo o foda só porque eu consegui fazer ...
    Vlw Igorrr...

    ResponderExcluir
  6. Bom dia Igor, queria saber como você fez para colocar em baixo do "Cabeçalho" a barra com, início, contatos, banners etc... e como você colocou sua barra "attribution" toda personalizada, por exemplo: links ,imagens, cores diferentes?

    Se puder me explicar como fez isso lhe agradeço desde já.

    ResponderExcluir
    Respostas
    1. Olá VPR, para colocar essa barra abaixo do cabeçalho do blog, eu apenas adicionei um gadget de lista de links. Você pode ler mais sobre o assunto neste artigo que escrevi: http://bloggandonaweb.blogspot.com.br/2010/08/como-colocar-um-menu-horizontal-no.html, mas é necessário que seu template tenha os códigos necessários para transformar a lista de links em um menu horizontal (todos os templates do Blogger já possuem tais códigos). Quando o gadget Attribution, eu o removi e adicionei um gadget HTML/JavaScript no local onde ele ficava (no menu Layout) e escrevi o que achei melhor, você pode ler mais sobre o assunto neste nosso outro artigo: http://bloggandonaweb.blogspot.com.br/2010/09/como-remover-o-widget-attribution-do.html. Qualquer dúvida, sinta-se a vontade para comentar nos referidos artigos. Agradeço as visitas, volte sempre.

      Excluir
  7. Parabens pelo post!!
    pode me explicar como colorar esse botões (online, by-nc-nd e page rank) aguardo.

    ResponderExcluir
    Respostas
    1. Olá Android NTA, publicarei um artigo mostrando como colocar esses selos. Fique no aguardo!

      Excluir
  8. Como posso alterar o alinhamento do botão. Antes de aparecer á esquerda, apareça á direita ou á esquerda.

    ResponderExcluir
    Respostas
    1. Naruto_Uzumaki, note que no passo 2 deste artigo, a classe "jump-link" estava dentro de uma DIV, e nós a removemos e passamos para dentro da tag do link. Pois bem, adicione uma nova classe dentro da DIV, por exemplo: "jump-alinhamento", seu código ficará assim:

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


      Em seguida, logo abaixo do código do passo 5 que você adicionou ao seu template, adicione este outro código:

      div.jump-alinhamento {text-align: right !important;}

      Você pode alinhar o botão à direita (right), à esquerda (left) ou no centro (center). Creio que isso seja o que você queria. Qualquer dúvida entre em contato novamente. Agradeço a visita e o comentário!

      Excluir
    2. Já tentei esse procedimento mas mesmo assim não resulta

      Excluir
    3. Naruto_Uzumaki, talvez trocando o atributo "text-align" por "float" funcione, seu código ficaria da seguinte maneira:

      div.jump-alinhamento {float: right !important;}

      Pra saber exatamente qual código CSS resultará em seu blog, seria necessário analisar a estrutura HTML do mesmo, pois às vezes há outros códigos CSS que forçam o botão a ficar em uma posição, fazendo com que nosso código não surta efeito. Espero que esse novo código lhe ajude.

      Excluir
  9. Amigo eu não consigo achar ou tem outro modo, meus link laterais estão dentro de um gadget "pagelist". Como eu faço para a aparência deles serem igual do botão 08? (www.redepr.net). Obrigado se poder ajudar.

    ResponderExcluir
    Respostas
    1. Olá Redepr, não consegui acessar o seu blog, porém, para adicionar as customizações aos links do gadget "Páginas", você deve acessar o seu template e clicar na opção "Expandir modelos de widgets", sem seguida procure pelo título do gadget que você deseja alterar, e você verá o seguinte código:

      <b:if cond='data:link.isCurrentPage'>
      <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
      <b:else/>
      <li><a expr:href='data:link.href'><data:link.title/></a></li>
      </b:if>

      Após encontrar o trecho de código informado, adicione uma classe dentro da tag dos links, e siga o tutorial normalmente (passo 4 em diante) para adicionar o código CSS e escolher as cores que você desejar. Espero que isso lhe ajude. Agradeço a visita e o comentário, volte sempre.

      Excluir