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
Como fazer e colocar botões no blog
4/ 5
Oleh

132 Comentários

15 de abril de 2009 20:16 delete

dá para colocar só nos marcadores?

Reply
15 de abril de 2009 20:20 delete

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.

Reply
16 de abril de 2009 14:36 delete

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

Reply
26 de abril de 2009 13:08 delete

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

Reply
26 de abril de 2009 13:20 delete

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

Reply
28 de abril de 2009 16:01 delete

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

Reply
28 de abril de 2009 16:13 delete

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

Reply
28 de abril de 2009 21:36 delete

vlw ai pela ajuda cara

seu blog ta muito bom, continue assim.

Reply
23 de maio de 2009 11:14 delete

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?

Reply
23 de maio de 2009 14:46 delete

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

Reply
6 de junho de 2009 08:05 delete

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

Reply
6 de junho de 2009 10:37 delete

Renata

infelizmente não ajudar nunca mexi nos blogs do myspace

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

Reply
7 de julho de 2009 22:59 delete

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?

Reply
gustavo.D
7 de julho de 2009 23:04 delete

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?

Reply
8 de julho de 2009 05:10 delete

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

Reply
15 de julho de 2009 15:17 delete

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

Reply
15 de julho de 2009 15:37 delete

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

Reply
8 de agosto de 2009 20:50 delete

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!

Reply
8 de agosto de 2009 22:17 delete

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

Reply
Anônimo
4 de setembro de 2009 20:19 delete

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

Reply
Anônimo
8 de setembro de 2009 21:44 delete

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

Reply
9 de setembro de 2009 14:11 delete

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

Reply
1 de outubro de 2009 10:50 delete

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

Reply
1 de outubro de 2009 15:18 delete

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.

Reply
11 de outubro de 2009 02:57 delete

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

Reply
11 de outubro de 2009 16:54 delete

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

Reply
12 de outubro de 2009 22:55 delete

tem como trocar a cor da letra só do botão?

Reply
12 de outubro de 2009 22:58 delete

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

Reply
17 de novembro de 2009 00:42 delete

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?

Reply
17 de novembro de 2009 16:04 delete

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

Reply
19 de novembro de 2009 14:13 delete

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.

Reply
19 de novembro de 2009 14:36 delete

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;

Reply
19 de novembro de 2009 21:58 delete

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.

Reply
20 de novembro de 2009 18:47 delete

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

Reply
29 de dezembro de 2009 15:03 delete

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.

Reply
29 de dezembro de 2009 16:12 delete

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

Reply
4 de janeiro de 2010 19:19 delete

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

Reply
4 de janeiro de 2010 22:37 delete

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

Reply
27 de fevereiro de 2010 23:49 delete

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

Reply
18 de março de 2010 15:53 delete

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

Reply
18 de março de 2010 16:25 delete

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

Reply
ivy
22 de abril de 2010 21:10 delete

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

Reply
23 de abril de 2010 12:42 delete

é 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{.....}

Reply
24 de abril de 2010 04:18 delete

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.

Reply
24 de abril de 2010 15:07 delete

Josenildo
sobre qual link aleatório está falando?

Reply
24 de abril de 2010 20:48 delete

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

Reply
Anônimo
4 de maio de 2010 12:40 delete

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

Reply
15 de junho de 2010 02:45 delete

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 ?

Reply
15 de junho de 2010 14:58 delete

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)

Reply
6 de julho de 2010 13:22 delete

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.

Reply
6 de julho de 2010 15:00 delete

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

Reply
9 de julho de 2010 09:42 delete

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

Reply
9 de julho de 2010 17:05 delete

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

Reply
12 de dezembro de 2010 10:21 delete

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.

Reply
22 de dezembro de 2010 11:55 delete

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

Reply
22 de dezembro de 2010 12:48 delete

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

Reply
23 de dezembro de 2010 16:02 delete

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

Reply
23 de dezembro de 2010 16:35 delete

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

Reply
23 de dezembro de 2010 19:43 delete

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

Reply
10 de janeiro de 2011 22:30 delete

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

Reply
11 de janeiro de 2011 14:53 delete

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

Reply
14 de janeiro de 2011 12:20 delete

Meu...adorei suas dicas.... valeu mesmo....

