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
dá para colocar só nos marcadores?
ResponderExcluirsim, é possivel usar isso em qualquer parte do blog, veja essa postagem
ResponderExcluirhttp://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.
Oi, tudo bem?
ResponderExcluirObrigado 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
cara eu num to conseguindo colocar o primeiro codigo
ResponderExcluirele 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
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
ResponderExcluireu botei o botao no meu blog mais na hora de botar uma nova imagem nao ta funcionando
ResponderExcluira img é essa aqui:
http://img510.imageshack.us/my.php?image=89187286.jpg
luanlcpvocê pegou a url errada, tem que pegar a que está em direct link
ResponderExcluircoloque essa aqui
http://img510.imageshack.us/img510/9307/89187286.jpg
vlw ai pela ajuda cara
ResponderExcluirseu blog ta muito bom, continue assim.
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?
ResponderExcluirKleyyer
ResponderExcluirvocê 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
Gostaria de saber se você sabe colocar templates no MySpace?
ResponderExcluirRenata
ResponderExcluirinfelizmente não ajudar nunca mexi nos blogs do myspace
você já tentou procurar no setor de ajuda do blog?
bom, eu fiz e deu tudo certo, mas a imagem repete a mesma uma em baixo da outra...
ResponderExcluireu queria que fose um botão diferente pra cada link.
como fazer?
bom, eu fiz e deu tudo certo,
ResponderExcluirmas as imagens dos botões repetem a mesma uma em baixo da outra.
eu queria botar botões diferentes.
como eu faço?
para não repetir coloque isso junto com o código do botão
ResponderExcluirbackground-repeat: no-repeat;
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/
ResponderExcluirobrigada
maria thereza pohl de araujo
ResponderExcluiros 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
Ei Fabiano, tudo ok?
ResponderExcluirEntã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!
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
ResponderExcluir<img style="float:left"src="http://4.bp.blogspot.com/_L6w......... e todo resto do código da imagem normalmente
Como faz para abrir na mesma página?
ResponderExcluirPorque quando eu clico abre outra .
Por que eles não ficam a imagem uma na frente da outra ? ajuda ai.
ResponderExcluirpara abrir na mesma pagina é só retirar o target="_blank" do código.
ResponderExcluiresses 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
Boas, eu coloco o codigo e tudo bem, mas quando clico diz que não existe a pagina no meu blog
ResponderExcluirComo 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
blabla
ResponderExcluirvocê 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.
Vlw ae me ajudou muito...
ResponderExcluircomo faz pra colocar mais que um botão diferente?
ResponderExcluir..:: Equipe SPN-Série ::..
ResponderExcluircom esse código você pode colocar qualquer tipo de botão é só fazer uma imagem e trocar no código a imagem de fundo
tem como trocar a cor da letra só do botão?
ResponderExcluirpara trocar a cor da letra é onde está color: #000000; na primeira parte do código
ResponderExcluirRapaz 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!
ResponderExcluirEu 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?
Joel Damasio
ResponderExcluiras 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
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:
ResponderExcluirNo 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.
Joel Damasio
ResponderExcluirfazer 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;
Ops! estamos quase chegando lá.
ResponderExcluirVc 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.
para tirar a linha é só apagar o trecho border:.....
ResponderExcluirEsse 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.
ResponderExcluirNa Presença de Jesus
ResponderExcluirpara 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
a palavra body{.. de meu html ja esta sendo usada pelo google analistc, eu teria que criar outra palvra body{..?
ResponderExcluirxbox 360
ResponderExcluirusamos 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
fabiano, gostaria de saber como fazer para que os botões fiquem um do lado do outro, se possivel. obrigado.
ResponderExcluirTuma
ResponderExcluirveja aqui como fazer Links lado a lado (menu horizontal)
não consegui colocar o 2 codigo T.T alguem me ajuda plis
ResponderExcluir- - love kah-chan - -
ResponderExcluircada 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
Eu queria fazer botões com imagens diferentes tem como?
ResponderExcluiré 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:
ResponderExcluir.botao a{....}
.botao a:hover{.....}
.botao2 a{....}
.botao2 a:hover{.....}
.botao3 a{....}
.botao3 a:hover{.....}
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.
ResponderExcluirJosenildo
ResponderExcluirsobre qual link aleatório está falando?
Obrigada pela dica, seu blog tem me ajudado muito mesmo!
ResponderExcluircontinue sempre assim !
bj
Gostei do tutorial.
ResponderExcluirAcabei 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!!!
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 ?
ResponderExcluirNâna C -
ResponderExcluirvocê 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)
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.
ResponderExcluirGabriel Tramarin
ResponderExcluirno 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
Gostaria muito de colocar esses botoes em meu blog por favor me ajudem....
ResponderExcluirquais botões? se for os deste tutorial é só seguir as instruções
ResponderExcluirolá Fabiano, queria pedir se me podia dizer como posso colocar no final de cada receita o botão do facebook.
ResponderExcluirDesde já agradeço.
Maria
ResponderExcluirveja nestes links:
Ganhe Visitas com o Twitter, Facebook e Google Buzz
Botão Curtir do Facebook no Blogger
iaé fabiano...eu gostaria de saber se tem como eu fazer dois tipos de botõe diferentes, (diferente de imagem)
ResponderExcluirPS.: o blog ta show mano!!!
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
ResponderExcluiriaé 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...
ResponderExcluirpreciso de ajuda,como faço pra muda a imagem do outro botão que eu colocar no blog?
ResponderExcluirveja aqui Colocar emoticons nos comentários do blog
ResponderExcluirLuiz.h
ResponderExcluiresse 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
ola
ResponderExcluirvc 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
a tag para colocar os estilos CSS que falamos no tutorial é body{...} isso está no começo do html
ResponderExcluirMeu...adorei suas dicas.... valeu mesmo....
ResponderExcluirComo faço para colocar os botões do facebook, twitter, orkut, msn, youtube no meu blog do jeito que esta no sue site...
ResponderExcluirnão entendi como colocar...
Ficarei grata com a ajuda de vocês...
Anna Paula Oli'Fer
ResponderExcluirveja aqui como fazer os botões: Imagens Lado a Lado, Fazer Colunas nos Gadgets
Muito Obrigado esta ajudando muito.
ResponderExcluirSorry.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
ResponderExcluirFabiano 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
ResponderExcluirex: 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!
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
ResponderExcluirAproveitando 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
o nosso código das imagens com links para o twitter,facebook, youtube e orkut são feitos assim:
ResponderExcluir<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
fabiano preciso que me diga como fazer apenas uma coluna!!! e que de para ter postagens nessa colunaaa
ResponderExcluiragradeço bejocas
ass:thay-loket
uma coluna só não precisa usar os códigos já é o padrao de cada gadget
ResponderExcluirvc 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:
ResponderExcluir* 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?
o código do nosso menu está aqui: Links lado a lado (menu horizontal)
ResponderExcluiroie mandei um e-mail pra vc espero que veja é uma sugestaoooo
ResponderExcluirFabiano...Este tutorial, ou melhor, este código serve como NavBar?
ResponderExcluirFabiano... Este tutorial, ou melhor, este código serve como NavBar?
ResponderExcluirpoderia usar como navbar sem problema... afinal a navbar é bem parecida com um menu
ResponderExcluirComo faço para fixá-lo no espaço da NavBar?
ResponderExcluirpode 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
ResponderExcluirEu 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?
ResponderExcluirEstou uma pilha de nervossss...
Natalia
ResponderExcluiro 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>
Mil vezes brigadim meu filhão...
ResponderExcluirTroquei a posição e ficou muito bem.
Deus o abençoe cada vez mais!
Que body ?tem varioooooooooos
ResponderExcluiré 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
ResponderExcluirNão Consegui Fazer Nada SÓ DA ERRO eu não entendi queria colocar, botões em cima do blogspot
ResponderExcluirComo 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
veja aqui o código para criar um menu igual ao nosso: Links lado a lado (menu horizontal)
ResponderExcluirOlá 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.
ResponderExcluirqual editor está falando?...
ResponderExcluiro endereço da imagem você coloca neste trecho: background-image: url(http://img10.imageshack.us/img10/5389/overuar.jpg);
Fiz o tutorial e deu tudo certinho, parabéns!
ResponderExcluirSó 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/
Laila
ResponderExcluirtalvez 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
Olá gostaria de saber se tem algum tutorial de como colocar imagens no lugar das palavras do menu ?
ResponderExcluirum menu com imagens seria simples de fazer... mas não tem alterações quando passa o mouse, o código é esse:
ResponderExcluir<a href="http://dicaspatablogs.com.br"><img src="endereço da imagem" border="0" /></a>
repetindo o mesmo código para cada imagem
ficou nome do site nome do site e não consegui colocar o botão
ResponderExcluirse a imagem não apareceu é porque o endereço esta´errado...
ResponderExcluircomo está usando o código? envie para mim e vou procurar o erro
.botao a{text-decoration: none;
ResponderExcluirfont-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!
Dany Alves
ResponderExcluiressa 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>
Ola.
ResponderExcluirTenho 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
veja aqui como fazer a alteração e colocar as imagens
ResponderExcluirAlterar texto postagens mais antigas e mais recentes
Fabiano,
ResponderExcluirBoa 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?
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...
ResponderExcluirmas 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...
Adorei o seu blog, só tenho uma pequena dúvida.
ResponderExcluirO 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?
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:
ResponderExcluirwww.pslivros.blogspot.com/www.pslivros.blogspot.com/
O que eu faço??
Amanda Fiorani
ResponderExcluirisso aconteceu porque você não colocou o http:// no link do blog
use assim: http://pslivros.blogspot.com/
auhauah, mais uma vez, vlw! :)
ResponderExcluirNão to conseguindo colocar um botão do lado do outro, como faz? Um colado no outro pra parecer 1 botão só
ResponderExcluirDeixa, já consegui, adicionei esse código nos 2 botões com configurações diferentes. Tá perfeito agora :)
ResponderExcluir".botao a{position: relative;
right: 14%;
float: right;"
Valeu Ariel.. era isso que eu queria fazer e consegui
ResponderExcluirdeixar eles um do lado do outro e nao encima um do outro..
valeuu...
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 =/
ResponderExcluirah tem mais uma coisa Ç.Ç...a minha imagem de fundo sumiu depois de fiz isso...não consigo bota de volta D;
ResponderExcluir@PriH shirou veja aqui Imagem não aparece no Blog ou Site
ResponderExcluirse 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
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?
ResponderExcluirprovavelmente é o endereço errado da imagem
ResponderExcluirtem que usar o direct link
Fabiano no meu blog só aparece 3 postagens na página inical mesmo eu tendo colocado para aparecer 7 . downloads-site.blogspot.com
ResponderExcluirse baixou algum template com erro precisa entender de html para corrigir
ResponderExcluirtem varios body quel dele eu coloco ?
ResponderExcluiré aquele que tem as chaves body { .... }
ResponderExcluirou pode colocar antes de
]]>< /b:skin >
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 ?!
ResponderExcluirno menu pode ter bordas com a cores diferentes, além disso precisa ter certeza que está alterando os códigos nos lugares certos
ResponderExcluirveja aqui: Links lado a lado (menu horizontal)
legal as coisas
ResponderExcluirDevira colocar exemplos de como vai ficar neste post!!
ResponderExcluirTiago esse é um código de botões (formatação de links) então até nosso menu horizontal serve como demonstração
ResponderExcluirpor favor, não consigo achar o body{ você poderia me dizer se existe um video tutorial que ensine isso por favor?? sou novata ainda
ResponderExcluirLarissa use o ctrl F, veja aqui:
ResponderExcluirAchar 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
Não estou conseguindo colocar as imagens
ResponderExcluirgeralmente o problema é a url da imagem que está errada.
Excluirqual o endereço da imagem que você quer usar?
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???
ResponderExcluirSe não, conhece algum site que ensina isso?
http://www.thestorysiren.com/book-reviews#char_4f
Obrigada =)
pesquise no google por código para lista de posts do blogger em ordem alfabética ....
Excluireu 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
Muito obrigado
ResponderExcluir