Pular para o conteúdo principal

Fazer botão

Vou mostrar hoje como fazer botões usando CSS, é bem simples basta colocar os códigos nos lugares certos, veja abaixo:
.botao a{
width: 220px;
color: #000000;
text-decoration: none;
display: block;
font-family: "Comic Sans MS";
font-size: 10pt;
text-align: left;
background-color: #33FFFF;
border: 1px solid #0000CC;
padding: 3px;
}
.botao a:hover{
color: #0000FF;
background-color: #FF9966;
border: 1px solid #FFFF00;
}

Coloque essa parte junto com os demais estilos CSS da sua pagina, isso fica na pagina editar HTML. É bem fácil, procure por:


body{....}
img{...}
a:link{....}
No seu blog terá muitos outros códigos além desses.



Este código é um modelo, você pode mudar praticamente tudo nele, veja o que cada parte faz:


width: largura do botão
color: cor da fonte
text-decoration: none; retira o sublinhado
font-family: "Comic Sans MS"; tipo da fonte
font-size: 10pt; tamanho da fonte
text-align: left; alinhamento
background-color: #33FFFF; cor do fundo
border: 1px solid #0000CC; cor, tipo, e largura da borda
padding: 3px; espaço entre o texto e as bordas


Se quiser também pode usar uma imagem como fundo, mas use uma imagem do tamanho exato do botão, para fazer isso troque background-color: #33FFFF, por background-image: url(URL DA IMAGEM);

Agora vamos a segunda parte, colocar os botões no site, entre na página layout, adicionar gadget, html/javascript e coloque o código abaixo:
<div class="botao">
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
<a href="URL DO SITE">NOME DO SITE</a>
</div>
Com isso podemos colocar quando links quisermos e não é difícil fazer, depois somente vamos adicionando mais links e se quisermos mudar os estilos dos botões somente precisamos mexer no estilo CSS que foi mencionando acima.

Comentários

  1. Eu não entendi a parte do "colocar o trecho dentro disso"

    Explica por favor?

    ResponderExcluir
  2. o código CSS é pela pagina editar html e os link pela pagina layout adicionar um gadget, html/javascript

    ResponderExcluir
  3. Olha ainda naum entendi porfavor me explique, por e-mail?

    musicstardownload@gmail.com

    ResponderExcluir
  4. oi eu fiz mas ficou um embaixo do outro não deveria ficar no lado??

    Carol_carpen@hotmail.com

    ResponderExcluir
  5. esse código eles ficam um embaixo do outro, para ficar lado a lado use o código do menu horizontal
    http://dicasparablogs.blogspot.com/2009/05/links-lado-lado-menu-horizontal.html

    ResponderExcluir
  6. ola,

    queria saber como colocar um botão na postagem.

    ex: colocar uma imagem de download e o site de destino, em blog de downloads

    ResponderExcluir
  7. geralmente os sites onde você hospeda os arquivos para download já dão o código pronto, mas se quiser fazer outro botão é só usar o mesmo link e criar uma imagem

    ResponderExcluir
  8. Bom Dia!
    Fabiano, gostaria de saber como faço para colocar aquele botão ou íconi, não sei como chama, do orkut em meu blog, ende eu ou meus amigos possa clikar e ir para o orkut.se puder me ajudar?
    Desde já agrdeço o carinho.
    Abraço e mto sucesso!!!
    Carmen

    ResponderExcluir
  9. c@rmencit@
    fazer um botão para o orkut é como para qualquer outro site, você precisa de uma imagem e colocar nela o link do seu perfil ou comunidade no orkut, veja aqui sobre como fazer uma banner, o procedimento é o mesmo

    http://www.dicasparablogs.com.br/2010/01/como-fazer-um-banner.html

    ResponderExcluir
  10. Oii
    Eu denovo aqui :D
    olha Eu fiz tudo certinho...
    mais eu so queria saber, como faço para o 1° botão fique de Uma Cor diferente das Outras de baixo ?
    Vlw & Obrigado

    ResponderExcluir
  11. ÁDAMYS você teria que criar um estilo diferente para o primeiro botão

    e usar o código assim
    <a class="estilo" href="URL DO SITE">NOME DO SITE</a>

    naquele botão que deseja diferente.

    ResponderExcluir
  12. Olá fabiano, estou com a mesma dúvida do Anônimo. Queria saber como Colocar uma imagem como link, Por exemplo : Numa postagem eu deixei um link pra baixarem um arquivo, só que eu queria deixar esse link com outra aparência, como um botão onde estivesse escrito bem grande "DOWNLOAD". No blogger temos a opção de alterar o nome nome do link, mas o que eu quero é que, ao invés de aparecer um nome, apareça uma imagem. Pensei em colocar um banner, mas daí ficaría numa parte predeterminada, o que eu não quero. Podería me ajudar? abraço, seu blog é 10.

    ResponderExcluir
  13. para usar uma imagem como botão de download precisa trocar o link pelo código da imagem, assim:

    <a href="lnk do download" target="_blank"><img src="endereço da imagem" border="0" /></a>

    ResponderExcluir
  14. Amigos estou montando um blog para postar cartões para serem compartilhados no orkut,eu não estou conseguindo fazer aquela caixa para disponibilizar o HTML para os seguidores copiarem abaixo de cada postagem...
    Por favor me deem uma dica para eu poder fazer este trabalho...

    E-Mail ravena_sol@yahoo.com.br

    Abraços

    ResponderExcluir
  15. aqui tem um gerador de código que faz aquelas caixinhas

    Como fazer um banner

    ResponderExcluir
  16. Olá.. Adicionei imagens na coluna lateral do Blog. Só que elas estão muito afastadas, queria que as imagens ficassem mais próximas.

    ResponderExcluir
  17. Igreja Presbiteriana do Boqueirão
    tem muito espaço entre as imagens? isso depende de como adicionou as imagens se for uma em cada gadget seria complicado resolver pois tem que mudar a configuração do blog todo

    ResponderExcluir
  18. como é que muda a cor da fonte?

    ResponderExcluir
  19. o trecho color: #000000; é a cor da letra só precisa trocar o 000000, veja aqui o Código das Cores

    ResponderExcluir
  20. como faço para colocar imagem na frente dos links do índice do blog. Aprendi aqui a colocar o índice mas gostaria de saber como faço para colocar botoes no início de cada link do índice. Já procurei aqui mas não acho nada q me explique direitinho como fazer.
    O q faço?

    ResponderExcluir
  21. Boa noite,esse eu consegui colocar direitinho,mais eu queria lado a lado,e o código do menu horizontal que peguei aqui http://dicasparablogs.blogspot.com/2009/05/links-lado-lado-menu-horizontal.html
    até consegui colocar lá mais na hora de mexer no código pra fazer os botões não da certo.Quando visualizo(gadget)vejo direitinho ai quando salvo fica um abaixo do outro.Acho que não to conseguindo fazer os botões.Não tem como fazer esse ficar lado a lado?obrigado.

    ResponderExcluir
  22. oi, eu fiz tudo isso mais não sei como almenta a letra, coloca outra cor, eu tentei mais invez de aparecer aparece o link e não o que eu fiz, e quando clica no que eu escrevi aparece, desculpe mais isso que está no blog não existe

    ResponderExcluir
  23. os códigos que mostramos não tem no modelo padrão é para criar a formatação do botão...

    ResponderExcluir
  24. Você poderia criar uma video-aula? Achei muito complicado, não consigo entender muito bem. Uma video-aula ajudaria muito! Obrigada

    ResponderExcluir
  25. já publicamos alguns videos, mas não sobre fazer botão com codigos CSS como neste tutorial...

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Sites de referências

