Como fazer e colocar botões no blog

Para fazer botões no seu site ou blog o jeito mais fácil é usar um estilo CSS para colocar essa imagem do botão como fundo de um texto(seus links). Calma parece um pouco complicado, mas são poucas linhas de códigos e depois colocar ou modificar os botões será uma tarefa muito simples e rápida.
Antes de começar precisamos achar ou criar 2 imagens para usar como botões, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link. Veja aqui alguns programas grátis para editar imagens, eles são bons para fazer os botões e outras imagens que precise no seu blog. Depois disso você precisa hospedar as imagens em algum lugar sugerimos o ImageShack.

Agora vamos começar colocar os novos botões no seu blog, primeiro vamos colocar o estilo CSS, entre na pagina editar html, procure por body{...tem varias coisas aqui....}, antes da palavra body coloque o código abaixo:

.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}

Assim fica bem fácil localizar esse código dos botões quando quiser fazer alterações nele, sua pagina editar html ficará assim:

/* Primary layout */
.botao a{text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
background-color: #F2DBB9;
background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
width: 210px;
text-indent: 5px;
height: 30px;
display: block;
line-height: 30px;
font-size: 12pt;
}
.botao a:hover{
color: #000099;
background-color: #cbe1ec;
background-image: url(http://img254.imageshack.us/img254/6578/outa.jpg);
}
body {background-color: $mainBgColor;

Então clique para salvar, agora vamos colocar os links onde usaremos esses botões, entre na pagina layout, clique em adicionar gadget, html/javascript e cole esse código:

<div class="botao">
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
<a href="endereço" target="_blank">nome do site</a>
</div>

Apenas faça as alterações colocando o nome e endereço dos sites que quiser, pode colocar quantos sites desejar não existe limite. Agora é só salvar e visualizar seu blog esses links já aparecerão com os botões que você fez.
Já parece tudo pronto, mas faltou explicar como alterar esses botões, o código que publicamos foi apenas um exemplo, os valores que estão no código são referentes ao tamanho do botão que usamos, então quando usar suas imagens faça os ajustes necessários.

text-indent: 5px; margem esquerda do texto
width: 210px; largura do botão
height: 30px; altura do botão
line-height: 30px; altura da linha(deve ser igual à altura do botão)

Sobre a largura do botão ainda temos que verificar se o texto de nossos links não serão grandes demais para o botão pois se o texto ocupar duas linhas a imagem do botão se repetirá e certamente o efeito visual disso é péssimo para o layout, neste caso você deve reduzir o texto do link ou refazer o botão mais largo.

Outro detalhe é o porquê usamos uma cor de fundo se já fizemos o botão com uma imagem, a resposta para isso é simples: é melhor prevenir do que remediar quer dizer em caso da imagem não carregar por qualquer motivo aparecerá uma cor de fundo mesmo assim que sugerimos usar uma cor parecida com a cor do botão. A utilidade disso é, por exemplo, se o fundo do seu blog for preto e usar um botão branco, com texto preto, se o botão não aparece por algum motivo o texto do link pode ficar invisível devido à cor de fundo do blog, então colocando uma cor de fundo no botão temos a certeza que pelo menos essa cor sempre aparecerá junto com o link.

Fazer botões sem usar imagens
Fazer um menu lado a lado(horizontal)
Código HTML das cores
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

131 comentários:

  1. dá para colocar só nos marcadores?

    ResponderExcluir
  2. sim, é possivel usar isso em qualquer parte do blog, veja essa postagem
    http://dicasparablogs.blogspot.com/2009/03/personalizando-os-marcadores-do-blog.html

    nesse link diz para colocar o nome guiarapido no estilo mas o procedimento é o mesmo, tanto faz usar a palavra botao, guiarapido ou qualquer outra.

    ResponderExcluir
  3. Oi, tudo bem?
    Obrigado pela visita no www.infoxcomp.com

    realmente use o Ocioso, Colmeia... Com seus posts conseguirá muitas visitas... Eu mesmo já add nos favoritos...

    Até mais!!!

    www.infoxcomp.com

    ResponderExcluir
  4. cara eu num to conseguindo colocar o primeiro codigo

    ele fala:Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: mainBgColor

    ResponderExcluir
  5. luanlcpmainBgColor é uma variavel que o blogspot usa pra definir a cor, mostrei body {background-color: $mainBgColor; no código apenas como sugestão de onde colocar o código dos botões para ficar fácil de achar mas isso não faz parte do código dos botões, então se colocou isso junto apague

    ResponderExcluir
  6. eu botei o botao no meu blog mais na hora de botar uma nova imagem nao ta funcionando

    a img é essa aqui:
    http://img510.imageshack.us/my.php?image=89187286.jpg

    ResponderExcluir
  7. luanlcpvocê pegou a url errada, tem que pegar a que está em direct link

    coloque essa aqui
    http://img510.imageshack.us/img510/9307/89187286.jpg

    ResponderExcluir
  8. vlw ai pela ajuda cara

    seu blog ta muito bom, continue assim.

    ResponderExcluir
  9. Quando eu coloco eles, eles ficam um em baixo do outro juntinhos, não tem como dar um espaço para cada um, como o do seu blog, de um botão para o outro a uma divisão, não são todos juntos, tem como você me responder essa pergunta?

    ResponderExcluir
  10. Kleyyer
    você pode colocar junto com o CSS isso aqui

    margin-bottom: 3px;

    esse código vai dar um espaço de 3 pixel embaixo de cada botão, coloque na primeira parte .botao a{........

    e claro o numero 3 pode mudar até ficar do jeito que você goste mais

    ResponderExcluir
  11. Gostaria de saber se você sabe colocar templates no MySpace?

    ResponderExcluir
  12. Renata

    infelizmente não ajudar nunca mexi nos blogs do myspace

    você já tentou procurar no setor de ajuda do blog?

    ResponderExcluir
  13. bom, eu fiz e deu tudo certo, mas a imagem repete a mesma uma em baixo da outra...
    eu queria que fose um botão diferente pra cada link.
    como fazer?

    ResponderExcluir
  14. bom, eu fiz e deu tudo certo,
    mas as imagens dos botões repetem a mesma uma em baixo da outra.
    eu queria botar botões diferentes.
    como eu faço?

    ResponderExcluir
  15. para não repetir coloque isso junto com o código do botão
    background-repeat: no-repeat;

    ResponderExcluir
  16. Oi, obrigado pelo blog, tem me ajudado muito.Estou tentando fazer um botao com caixa de codigo pra colocar no meu blog, a caixa deu certo, consegui ponstar mas a imagem fica enorme, dentro de uma "pagina" branca, eu queria que ficasse so a imagem ou com bordas ao redor da imagem sem muito espaco...sera que pode me ajudarmeu blog e: http://tempodecompartilharecompanhia.blogspot.com/
    obrigada

    ResponderExcluir
  17. maria thereza pohl de araujo
    os códigos geralmente não mudam o tamanho da imagem, então precisa deixar a imagem no tamanho certo primeiro.

    veja aqui alguns programas para editar imagens
    http://www.dicasparablogs.com.br/2008/08/programas-gratuitos-para-edicao-de.html

    e neste link tem um gerador de códigos se precisar de ajuda para montar o código do banner
    http://www.dicasparablogs.com.br/2007/04/gerador-de-cdigo.html

    ResponderExcluir
  18. Ei Fabiano, tudo ok?
    Então, quero saber se tem como eu colocar aquela imagem da garota com o spray (tem o fundo transparente) ao lado de "home" e em cima de "0-9", olha aí:

    http://undah.blogspot.com/

    Abraço!

    ResponderExcluir
  19. coloque os dois códigos no mesmo gadget de html, quero dizer o código do menu e da imagem, mas no código da imagem coloque style="float:left" junto, fica assim

    <img style="float:left"src="http://4.bp.blogspot.com/_L6w......... e todo resto do código da imagem normalmente

    ResponderExcluir
  20. Como faz para abrir na mesma página?
    Porque quando eu clico abre outra .

    ResponderExcluir
  21. Por que eles não ficam a imagem uma na frente da outra ? ajuda ai.

    ResponderExcluir
  22. para abrir na mesma pagina é só retirar o target="_blank" do código.

    esses botões são para um menu normal(vertical) se quiser links um na frente do outro veja aqui
    http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html

    ResponderExcluir
  23. Boas, eu coloco o codigo e tudo bem, mas quando clico diz que não existe a pagina no meu blog

    Como faço para poder utilizar os botoes para aceder a outras paginas?

    Por exemplo a locais onde aloco documentos?

    Se me puderes responder obrigado, se possivel para email, joaocabarbosa@gmail.com

    ResponderExcluir
  24. blabla
    você tem que colocar links para paginas de internet.

    que documentos está falando, os do seu computador? isso não é possivel. só pode linkar coisas que estão na internet.

    ResponderExcluir
  25. como faz pra colocar mais que um botão diferente?

    ResponderExcluir
  26. ..:: Equipe SPN-Série ::..
    com esse código você pode colocar qualquer tipo de botão é só fazer uma imagem e trocar no código a imagem de fundo

    ResponderExcluir
  27. para trocar a cor da letra é onde está color: #000000; na primeira parte do código

    ResponderExcluir
  28. Rapaz eu fico muito injuriado depois de passar horas e horas tentando e testando esses tutoriais, apagando e recomeçando tudo novamente. Às vezes alguma coisa dá certo!
    Eu queria colocar botões como tem no topo desse seu blog então segui esse tuturial que no inicio vc cita assim:

    "Para fazer botões no seu site ou blog o jeito mais fácil é usar um estilo CSS para colocar essa imagem do botão como fundo de um texto(seus links). Calma parece um pouco complicado, mas são poucas linhas de códigos e depois colocar ou modificar os botões será uma tarefa muito simples e rápida.
    Antes de começar precisamos achar ou criar 2 imagens para usar como botões, elas precisam ser do mesmo tamanho porque usaremos uma quando o blog aparece e a outra quando colocamos o mouse sobre o link."

    Pois bem, depois dessa primeira etapa, segui adiante e etc.
    No final apareceram os nomes linkados certinho MAS não vi no tutorial nenhuma relação da imagens dos botões com os códigos. ONDE POSTA AS IMAGENS DOS BOTÕES? coloquei 2 links pra teste: "dicas blog" e "mamanues" no http://damasiojoel.blogspot.com/
    mas como é que que coloca os botões em lugar dos nomes?

    ResponderExcluir
  29. Joel Damasio

    as imagens são o fundo dos botões, por exemplo em nosso menu no inicio da pagina em vez de criar uma imagem para cada botão fiz apenas um que uso como fundo de todos eles

    ResponderExcluir
  30. Engraçado, estamos parecendo como 2 humoristas. Procurei explicar detalhadamente o meu problema e acho que vc não entendeu, mas agora vc vai entender:
    No início dessa sua página "http://www.dicasparablogs.com.br/" bem no topo à direita tem um menu com 6 ícones seguintes:

    "assine nosso feed", "adicionar a favoritos", "atualizações por e-mail", "siga-me no twitteer", "comunidade do orkut", comunidade do diHITT".

    Pois bem, é este tipo de menu com ícones que estou tentando achar desesperadamente nos melhores tuturiais mas ainda não consegui.
    Se vc conseguir passar pra mim, vou te dar dar nota 10 e te seguir em todas tuas páginas e sites na net!
    Um abraço Brother.

    ResponderExcluir
  31. Joel Damasio

    fazer isso é relativamente simples, veja aqui:
    http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html

    apenas não coloque a parte que fixa os botões position:fixed; bottom:0px; right:0px;

    ResponderExcluir
  32. Ops! estamos quase chegando lá.
    Vc me direcionou para a página:

    http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html

    Mas não sabe-se onde é o começo da postagem do código devido as frases no início, mesmo assim ainda consegui colocar tanto fixo na parte inferior como tb na parte superior tirando a opção:

    position:fixed; bottom:0px; right:0px;

    como vc citou mas ficou uma linha contornando parte dos ícones.

    Agora veja pra vc entender melhor neste exemplo de um tutorial do "Dicasmamanunes":

    http://modelosdemenu.blogspot.com/2009/08/menu-para-redes-sociais-efeito-opacity.html

    É este tipo de menu com ícones que quero!
    NÃO PRECISA O EFEITO OPACITY E NEM FRASES AO CLICAR,
    quero apenas o menu com ícones.

    ResponderExcluir
  33. para tirar a linha é só apagar o trecho border:.....

    ResponderExcluir
  34. Esse site é muito bom! No meu blog as gadget eu acho q esse é o nome ficam uma encima da outra, mas eu queria saber como colocar uma do lado da outra como essa bandeiras do lado direito bem encima do seu site. se puder me ajudar agradeço.

    ResponderExcluir
  35. Na Presença de Jesus
    para deixar as imagens uma do lado da outra veja essa postagem
    http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html

    apenas não use a parte para fixar no canto da pagina

    ResponderExcluir
  36. a palavra body{.. de meu html ja esta sendo usada pelo google analistc, eu teria que criar outra palvra body{..?

    ResponderExcluir
  37. xbox 360
    usamos o body apenas para localizar o lugar no código não é para altera-lo.

    acho que você está confundido as coisas o contador do analytics não tem nada a ver com o estilo body

    ResponderExcluir
  38. fabiano, gostaria de saber como fazer para que os botões fiquem um do lado do outro, se possivel. obrigado.

    ResponderExcluir
  39. não consegui colocar o 2 codigo T.T alguem me ajuda plis

    ResponderExcluir
  40. - - love kah-chan - -
    cada um deles é pra colocar numa pagina diferente, a primeira parte é a formatação do botão isso vc coloca na pagina editar html.

    os códigos dos links é na pagina layout, adicionar gadget, html/javascript

    ResponderExcluir
  41. Eu queria fazer botões com imagens diferentes tem como?

    ResponderExcluir
  42. é possivel fazer um botão com cada imagem mas vai dar trabalho, será necessário criar um estilo diferente para cada um deles, por exemplo:

    .botao a{....}
    .botao a:hover{.....}


    .botao2 a{....}
    .botao2 a:hover{.....}


    .botao3 a{....}
    .botao3 a:hover{.....}

    ResponderExcluir
  43. Como sempre vc é genial fiz algumas mudanças no codigo como vc disse e o resultado foi ÓTIMO valeu. So não entendi muito bem aquele link aleatório mais tudo bem esse ficou muito bom.

    ResponderExcluir
  44. Josenildo
    sobre qual link aleatório está falando?

    ResponderExcluir
  45. Obrigada pela dica, seu blog tem me ajudado muito mesmo!
    continue sempre assim !
    bj

    ResponderExcluir
  46. Gostei do tutorial.
    Acabei de lançar um site que é agregador de conteudo, é o Giogri.
    Você tem agum tutorial que ensine a criar aqueles botões que mostram o numero de votos que a notícia teve ou um botão para enviar notícias? Estilo digg , reditt?
    O blog é excelente parabens!!!

    ResponderExcluir
  47. Olá. Bem, eu não estou conseguindo por outro tipo de botão na minha página. Li os coments e fiz tudo que fiz falado mas mesmo assim entra o botão anterior. Oque eu faço ?

    ResponderExcluir
  48. Nâna C -
    você troca o código e aparece o botão anterior? se isso está acontecendo tem duas opções ou você está mexendo no código errado(está modificando código de outra coisa que nao é o botão) ou então o seu computador está entrando no seu blog pelo histórico de internet, exclua o histórico ou clique para atualizar a pagina(f5)

    ResponderExcluir
  49. O problema é que o plano de fundo do meu blog era branco e ficou cinza . Por isso que até tirei o código por causa disso. Eu li a explicação do problema mas não entendi muita coisa :d. Mas parabéns pelo excelente post.

    ResponderExcluir
  50. Gabriel Tramarin
    no momento o fundo do seu blog está branco, se quiser alterar use o código da cor ou imagem de fundo no estilo body{...} na pagina editar html

    ResponderExcluir
  51. Gostaria muito de colocar esses botoes em meu blog por favor me ajudem....

    ResponderExcluir
  52. quais botões? se for os deste tutorial é só seguir as instruções

    ResponderExcluir
  53. olá Fabiano, queria pedir se me podia dizer como posso colocar no final de cada receita o botão do facebook.
    Desde já agradeço.

    ResponderExcluir
  54. iaé fabiano...eu gostaria de saber se tem como eu fazer dois tipos de botõe diferentes, (diferente de imagem)
    PS.: o blog ta show mano!!!

    ResponderExcluir
  55. se for para fazer cada botões com uma imagem diferente é melhor usar imagens com links em vez de montar esse código usando imagens de fundo

    ResponderExcluir
  56. iaé fabiano blza? mano eu conseguir fazer tudinho que vc pediu no tuto. mas eu gostaria de sabr como eu faço pra que apareça uma imagen com as teclas de atalha pro pessoal saber como coloca os imoticons...

    ResponderExcluir
  57. preciso de ajuda,como faço pra muda a imagem do outro botão que eu colocar no blog?

    ResponderExcluir
  58. Luiz.h
    esse código é para fazer todos os botões com imagens iguais se for usar cada um com uma imagem diferente então terá que colocar as imagens com links, sem usar esse código dos botões

    ResponderExcluir
  59. ola
    vc pode me dizer se a tag body citada o tutorial é a /body<> ou body<>
    e tbm me ajude:
    no meu blog: http://futurehackersetutoriais.blogspot.com/
    lah onde tem busca no lado esquerdo e direito tem duas imagens:Comunidade no Orkut e Sigame no Twitter.
    queria colocar um botão lah mais sem a imagem.
    sera que vc pode me ajudar
    vlw
    me add no msn:
    rafinhafifa2007@hotmail.com

    ResponderExcluir
  60. a tag para colocar os estilos CSS que falamos no tutorial é body{...} isso está no começo do html

    ResponderExcluir
  61. Meu...adorei suas dicas.... valeu mesmo....

    ResponderExcluir
  62. Como faço para colocar os botões do facebook, twitter, orkut, msn, youtube no meu blog do jeito que esta no sue site...
    não entendi como colocar...

    Ficarei grata com a ajuda de vocês...

    ResponderExcluir
  63. Sorry.Mais nao entendi tem que ser 2 imagens mesmo mais como faço eu intalei o zimp no meu computador zimp2.0 nao sei como criar personagens ja criei um botao como faço pra colokar imagem nom outro botao que vou criar

    ResponderExcluir
  64. Fabiano ficarei mt grata se vc me dizer como faço somente 1 coluna igual aki do site so que do lado esquerdoe com botoes com imagens lado a lado
    ex: tenho um botao e nele esta escrito noticias do lado do meu botao tem uma foto da bloom do club das winx do outro tem da stella do club da winx
    Como faço isso, e o botao que vc esta falando ai da para clikar fazer postagens e os leitores comentar sobre a postagem?!! serei grata se me respomder
    bjsssssssss:D grata thay-loket ou sómente thais
    fiquem com o papai do céu!

    ResponderExcluir
  65. Sorry.DEnovo queria aproveitar efazer mais uma pergunta queria lhe perguntar como faço para colokar imagens lado a lado no temas dos gedget axo que assim que se escreve rsrsrs
    Aproveitando o insejo queria lhe perguntar se oque eu perguntei nas veses passadas tem que mexer com codigo pq eu gosto de mexer em codigo de html nao em programas pq nao entendo nd
    bjsssssssssssssssssssssssss
    FIquem com o papai do céu!
    ASs:sua fa e seguido e admiradora ThA-lOkEt

    ResponderExcluir
  66. o nosso código das imagens com links para o twitter,facebook, youtube e orkut são feitos assim:

    <div style="float:right; width:24%"><a title="Dicas para Blogs no Orkut" href="http://www.orkut.com.br/Main#Community?cmm=46751209" target="_blank"><img src="http://acessoriosparablogs.com.br/dicas/orkut.gif" alt="Dicas para Blogs no Orkut" border="0" /></a></div>


    apenas trocando a imagem e endereço para cada um deles o valor width:24% deve ser alterado caso use um numero diferente de imagens... a soma de todas deve dar um pouco menos que 100, por isso que usamos 24x4=96

    veja mais aqui: Imagens Lado a Lado, Fazer Colunas nos Gadgets

    ResponderExcluir
  67. fabiano preciso que me diga como fazer apenas uma coluna!!! e que de para ter postagens nessa colunaaa
    agradeço bejocas
    ass:thay-loket

    ResponderExcluir
  68. uma coluna só não precisa usar os códigos já é o padrao de cada gadget

    ResponderExcluir
  69. vc tem algum tutorial ensinando como personalizar os botoes que redirecionam para as páginas? Aqueles botoes das páginas q a gente cria, tipo esses do seu blog:

    * Tutoriais Diversos
    * Anuncie
    * Contato e Pedidos
    * Dicas no seu site
    * Parcerias entre Blogs
    * Como Criar um Blog
    * Mapa do Site

    como faço para mudar o fundo desses blocos de links das páginas?

    ResponderExcluir
  70. oie mandei um e-mail pra vc espero que veja é uma sugestaoooo

    ResponderExcluir
  71. Fabiano...Este tutorial, ou melhor, este código serve como NavBar?

    ResponderExcluir
  72. Fabiano... Este tutorial, ou melhor, este código serve como NavBar?

    ResponderExcluir
  73. poderia usar como navbar sem problema... afinal a navbar é bem parecida com um menu

    ResponderExcluir
  74. Como faço para fixá-lo no espaço da NavBar?

    ResponderExcluir
  75. pode usar esse código para Fixar botões no topo da pagina, só precisa de algumas alterações, mas no link poderá ver como fazer

    ResponderExcluir
  76. Eu vi o link http://www.dicasparablogs.com.br/2009/07/fixar-botoes-no-canto-da-pagina.html, mas não consegui ver como fixar no topo da página, Fabiano... Tem como me ajudar?
    Estou uma pilha de nervossss...

    ResponderExcluir
  77. Natalia
    o código é esse: <div style="background-color:#FFFFFF; border-left:1px solid #000000;border-top:1px solid #000000;position:fixed; bottom:0px; right:0px;">conteudo aqui</div>

    ResponderExcluir
  78. Mil vezes brigadim meu filhão...
    Troquei a posição e ficou muito bem.
    Deus o abençoe cada vez mais!

    ResponderExcluir
  79. é o trecho que tem body{.. e varios códigos, esse lugar para colocar codigos css não é bem exato tem um grande trecho no blogger com eles veja aqui: Onde colocar os códigos no blog

    ResponderExcluir
  80. Não Consegui Fazer Nada SÓ DA ERRO eu não entendi queria colocar, botões em cima do blogspot
    Como Você colocou EX: Dicas mais comentadas, enquetes e etc
    Queria saber como colocar estas opções aí que você colocou em cima do blogger.
    eu não consegui de nenhuma maneira postar isto
    teria como você colocar para mím.
    eu te dou meu email e minha senha e você faz para mím não entendo aonde tenho que colocar.
    obrigado pela atenção

    ResponderExcluir
  81. Olá amigo, gostei muito do seu trabalho, mas não estou conseguindo identificar o local onde eu ponho o código das imagens no editor?? Obrigado! Bruno.

    ResponderExcluir
  82. qual editor está falando?...

    o endereço da imagem você coloca neste trecho: background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);

    ResponderExcluir
  83. Fiz o tutorial e deu tudo certinho, parabéns!
    Só não consegui alterar a cor da fonte só do botão. Fica com a cor padrão dos links do blog. Já alterei onde tá escrito Color: #etc mas não muda nada... tem como alterar isso?

    http://blog-do-livro.blogspot.com/

    ResponderExcluir
  84. Laila
    talvez tenha outro trecho do html definindo a cor dos links...

    no trecho .botao a{text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;.....
    ...
    ...
    ... !important;}

    coloque o código !important; antes de fechar a chave... isso dá prioridade a esse código

    ResponderExcluir
  85. Olá gostaria de saber se tem algum tutorial de como colocar imagens no lugar das palavras do menu ?

    ResponderExcluir
  86. um menu com imagens seria simples de fazer... mas não tem alterações quando passa o mouse, o código é esse:

    <a href="http://dicaspatablogs.com.br"><img src="endereço da imagem" border="0" /></a>

    repetindo o mesmo código para cada imagem

    ResponderExcluir
  87. ficou nome do site nome do site e não consegui colocar o botão

    ResponderExcluir
  88. se a imagem não apareceu é porque o endereço esta´errado...

    como está usando o código? envie para mim e vou procurar o erro

    ResponderExcluir
  89. .botao a{text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #F2DBB9;
    background-image: url(http://dc367.4shared.com/img/TNjm3QyJ/0.863987818563302/botao_2.png);
    width: 210px;
    text-indent: 5px;
    height: 30px;
    display: block;
    line-height: 30px;
    font-size: 12pt;
    }
    .botao a:hover{
    color: #000099;
    background-color: #cbe1ec;
    background-image: url(http://dc407.4shared.com/img/s14zclmM/boto_1.png);
    }

    eu estou colocando desse jeito e não estar dando resultado não sei o que fazer fazer, preciso que me diga como, diga o erro!

    Fiz as imagens no Photo filtre e hospedei no 4shared, por que o que vc falou me pede para me cadastrar ai eu coloco meu e-mail, nome e le diz que não posso fazer pois já estou cadastrada mais ele diz que não esotu( esotu disponível....não entendo!

    ResponderExcluir
  90. Dany Alves
    essa parte está correta... mas fala colocar os botões, esse trecho é só a formatação, faltou um gadget com esse código:

    <div class="botao">

    <a href="endereço" target="_blank">nome do site</a>
    </div>

    ResponderExcluir
  91. Ola.
    Tenho um pequeno problema não estou conseguindo meter esta imagens no meu blog como botões podiam ajudar-me faz favor.
    imagem 1:http://img70.imageshack.us/img70/7374/anteriorjh2.png
    imagem 2:http://img70.imageshack.us/img70/383/proximald4.png

    ResponderExcluir
  92. Fabiano,

    Boa tarde! Eu consegui colocar tudo certinho.
    só que depois que eu clico nele e add, fiz um teste para ver como iria abrir, então cliquei nos favoritos e a página sempre abre pela metade. Como faço p/ arrumar isso?

    ResponderExcluir
  93. está falando de botão adicionar aos favoritos no firefox? se for infelimente o firefox add em uma aba.. não achei código para modificar isso ainda...

    mas depois que adiciona se a pessoa quiser pode retirar da aba e deixa na pagina completa... claro isso é para quem mexe um pouco mais no programa.... dependendo do publico do seu blog a maioria nem vai saber que esse recurso existe...

    ResponderExcluir
  94. Adorei o seu blog, só tenho uma pequena dúvida.
    O fiz o tutorial todo e deu tudo certo, mas no final quando ele jah está pronto ele tem o titulo do meu blog em cima da minha, e a minha foto já tem o nome do meu blog.
    Tem como retirar esse segundo nome?

    ResponderExcluir
  95. eu fiz o botão com o tutoriale o deixei no meu blog, na hora de testar o botao repetiu o endereço do meu blog, ficando:
    www.pslivros.blogspot.com/www.pslivros.blogspot.com/
    O que eu faço??

    ResponderExcluir
  96. Amanda Fiorani
    isso aconteceu porque você não colocou o http:// no link do blog

    use assim: http://pslivros.blogspot.com/

    ResponderExcluir
  97. auhauah, mais uma vez, vlw! :)

    ResponderExcluir
  98. Não to conseguindo colocar um botão do lado do outro, como faz? Um colado no outro pra parecer 1 botão só

    ResponderExcluir
  99. Deixa, já consegui, adicionei esse código nos 2 botões com configurações diferentes. Tá perfeito agora :)
    ".botao a{position: relative;
    right: 14%;
    float: right;"

    ResponderExcluir
  100. Valeu Ariel.. era isso que eu queria fazer e consegui
    deixar eles um do lado do outro e nao encima um do outro..
    valeuu...

    ResponderExcluir
  101. me ajuda eu comecei a cria um blog faz pouco tempo ç.ç eu ja tentei de tudo pra coloca esse botão no meu blog..e ta muito díficil..não aparece a imagem só aparece o nome como link =/

    ResponderExcluir
  102. ah tem mais uma coisa Ç.Ç...a minha imagem de fundo sumiu depois de fiz isso...não consigo bota de volta D;

    ResponderExcluir
  103. @PriH shirou veja aqui Imagem não aparece no Blog ou Site

    se a imagem de fundo aparecia antes e sumiu pode ser problema com a hospedagem da imagem. caso a imagem tenha sido deletada não tem como recuperar só hospedando a imagem novamente

    ResponderExcluir
  104. olá gostaria de saber pk não apareceu o botão que crie,eu editei no fireworkse depois no imageshack,mas nada aconteceu,o que fiz de errado?

    ResponderExcluir
  105. provavelmente é o endereço errado da imagem

    tem que usar o direct link

    ResponderExcluir
  106. Fabiano no meu blog só aparece 3 postagens na página inical mesmo eu tendo colocado para aparecer 7 . downloads-site.blogspot.com

    ResponderExcluir
  107. se baixou algum template com erro precisa entender de html para corrigir

    ResponderExcluir
  108. tem varios body quel dele eu coloco ?

    ResponderExcluir
  109. é aquele que tem as chaves body { .... }

    ou pode colocar antes de

    ]]>< /b:skin >

    ResponderExcluir
  110. Fabiano, cara, me ajuda por favor, eu tenho um blog, fica o menu horizontal, troquei as cores, mas assim, por padrão, atrás fica uma barra verde. troquei as cores dos botoes pra preto, e letras branco. Ficou legal, sendo que ainda sobre umas partes verdes laterais, queria saber como posso tirar isso, modifiquei o código várias vezees, mas a barra verde continua lá atrás, ajuda, please ?!

    ResponderExcluir
  111. no menu pode ter bordas com a cores diferentes, além disso precisa ter certeza que está alterando os códigos nos lugares certos
    veja aqui: Links lado a lado (menu horizontal)

    ResponderExcluir
  112. Devira colocar exemplos de como vai ficar neste post!!

    ResponderExcluir
  113. Tiago esse é um código de botões (formatação de links) então até nosso menu horizontal serve como demonstração

    ResponderExcluir
  114. por favor, não consigo achar o body{ você poderia me dizer se existe um video tutorial que ensine isso por favor?? sou novata ainda

    ResponderExcluir
  115. Larissa use o ctrl F, veja aqui:
    Achar Códigos na Pagina Editar HTML do Blogger - Ctrl F

    isso varia um pouco dependendo do template mas sempre tem body {.... e varias coisas aqui

    ResponderExcluir
  116. Não estou conseguindo colocar as imagens

    ResponderExcluir
    Respostas
    1. geralmente o problema é a url da imagem que está errada.

      qual o endereço da imagem que você quer usar?

      Excluir
  117. Desculpe fazer essa pergunta no post errado, mas vocês ja criaram um tutorial onde ao clicar em qualquer letra do Alfabeto, automaticamente vc é levado até ela???

    Se não, conhece algum site que ensina isso?

    http://www.thestorysiren.com/book-reviews#char_4f

    Obrigada =)

    ResponderExcluir
    Respostas
    1. pesquise no google por código para lista de posts do blogger em ordem alfabética ....

      eu já vi alguns códigos assim mas nunca testei.

      se for utilizar sugiro que faça isso em uma pagina do blog e não na sidebar pois esse tipo de código deve deixar sua pagina bem lenta

      Excluir