Reply
18 de fevereiro de 2011 12:08 delete

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

Reply
16 de março de 2011 19:17 delete

Muito Obrigado esta ajudando muito.

Reply
21 de março de 2011 15:27 delete

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

Reply
21 de março de 2011 15:35 delete

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!

Reply
21 de março de 2011 15:44 delete

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

Reply
21 de março de 2011 19:11 delete

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

Reply
Anônimo
3 de abril de 2011 21:25 delete

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

Reply
3 de abril de 2011 23:44 delete

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

Reply
13 de abril de 2011 12:18 delete

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?

Reply
22 de abril de 2011 22:20 delete

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

Reply
5 de junho de 2011 19:11 delete

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

Reply
5 de junho de 2011 19:14 delete

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

Reply
5 de junho de 2011 23:46 delete

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

Reply
6 de junho de 2011 01:34 delete

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

Reply
6 de junho de 2011 02:37 delete

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

Reply
6 de junho de 2011 04:45 delete

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

Reply
6 de junho de 2011 13:22 delete

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>

Reply
6 de junho de 2011 22:50 delete

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

Reply
7 de junho de 2011 19:21 delete

Que body ?tem varioooooooooos

Reply
7 de junho de 2011 21:13 delete

é 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

Reply
28 de junho de 2011 12:29 delete

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

Reply
28 de junho de 2011 15:34 delete

veja aqui o código para criar um menu igual ao nosso: Links lado a lado (menu horizontal)

Reply
30 de junho de 2011 17:17 delete

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.

Reply
30 de junho de 2011 17:45 delete

qual editor está falando?...

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

Reply
1 de julho de 2011 01:07 delete

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/

Reply
1 de julho de 2011 15:02 delete

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

Reply
3 de julho de 2011 15:38 delete

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

Reply
3 de julho de 2011 23:47 delete

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

Reply
7 de julho de 2011 01:36 delete

ficou nome do site nome do site e não consegui colocar o botão

Reply
7 de julho de 2011 14:57 delete

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

Reply
29 de julho de 2011 02:54 delete

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

Reply
29 de julho de 2011 16:27 delete

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>

Reply
6 de agosto de 2011 19:23 delete

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

Reply
Anônimo
9 de agosto de 2011 14:01 delete

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?

Reply
9 de agosto de 2011 14:07 delete

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

Reply
12 de setembro de 2011 20:20 delete

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?

Reply
13 de setembro de 2011 06:26 delete

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

Reply
13 de setembro de 2011 14:36 delete

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

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

Reply
Ariel
14 de setembro de 2011 13:09 delete

auhauah, mais uma vez, vlw! :)

Reply
Ariel
14 de setembro de 2011 13:57 delete

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

Reply
Ariel
14 de setembro de 2011 14:35 delete

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

Reply
28 de dezembro de 2011 12:37 delete

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

Reply
12 de janeiro de 2012 10:26 delete

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

Reply
12 de janeiro de 2012 10:43 delete

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

Reply
12 de janeiro de 2012 14:17 delete

@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

Reply
13 de janeiro de 2012 21:53 delete

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?

Reply
13 de janeiro de 2012 22:03 delete

provavelmente é o endereço errado da imagem

tem que usar o direct link

Reply
21 de fevereiro de 2012 11:03 delete

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

Reply
21 de fevereiro de 2012 19:45 delete

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

Reply
2 de março de 2012 11:35 delete

tem varios body quel dele eu coloco ?

Reply
2 de março de 2012 12:15 delete

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

ou pode colocar antes de

]]>< /b:skin >

Reply
7 de março de 2012 13:51 delete

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

Reply
7 de março de 2012 17:29 delete

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)

Reply
1 de janeiro de 2013 13:01 delete

Devira colocar exemplos de como vai ficar neste post!!

Reply
1 de janeiro de 2013 14:29 delete

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

Reply
16 de novembro de 2013 12:25 delete

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

Reply
16 de novembro de 2013 12:58 delete

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

Reply
25 de fevereiro de 2014 10:46 delete

Não estou conseguindo colocar as imagens

Reply
25 de fevereiro de 2014 11:44 delete

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

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

Reply
15 de abril de 2014 17:36 delete

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

Reply
15 de abril de 2014 23:21 delete

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

Reply