Quer saber e mostrar no seu blog de onde vem suas visitas? Além dos contadores de visitas tradicionais que mostram estatísticas e o numero total de visitantes ainda podemos colocar no blog algumas ferramentas que mostram de onde vieram nossos visitantes, em qual site eles encontram nosso link para visitar o blog. O Feedit , não precisa de cadastro é apenas copiar o código(clique no botão getFeedit no site) e colocar no blog e já está pronto, as pessoas que entrarem no blog após você colocar o código já apareceram na lista gerada pelo site, ele tem algumas opções entre elas mostrar um mapa. O site Referrer precisa fazer cadastro e também fornece uma lista de onde vieram as visitas, mostrando inclusive a quantidade de visitantes de cada site. O cadastro é rápido e depois é só gerar o código para colocar no blog.Nos dois casos o código deve ser colocado no blog pela pagina layout, adicionar gadget, html/javascript, cole o código e clique para salvar. Esse tipo de serviço além de matar n

Novo Painel do Blogger e os Comentários

O Blogger atualizou seu painel para melhorar a navegação e deixar o Blogger mais fácil de usar. Concordo que ficou bonito, mas a notificação sobre novos comentários desapareceu. Na pagina inicial antiga do Blogger era fácil de saber havia comentários aguardando a moderação.

Formulário de contato

Uma coisa que todos os blogs precisam é manter um meio de comunicação com seus visitantes além dos comentários pois nem tudo que as pessoas querem dizer a respeito de um blog são comentários existem outros assuntos como criticas, sugestões, parcerias e outras coisas. Então é sempre bom deixar um endereço de e-mail no blog, mas além disso é possível colocar um formulário que enviará as mensagens de seus visitantes para seu e-mail. Esse formulário de contato pode ser colocado facilmente no blog pegando o código no site http://www.formulariopro.pog.com.br , lá você preencherá alguns dados como seu e-mail e pronto. Basta pegar o código e colocar no seu blog, no Blogspot isso deve ser feito pela pagina editar layout >>> adicionar elemento de pagina >>> html/javascript então coloque o código nessa janela e clique salvar. Lembre-se de verificar a caixa de spam (ou e-mails em massa) de seu e-mail pois alguns deles classificam os e-mails recebidos desse serviço com spam. Ve