Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

06 dezembro 2007

Criando um menu horizontal

Aconselho sempre, antes de qualquer mudança no seu template, que você salve uma cópia do mesmo antes de tudo. E mais, nunca salve antes de visualizar o resultado, por que se não estiver bom, basta clicar em Limpar Edições.

1º Parte:

Coloque antes de ]]></b:skin>

#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background: url(link da sua imagem) repeat-x;
}

#navigation ul{
margin: 0 0 0;
padding: 0 0 0;}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}


#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}


Todos os valores que aí estão (width, margin, color, etc) podem e devem ser modificados conforme o layout do seu template.

Antes de passar a segunda parte do código, vou explicar algumas coisas que podem ser modificadas:

#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:0 auto 0;
background: url(ENDEREÇO DA IMAGEM) repeat-x;
}

Height é a altura que terá o menu
Width é a largura
line-height é a altura da linha (não confundir com o tamanho da fonte)
Margin: do modo que aqui se apresenta, centraliza o menu na página (0 auto 0)
Background é o plano de fundo, que pode ser uma cor ou uma imagem. Repeat-x garante que uma imagem se repeti horizontalmente.

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
white-space:nowrap;
}


border: aqui você define se terá borda em toda a volta de cada item do menu (para isso deixe só Border: 1px solid...), se só à direita (right), esquerda (left), topo (top), ou base (bottom). Basta determinar antes dos valores:
border-bottom: 1px solid etc etc...
border-top: 1 px solid etc etc....

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

Color: determinará a cor que dos links antes que se passe o cursor sobre eles.

#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}

Aqui se determina cor dos links e background quando se passa o cursor por cima do link.


2º Parte:

Para deixar o menu sob o cabeçalho, coloque abaixo de (HTML):


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Templates Novo Blogger (Header)' type='Header'/>
</b:section>
</div>

Este código:


<div id='navigation'><b:section class='navigation' id='navigation' showaddelement='yes'></b:section></div>


Salve as modificações. Vá ao painel do Blogger (Modelo/Layout) e veja um novo espaço, sob o cabeçalho, onde é possível adicionar elementos de página. Crie uma lista de links e arraste para este novo espaço. Salve e visualize.

Artigos Relacionados

144 comentários:

MamaNunes disse...

LINDO ! LINDO! LINDO !!!!!!

Mas ficou um "desbunde' esse seu novo template. Temos gostos parecidos. Acho que escolhi a "fessora" direitinho. Você já é uma das mais craques da net. PARABÉNS!! (sem rasgaR seda).

O blogger fez umas mudanças essa semana, ficou fora do ar umas horas e voltou assim...tudo em ingreis...fazê u queê. A gente é obrigada a ler hehehehe. e tem mais, alguns templates ficaram maluquetes, sumiram colunas..hiiii.

O Márcio me ensinou que quando acontece isso, precisamos excluir cookies e arquivos, dar uma zerada; pelo menos a diagramação dos blogs volta ao normal.
No IE é assim:
FERRAMENTAS=> Opções da Internet=>
Excluir=> cookies=> (clicar sim na janela de diálogo) => aquivos temporários a mesma coisa.

Não sei como funciona no Firefox.

Beijos queriiiida!
Bom fim de semana!

Ariane disse...

ai Mama, aquele template dourado tava me matando! pois é, eu não suporto meus próprios monstrinhos rsrrs. Mas e a imagem, Mama?? Prô projeto??

Xing Ling disse...

Bom dia a tempo estava procurando como modificar o template do blogger agora acho q achei o lugar certo para procurar informação
valeu pelas dicas, vou tentar modificar o template caso dê errado hehehehehe posso usar um dos seus disponiveis. é claro q é muito mais fácil pegar tudo pronto. Mais eu sou mais do tipo faça vc mesmo. pois só assim q se aprende. além da satisfação ser maior. só assim se pode dizer. eu q fiz. è isso, abraço querida fui...

Vi Leardi disse...

Cara Ariane...
Chego aqui por acaso...Sou uma novata a procura de anima�ao de Natal para colocar no blog este mes...Pouqu�ssimo sei como fazer qualquer coisa que n�o seja o b�sico..fiquei encantada com a ajuda que vc oferece e pode dar a n�s pobres mortais os "Baby boomers" que n�o fomos criados para toda esta nova tecnologia,mas ao mesmo tempo queremos participar...Estou tentando entender algumas das suas instru�es...em tempo voltarei com perguntas que certamente v�o surgir...
Meus parab�ns util�ssimo e �timo blog...Uma abra�o Vi
P.S achei que o fato da pagina de trabalho ter ficado em ingles fosse um problema s� meu ...vejo que n�o, ser� que volta s�zinho?...

carlos medeiros disse...

ois, coloquei o código onde você ensinou, depois coloquei os links mas não estão abrindo. Devo ter feito alguma coisa errada...ops!

Ariane disse...

carlos, em que blog? eu preciso ver o código fonte (no Bodega não ví nada...)e neste q vc está logado, só com convite

Hugo disse...

Olá Ariane

Tentei colocar este codigo e está dar um erro
Não foi possível analisar o seu modelo por não estar bem formado. Certifique-se de que todos os elementos XML estão fechados correctamente.
Mensagem de erro de XML: The element type "div" must be terminated by the matching end-tag "

isto acontece quando coloco a 2ª parte do codigo ( onde se insere os links ) so que este erro dá antes de colocar os links . podes me ajudar

é no just-agility.blogspot.com

obrigado

Hugo

Ariane disse...

Hugo, obrigada pelo aviso, já arrumei. abraço

Hugo disse...

Ola Ariane ,

excelente ... deu resultado

espero que continues a ajudar como tens feito até agora

abraços e muito boas entradas

Hugo from Portugal

Nério Júnior disse...

Ok, legal suas dicas! Salvei um template mas ainda não consegui colocar os links na barra horizontal pois ainda não sei criar links dos conteudos que já estão no blog. Pode me ajudar?

Obrigado!

Lipe disse...

Gostava que postasses os códigos para o menú que tens no blog. ("Tutoriais... Categorias...") Se puder ser, agradecia imenso.

Ariane disse...

nério, para isso basta clicar em cima de qualquer link (marcadores, por exemplo) e clicar em Copiar link. Depois cole o endereço do link no local apropriado no menu. Isso vale para qualquer link: post, marcador, link externo, etc....

lipe, isto é um código que se coloca no template para tornar os marcadores um menu expandivel. vc encontra o codigo no blog: http://templatesparavoce.blogspot.com

Downloading All disse...

Muito bom o seu tutorial !
Mas o meu não deu certo, quando insiro o menu ele quebra o template, da uma olhada http://downloadingall.blogspot.com/ vlw

Pidgeot disse...

Estou com um pequeno Bug no IE6, o menu sobe e acaba fica por cima da imagem do titulo. Pelo o Firefox o bug não ocorre. Como poderia resolver isto?

jose victor disse...

quem é dono(a) do blogger tenho uma duvida!

Ariane disse...

acho que é o google...

Adalberto Matos disse...

Hello ...
Ariane desculpe mas é que eu não sei muito bem como operar estes códigos .
Tentei implementar no meu blog mas não tive sucesso, tenho a intenção de deixa o blog mais com cara de site com o menu e tal ...
Será q tem como você me da uma ajuda ? lembrando sou completamente leigo em Blog ...
qualquer coisa si não for muito incômodo si puder mi enviar um e-mail me auxiliando ficaria muito grato, mas em todo caso sempre q possível passarei por aqui ...
E-mail: adalbertosm@hotmail.com
Dês de já obrigado aguardo a resposta ...

Dr. Chicletinho disse...

Oi Princesa, coloquei lá no Chicletinho e ficou legal, preciso dar mais uma polidas pois coloquei hoje sexta as 19:47. Mas muito obrigado mesmo, ficou ótimo.
Abraços
Dr. Chicletinho

Download Mastigado disse...

Muito obrigado por essas informações muito legal mais estou tendo um problema,,, nao estou consguindo colocar o menu no centro da pagina la no topo em baixo do logotipo do blog... como faço isso?

Andréia Santana disse...

Oi!!! consegui colocar menu horizontal em meu blogger seguindo sua dica ... muito obrigado!, mas no local onde fala pra inserir os links eu não to conseguindo fazer. por exemplo: no link do home eu meu coloquei me endereço, mas não abre a página. Por favor me dá umas dicas de como arrumar isso. Andréia.

Jerry William disse...

Oi Ariane (bonito esse avatar!). Olha só não quro me extender muito pra não te aborrecer.

1 - As dicas funcionam em qualquer template? Eu não consigo encontrar a parte de nenhum código que você coloca.

2 - Queria colocar essas dicas do horizontal mas estou em dúvida se não é melhor colocar o template revista logo de uma vez. Motivo, já mudei o template uma vez e não quero que os visitantes percam a identidade do blog.

3 - Desculpa, mas eu vejo nos comentários que algumas dúvidas não respondidas por você, não leve para o lado pessoal. Eu também tenho esse problema no meu bolg. Eu tenho os meus motivos e você deve ter os seus.

4 - Por favor me faça uma visita, e me dê uma dica pra eu colocar a imagem do header preenchendo toda a página. Tô apanhndo há tempos.

Abraços. Se puder me responda. vou deixar o e-mail: wiljerry@gmail.com

PLANET WEB Você conectado ao mundo. disse...

OI Ariane

To desenvolvendo um novo layout pro meu blog e gostaria de saber como deixo os links do menu acima em negrito ou como mudo de fonte.

Obrigado

Tiago Brito

da um olhada...
http://planetteste.blogspot.com/

to desenvolvendo ainda

Abraços

ADM - Pedro disse...

eu tenho uma duvida

e que quando eu ponho isso o link do meu blog fica na frete

por exemplo

nomedomeublog.blogspot.com/
nomedomeublog.blogspot.com/


o link q eu ponho no lugar ali fica com o nome do meu blog na frente

como posso tirar isso

Vany disse...

Olá Ariane, obrigada por compartilhar estas dicas com a gente, são de muita valia. Eu segui o passo a passo acima pra colocar a barra de navegação no meu blog, ela apareceu corretamente abaixo do título, consegui inserir os links e tudo só que as duas colunas do blog ficaram mais à esquerda, sendo q antes elas eram centralizadas na página. Acabei retirando a barra de navegação e tudo voltou ao normal. Gostaria de saber se vc pode me explicar como resolver este problema. Agradeço desde já.

http://vany-artes.blogspot.com

Vany disse...

Olá, passei para agradecer a explicação, agora deu td certo. Valeu! Até +

Ossims-downloads do the sims e o the sims!!!!!!! disse...

Tem Como você fazer um template com o motivo The Sims de graça?

email:victor.jose171@gmail.com
abraços ariane! :)

Lay disse...

Valeu!
Deu super certo no blog!
=D

Cidão disse...

Ariane, finalmente criei coragem e resolvi seguir a receitinha de bolo que você escreveu. Mas como sempre, sou uma anta e não soube como mexer: Como fazer para mudar a fonte e deixá-la em negrito? Seria nessa parte:
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}
No atributo weight coloco bold e devo criar mais um atributo, o font-style, para mudar a fonte?

Hiper Mania disse...

nao intendi a segunda parte

cleidson disse...

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag " ta dano esse erro

Mari Anna カロライナ disse...

Meu menu só fica láaaa em baixo.. pq não fica no lugar certo? Em baixo da imagem do blog, eu ja tentei de tudo mas ele só fica lá em baixo..
http://animeskss.blogspot.com/

Mari Anna カロライナ disse...

Ja consegui obrigada :]

Mari Anna カロライナ disse...

Desculpe pela ultima dúvida totalmente desnecessaria, eu q não tinha lido direito :P
Mas agora uma coisa que eu realmente não consigo fazer. Como eu deixo as bordas arredondadas? Pode ser arredondado de ícone por ícone que nem é aqui no meu do Templates para Novo Blogger, ou arredondado só nos cantos do menu inteiro, só não quero aquela coisa quadradona que ficou.
Eu sei que normalmente para "arredondar" o menu, eu que tenho que fazer a imagem, mas eu queria saber como descobrir as dimensões que a imagem precisa ter e onde colocar o link da imagem no HTML depois de hospedada.
Se não tiver entendido basta comparar o menu daqui com o menu do meu blog: http://animeskss.blogspot.com/
Q eu acho q vc vai entender..
Se vc ja tiver explicaod isso foi mals mas eu realmente não achei..
Parabéns pelos otimos 'tutoriais' :]
;*

Tigrão desde 2005 disse...

Olá, eu não estou consiguindo colocar o codigo que deixa o menu sob o cabeçalho, da um erro, pode me ajudar?

abraços!

PATRIX disse...

vlw pelo tutorial estava quebrando a cabeça aqui a um tempão tentando fazer isso

Lico disse...

sou iniciante, naum sei mexer em html mas sou curioso na area, entaum contaria de saber aonde coloko o codigo acima, lah no templades, pois de muitos codigos lah no meu templapes do meu blog, e naum sei onde coloko esse seu codigo ai

soh gostaria de saber em q parte coloko o codigo

winhaus disse...

Lico, você leu tudo o que está escrito? Mais mastigado que isso eu não acho que seja possível, você tá quase pedindo pra Ariane fazer isso pra você, você acha que ela tem quem ajude ela? Se vira meu parcero, nada na vida é mastigado, tente 1, 2, 3, 1000 vezes, uma hora você vai conseguir, conselho de quem sempre tentou várias e várias vezes dicam que "não funcionam" ;)

Victor Hugo disse...

Alguem me ajude por favor!
Li tudinho e fiz o que tá dizendo tentei por mais de 1 hora, mas não consigo fazer a segunda parte.

Como ficará ???
Me ajudem.

victor_14_rj@oi.com.br (e-mail e msn)

Juliana Freitas disse...

Caraca, Ariane... Haja paciência, hein???
Esse povo não lê! Não tenta! Não tem dó de você! :P

Ô CAMBADA, QUE TAL CRIAR UM BLOG DE TESTE PRA FICAR TENTANDO TODAS AS POSSIBILIDADES QUE VOCÊS PERGUNTAM AQUI? :P

PATRIX disse...

oi Ariane, mais uma vez muito obrigada pelas otimas dicas....consegui colocar o menu horizontal no meu blog, so que tbm deu o erro

---> Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag " ,<-----
".

Ae no final do codigo da 2ªPARTE fechei o div deu certo...sei la pode ser isso q tava dando erro...

agora uma duvida

o meu template é de 3 colunas e quero q o menu horizontal fique em cima da 3ª se me ajudar te agradeço muito .....
muito obrigadaaaaaaaaaaaaaaaaaaaa

o meu blog é http://www.elegiaemcanto.blogspot.com/

Reinaldo Lima disse...

como faço para organizar meu blog, menu vertical por exemplo

JoNyBoY disse...

Oi.
eu ja tinha um blog a relativamente algum tempo. Mas não tinha muitas visitas e, o ytemplate tava uma porcaria, desde que começei a ver o seu blog adorei logo do inicio fix varias modificações e segui passo a passo o que voce dizia e agora posso ainda não ter muitas visitas (espero que em breve tenha) mas adoro o meu blog. E foi graças a ti que consegui isso.
Adrt muito a ti e ao teu blog.
Bjnhx.

url: www.maltadocne.pt.vu

+Download disse...

Oi Ariane é um prazer participar do seu blog.
Eu inseri essa dica de manu com um medo enorme de perder meus links mais deu "certo". Só que quando eu vou colocar algum link ou editar o menu, quando salvo aparece essa imagem de avido com um código enorme, avisando que deu erro e será preciso enviar esse código pra que seja reparado o erro.Mais quando eu vou na seta de página anterior o que fiz está lá bonitinho o menu.
Queria saber se errei em algo pra que isso ocorra!
Fico no aguardo da resposta e fica na paz de Deus.
Simmm o meu blog é: www.maiscancoes.blogspot.com

Ariane disse...

Download, olhei sua página e aparentemente não há nenhum erro. Talvez vc tenha feito muitas alterações hoje, por isso a mensagem de erro. O Blogger fica assim qdo se faz muitas mudanças em pouco tempo. Ah, o link de postar comentários no seu blog não etá funcionando....

Zailda disse...

Olá, Ariane
Fiz o que você explicou mas os links ficam abaixo do título do blog mas um abaixo do outro e não um ao lado do outro, como eu queria. Pode me ajudar?

Ariane disse...

Zailda, em qual dos seus blogs vc colocou o código? Me diz qual e deixa o código lá prá eu poder ver onde está o erro.

Ana by anA disse...

Cara Ariane,
Eu tambem tive problemas como o Hugo acima:
"Tentei colocar este codigo e está dar um erro
Não foi possível analisar o seu modelo por não estar bem formado. Certifique-se de que todos os elementos XML estão fechados correctamente.
Mensagem de erro de XML: The element type "div" must be terminated by the matching end-tag "

isto acontece quando coloco a 2ª parte do codigo ( onde se insere os links ) so que este erro dá antes de colocar os links . podes me ajudar"
Poderia ajudar-me?
Ana Maria (Blogspot)

Ariane disse...

Ana este problema ocorre quando esquecemos algun > ou aspas. Com este código não se coloca links no html, só em Adicionar Gadget, ok?

Ana by anA disse...

Muito obrigada Ariane,
vc é d+...
Foi um pouquinho dificil, pq o meu modelo do blog nao aceitava, mas devargasinho eu consegui...
Se tiver duvidas ainda...te chamo. Ok?!?
Abracos
Ana Maria

Tv.Show disse...

Como faço pra por um menu vertical?
onde eu coloco o código do menu?

Senna disse...

Ariane, esse topico é antigo mais me ajudou muito,

eu fiz tudo como manda o figurino, vem cá tem como eu colocar as divisoes dos menus de um lado e do outro, sem que as linhas do meio fiquem como se estivessem em negrito?

exe(sem a barrinha): Home | Orkut | Contato |

exe(com a barrinha): |Home||Orkut||Contato|

Onde tem duas linhas significa que está em negrito, então tem como colocar as barrinhas dos dois lados, sem que fiquem mais fortes as barras do meio?

exe(do que to falando):
| HOME | ORKUT | CONTATO |

agradecido

Senna disse...

aH e também você poderia me responder se tem como colocar link para e-mail ali?

Ana by anA disse...

Olá Ariane,
A minha pergunta, nao é sobre esta pagina, mas se vc puder ajudar-me serei grata:
Eu uso Blogspot e gostaria de montar um mural de fotos dentro do blog, ja sei como faco para abrir o link em uma outra janela, mas nao sei como colocar todas as fotos em colunas, por exemplo. Nao quero slide, pq ja tenho o Picasa. quero uma pagina mural.
Obrigada.
Abracos
Ana Maria
PS: desculpa os erros de digitacao, é culpa do meu teclado que nao tem alguns acentos e nem o cedilha.
beijinhos

Ariane disse...

Senna, o negócio das bordas não entendi. e-mail no menu já tem um post aqui explicando.

Ana, clica no marcador Menu e vc vai encontrar uma postagem onde ensino a colocar uma espécie de mural. dá uma olhada e vê se te interessa. abraços!

Senna disse...

O problema das bordas eu dei uns pulo e resolvi, mas... uma coisa que eu só vim notar ontem e foi uma facada, é o meu template...
no mozilla ele fica alinhadinho, certinho, agora no IE ele fica uma desgraça total, todo desalinhado, barra lateral sobre o menu horizontal... ficou uma merda...

tem como (algum codigo), para que deixe o template alinhado para os dois navegadores?
(eu já dei uma pesquisada e não achei a solução)

Estou profundamente triste com isso. (Y)
bjs

Paulo Figueiredo disse...

Olá Ariane, é possível me dizer como coloco um menu horizontal no formato antigo. Isto é, eu não fiz a migração para BETA e os códigos HTML que vc mostra em cima são pra BETA, certo? Como faço para o antigo? E já agora como coloco um coluna do lado esquerdo do template?

Se quiser responda para paulofigueiredo2580@yahoo.com

Já agora deixo o meu blogue:

www.eventhorizon-space.blogspot.com

Obrigada! :)

Quadrante 14 disse...

pow kra...fiz td dogeito q vc mandou...soh q qaundo eu adiciono os marcadors ele fik atras dos posts...o espaço vaizio tah no lugar certo...soh q quando eu adiciono a gadjet dos maracadores ele fik atras dos posts

ajuda aew.veio...preciso pra od divulgar a banda!

GiGaNTE disse...

Muito agrdecido, Excelente!!!

Đαdinнo™ disse...

Olá Ariane!
è aconselhável excluir o outro marcdor comum ne?
porque o google não ta indexando minhas postagens novas.
Obrigado por tudo, meu blog é todo customizado por mim, fiz meu menu e muitas outras coisas aprendendo aqui com você.
Sucesso, bjos!

www.headban.blogspot.com

Power Handy & Lampiao disse...

nao consegui poderia me ajudas naum mudo nada
flw

cleciojr disse...

como faço pra inserir abas em meu blog???

cleuza disse...

Olá, estou passando só para agradecer. Muito obrigada. Meu blogue ficou lindinho, do jeito que eu queria. Muito obrigada mesmo.Não tem erro, é só seguir as intruções direito e tudo dá certo.

spfcnaweb disse...

Oi tudo bem? será que tem como, colocar um Menu Horizontal, de baixo do cabeçalho do meu blog?

resposta para o email thiagorzs@hotmail.com

Ariane disse...

spfcnaweb, você só pode estar brincando, né?

planettops disse...

Brincando pq? vc torce para outro clube?
eu tenho varios amigos torcedores de outros clubes, que eu ajudo sempre.

Ariane disse...

continua brincando, né?

planettops disse...

não estou brincando não.

Cidão disse...

Ariane, meu anjo, calma!!! ;o)

Ariane disse...

Cidão, eu tô é rindo! :-)

planettops, vc é o spfcnaweb? seu perfil não está disponível, não tenho como confimar. De qualquer maneira vou explicar a minha visão (e vc vai entender pq pergunto se é uma brincadeira - pode ser, pq não?). Eu escrevi um post bastante longo e minucioso sobre como colocar um menu horizontal abaixo do cabeçalho. então recebo uma pergunta, no mesmo post, sobre se tem como colocar um menu horizontal abaixo do cabeçalho. E quer a resposta por e-mail! Assim: resposta para o e-mail tal.

eu respondo todo tipo de pergunta e fui ao tal blog ver o que poderia estar impedindo de colocar o menu. nada. nem rastro do código por lá, talvez algum errinho que impedisse de funcionar...mas, nada! e por lá os códigos são exatamente iguais aos daqui (cabeçalho), não tem como errar se seguir o tutorial. Aliás, bastava ler o tutorial para saber como fazer e não precisava perguntar, muito menos escrever algo como : resposta para o e-mail tal.

entendeu pq achei que era brincadeira? já em relação à sua pergunta: eu não gosto de futebol, não torço pra ninguem e jamais deixaria de ajudar alguém por uma bobagem assim. agora, quando eu percebo que existe preguiça, acomodação, folga mesmo, aí eu não ajudo não. entendeu?

spfcnaweb disse...

oi Ariane, eu já tinha conseguido, colocar o menu em cima do cabeçalho, mais o menu só aparecia verticalmente. mais depois, que você me deu, uma chamada de atenção, um puxão de orelha, eu consegui. mais não ficou do jeito que eu queria.

http://sampatricolor.blogspot.com/

o que vc achou? tem como melhorar?

Muito Obrigado!

Ariane disse...

spfcnaweb, primeiramente, parabéns por sua reação: a maioria fica com 'mimimis', se ofende e me ofende. veja que eu não deixo de ajudar ninguém, qdo vejo que tentou. fui lá e ví, tá ótimo, só diminuiria um pouco o tom do vermelho (colocaria o tom do titulo), acho que em contraste com o fundo escuro, ofusca um pouco a vista. parabéns e abraços.

spfcnaweb disse...

Ariane na pagina de Adicionar e organizar elementos da pagina, quando eu adicionei a lista de links, a lista de links ficou por baixo dos outros elementos. esses outros elementos estão tampando a lista de links.

será que tem como corrigir isso?

Ariane disse...

spfc, tenta o seguinte: no CSS do seu template, coloca esse código:

#body#layout #main{margin-top: 30px}

se não resolver, tenta:

#body#layout #main{padding-top:30px}

♥ £σίґą ♥ હίмρℓεહмεฑŁε ♥ ¸.ﻼჱ ੴ disse...

Boa tarde,
Eu amei seu Blog
Sou iniciante nessa área.
Seu Blog tem me ajudado muito,
E sempre dou um toquezinho pra finalizar.
Parabéns !
E obrigado por vc nos ajudar sempre.
Loira

J-Rocker disse...

Olá.
Não sei se já falaram issoaqui, mas não deu certo,não apareceu nenhum menuno blog como dito aqui na postagem... Eu nunca fiz nenhum curso dessaárea, não de nada mesmo, então queriauma ajuda, por favor.
Obrigada.

spfcnaweb disse...

Oi Ariane, tudo bem? me desculpa por estar te enchendo de novo. é que eu estou, com outro problema, para você me ajudar resolver.

sumiu as Fontes e cores do layout.

o que eu faço?

Ariane disse...

spfc, como assim? não entendi não

Ariane disse...

J-Rocker, não falaram não, pq sempre aparece. esse é o código que uso aqui no meu blog e em todos os templates q faço. não tem erro.

spfcnaweb disse...

Oi Ariane! quando eu clico, em fontes e cores do layout, aquele quadradinho, onde fica as fontes e as cores, está em branco.

lrdpckrd disse...

Olá Ariane! Este post do menu horizontal é exatamente o que eu preciso. Correu tudo bem mas quando ponho os links no menu, ele (menu) fica separado do cabeçalho e já tentei de tantas maneiras e nunca dá certo. Será que é do template ou fiz alguma coisa mal?

Obrigado pelo teu tempo ;)

Ps. Como tenho vários blogs pensei k era melhor dizer kual é o blog em questão. O blog de que falo é o http://morganho.blogspot.com/.

spfcnaweb disse...

Ariane o meu blog tem duas colunas paralelas, e na coluna do meio é aonde está o chat do meu blog. mais em outros templates o chat não atravessa por cima da outra coluna. o chat fica pela metade. não ultrapassa a terceira coluna.

tem como mudar o template para o chat ultrapassar a coluna do meio.

Ariane disse...

Irdpckrd, procura por #header-wrapper e apaga e linha onde está padding-bottom:15px; acho que resolve.

Ariane disse...

spfc, o problema de cores e fontes não sei o q pode ser. qto ao chat, acho mais fácil (e mais provável que dê certo) movê-lo para a base da coluna da postagem ou tirar aquelas duas colunas. Uma coluna que comporte a largura do char é o ideal.

Marcos Bessa disse...

Olá, Ariane!

Desde já obrigado por toda a ajuda que prestas a quem é novato neste mundo dos blogs... Eu estou com um problema num blog novo que estou a criar (Caminheiros 1039 Vilela). Segui os passos que indicaste neste post e resultou praticamente como esperado, no entanto fiquei com uma "linha" entre o cabeçalho e o menu que não consigo eliminar! :S

Consegues ajudar-me?
Desde já obrigado...

Tiago Melo disse...

Eu queria saber como que faz pra alterar onde começa o menu horizontal. No caso eu só queria mesmo é que o menu começasse mais pra direita em relação ao lugar que ficou.

Obrigado

spfcnaweb disse...

Oi Ariane! eu coloquei um menu horizontal, embaixo do cabeçalho. tem como colocar mais um menu horizontal, em cima do cabeçalho? dai ficaria 2 menus.

Ariane disse...

sp, vc pode colocar sim, só que tem q dar um outro nome pro segundo menu. as ID's devem ser sempre únicas.

spfcnaweb disse...

eu coloquei o menu, mais ficou vertical. tem que colocar todo o codigo novamente?

Ariane disse...

sp, tudo novamente, é um novo menu

Ariane disse...

Tiago, muda a margin. Deix assim:
margin: 0 0 0 10px;
esse 10px é só para ilustrar, vc deve colocar o valor q achar melhor.

Ariane disse...

Marcos, tenta colocar o menu dentro de header, talvez resulte. Faça assim, busque na parte do HTML onde está
<div id="header-wrapper"&ht;

aqui vai estar o header1 e header inner...

</div>

recorte e cole o trecho todo referente o menu (html) e cole antes de </div> que fecha a tag header.

KazeKage-Sama disse...

Olá, gostaria de pedir para vc editar o template do site: soul.animexblade.com (o link do site é só isso msm) para um template do blogger, se possível, Claro! Caso vc naum esteja a fim, naum possa, naum tenha tempo, ou msm q vá fazer e/ou me entregar o template pronto, mande um e-mail para: narutofaclube@rocketmail.com, agradeço desde jah ^^!
É q gostei muito do template daquele site, e naum dou conta de fazer um 'igual' pra mim!!!

spfcnaweb disse...

Ariane sou eu de novo, para colocar o segundo menu horizontal em cima do cabeçalho, eu tenho que colocar o codigo novamente?

mais aonde eu coloco?

e mais uma coisa, você falou, que o segundo menu. as ID's devem ser sempre únicas.

mais como assim?

bypoesia disse...

Ariane eu não estou conseguindo fazer o menu encostar-se ao cabeçalho já tentei de tudo fui visualizando tipo: eu mexia em marging e pading alterava os valores e não dava certo, mais uma coisa o texto do menu fica muito longe da margem se você for ao meu blog de teste que estou tentando consertar isso você repara que o texto "Home" esta muito longe da margem esquerda do menu se poder me ajudar e explicar a onde esta o erro agradeço.

bypoesia disse...

Ixeee esqueci de colocar a url do blog de teste rsrs! ai vai http://estetesteeete.blogspot.com/

bypoesia disse...

Ariane sou eu de novo... Depois de muitas tentativas eu consegui arrumar o tempate do jeito que eu queria, aquelas perguntas que fiz aqui já foi resolvido depois de muita luta e quebra de cabeça rs!! Mas é assim que se aprende né? Só uma coisa que isso não consegui de jeito nenhum tentei varias vezes e até tive que excluir blogs de teste e fazer outro porque em minhas tentativas eu estragava o template depois ficava horrivel pra tentar arruma "ainda bem que não foi direto no meu blog" se não eu estava perdido rs! Pois bem o que esta me deixando de cabelos em pé é que a borda do menu só ficam de um lado tipo assim expl... HOME| poderia me informar como faço para ficar desta maneira >> |HOME| porque quando chega no final do menu no ultimo link essa borda aparece e no começo não tem fica meio esquisito rs! Esse template que estou customizando é para uma amiga aquardo respostas e mais uma vez obrigado!!

bypoesia disse...

O Ariane desculpa ser chato e colocar varios comentários aqui, é que conseguir fazer meu template tudo certinho depois que estava pronto as barras de post junto com as lateral e a imagem do titulo visualizando pelo firefox foram tudo pro lado esquerdo descentralizou o template visualizando com o mesmo pelo ie esta certinho já tentei mas não sei o que fazer por favor Ariane me da essa ajuda pra eu não ter que editar tudo de novo muito obrigado e desculpa pelos varios comentários no mesmo post...

link do blog que esta descentralizado visualizando pelo firefox http://bloguedeteste0301.blogspot.com/

Ariane disse...

bypoesia, o problema é q a margin de outer-wrapper é 1px. Você tem que substituir por margin: 0 auto;

bypoesia disse...

Vim aqui para agradecer deu certo e muito obrigado valeu mesmo xD..

Douglas disse...

carai muito bom
agora vc poderia me dizer como eu faço pra almentar o tamanho da fonte??
abraços
e seu blog e foda

Ariane disse...

Douglas, mude o valor que está em font-size:0.8em;

Douglas disse...

eita vlw depois de um trabalinho
eu consegui sua video aula ajudor bastante
mais no meu fico todo desalinhado
ai fui mexendo ,mexendo ....
e consegui fico bem foda
hshsuhsuhsushsuhsushs
ah so mais uma coisa
na proxima video aula ve se vai narrando
seria mais facil de entender
mais e so uma sugestão
brigadão aew =)

Artur Constante disse...

Ola Ariane! Tudo bem?
Estou aqui mandando esta mensagem porque
quebrei a cabeça o dia todo p/ colocar
menu no meu blog, mais n consegui.
Preciso muito da sua ajuda, pois consigo colocar
os códigos + não acontece nada, muito pelo
contrário, quando chego no layout aparece
todo o cód em cima do cabeçalho.

Artur Constante disse...

FAÇO TUDO QUE É PEDIDO + NÃO DÁ CERTO.
O QUE EU FAÇO? ME AJUDA, POR FAVOR!!
OBRIGADO DESDE JÁ.
BJS

Equipe Arrasa No Blog disse...

Oi Ariane, eu tenho dois blogs, em um eu consegui colocar o menu! Mas no outro, não consegui achar esse código para incluir o q vc explica

div id='header-wrapper'....
Não sei se é algo do template.. vc pode me dar uma ajuda? Obrigada

Denner disse...

Ariane tento colocar um menu horizontal mas ele sai vertical de uma olha ai nesse blog test meu

http://teste16cm.blogspot.com/

Ariane disse...

Denner, pelo q vi vc colocou no CSS #navigation e no HTML outro nome para a div (menu orange alguma coisa...). Não pode. O nome tem que ser o mesmo, ok? abraços

Hospedaria 1900 disse...

Ariane

Obrigada pelas dicas!

A dica dos botões.. fiz tudo certo, porém a imagem dos botões não quer aparecer e o marcador está voando acima dos post.. e qdo passo o mouse, eles não são clicáveis.
O que posso ter feito errado?
Pode me ajudar?

Gi

Ariane disse...

Gi, deixe o código no template para que eu possa ver onde está o erro, ok? abraços

The Degeneration of Soul disse...

Queria saber como posso por um menu que fiz no fireworks no meu blog, help Ariane please...

Simone Schuck disse...

Ariane, você é demais! Não sei o que seria da minha vida bloguística sem você. Haha
Beijos, muito obrigada!

Simone Schuck disse...

A propósito, este menu só pode ficar no topo do template? Como faço para mudá-lo de lugar?
Beijos, obrigada.

Douglas disse...

ola ,consegui fazer tudo tranquilo so to com um problema .....
se puder olhar meu blog
http://soanimesdownloads.blogspot.com

como vc deve ter notado fico um espaco branco entre o banner e o menu e o resto do blog
vo poderia me ajudar e juntar e deixar apenas uma linha branca bem pequena entre os dois
abraços

narduci disse...

Olá amigos...
Excelente...consegui, após muitas adaptações de cores, colocar meu "menu horizontal". É muito útil, evita, pelo menos em um Blog, de "chapar" uma página, com dados que talves não interesse ao leitor, se interessar click no menu.
Valeu!

Gairova disse...

Obrigada pelo tuto. Deu certinho. Ainda falta muito o que fazer no espaço mas isso já fez andar bastante.
Um abraço,
Marta

Anônimo disse...

Gostaria di saber como que coloca um menu em iguaL ao teu Blog!

Ajudaa noois aíí !!

VISUALIçAO CRIATIVA disse...

Bem podem me chamarem de burra ou tapada!
Mas eu passei o domingo inteiro aqui trocando templates pra achar os codigos acima citados e não achei nada.
A unica coisa que consegui mudar foi a imagem de fundo.
E o cabeçalho de qualquer blog !
Mas o que eu gostaria de colocar é realmente o menu horizontal.
Desculpe-me mas esta dificil!
Imagine quase 12 horas e não consegui!
Seu blog é 1000!
O meu blog é sobre livros!
Entro aqui todos os dias!

VISUALIçAO CRIATIVA disse...

Ariane amo seu blog porque é o unico que me ensinou detalhadamente como mudar imagem de fundo e cabeçalho.
Mas...desculpe-me por ser quase leiga em montar um menususpenso.
Passei 12 horas tentando achar os tais codigos e nada.
Ajude-me por favor ou alguem que conseguiu de-me uma força!
Me ajudemmmm por favor!

Jaderti disse...

Olá Ariane! Primeiramente gostaria de agradecer pelos seus posts que tanto teem me ajudado!
Minha duvida e exatamente a mesma do "lrdpckrd", sobre o menu ficar separado do cabeçalho quando coloca links. quando nao tem link, fica junto, como deveria ser. tentei tirar a linha onde está padding-bottom:15px em #header-wrapper, mais nao adiantou. Vc poderia me ajudar?

http://orquidarioelisa.blogspot.com/

Unica Séries disse...

Otima dica, eu só tenho uma duvida, como eu faço pro menu ficar mais pra cima, o meu fica muito longe do topo. Obrigado

stephani.dark.butterfly@gmail.com disse...

[b][purple] muito bom seu blog, salvou minha vida... mas essa parte do menu me quebrou as pernas. Estou começando achar q não tem como colocar, meu blog é template Mínima, segui passo o q vc disse aí, mas não apreceu o menu.. não sei pq.
Sei q não tem nehuma obrigação, mas se poder me ajudar ficarei muito agradecida.
Qualquer coisa entre em contato po e-mail... obrigada.

LAGOA SALGADA disse...

OLA!!!! TO PRECISANDO DE UM MENUS SIMPLES PARA O BLOG DA ESCOLA Q EU TRABALHO...SERA Q VC PODE MIM AJUDAR?????
O MENU TE Q SER HORIZONTAL
E TEM Q TER
INICIO GRÊMIO MURAL DE FOTOS

Fernando disse...

Eu tenho uma duvida...

eu olhei pelo video tutorial mas tem uma parte q mostra ele colocando o codigo(da primeira parte) em cima de um negocio asim:

"/* Outer-Wrapper"

mas no meu html nao tem esse termo..
eh pra colocar em cima do ]]>b:skin ou fazer oq?

Ariane disse...

Fernando, conforme o tutorial, em qualquer lugar acima de ]]>b:skin

HerzL - Blog Admin disse...

Olá tudo bem, queria colocar o menu no meu blog. mais estou com dificuldades.. se poder me ajudar me manda um comentario no meu blog na ultima postagem que fica mais facil de ver.. nem que seja com o link da sua respota aqui.
Obrigado Ariane você é muito boa no que faz continue assim.

raphaxD disse...

Gente colouquei a 2º parte pareceu um erro:

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The markup in the document following the root element must be well-formed.

Alguem pode me ajudar?

raphaxD disse...

Gente eu fiz um site do blospot so pra testar os codigos, para quando conseguir por no meu blog principal, tava colocando a 2° parte do Codigo apareceu os eguinte erro:

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The markup in the document following the root element must be well-formed

Alguem me ajuda?

http://joguemhabbo.blogspot.com/

juan-o-salazar disse...

olá ariane. como vai? consegui criar o menu para o meu blog (ele já se encontra disponível em elementos de página), mas não estou utilizando ainda pois gostaria que o menu ficasse acima do cabeçalho. é possível? não estou conseguindo fazer isso.

abraço,

Kaique. disse...

ariane eu fiz tudo certo, mais so aparece a imagem do menu, e nao os links =/

❤ Buba e Badeco ❤ disse...

Deveriam apagar de vez...sumir do mapa com o Internet Explore.
ele faz a gente passar raiva...incrivel.no mozzila meu blog está perfeito..jah no IE tah um lixo...num tem nem fundo o meu template,some todo..ain toh estressada jah..alguém tem alguma solução pra isso...pra fik igual em todos os navegadores? se alguém puder ajudar..agradeço

MICHELI disse...

Socorro, poderia me ensinar colocar um menu horizontal?
Já coloquei os códigos e nada :(
Queri tanto deixar meu blog bonitinho!!
Mas não consigo colocar o menu,
Pode me ajudar?
micheli.almata@hotmail.com

Profª Simone disse...

Olá Ariane, comecei meu blog a poucos dias, conto com uma ajudinha da minha filha e claro com a sua. Vim agradecer suas dicas, estão me sendo muito uteis. Agora sismei em colocar um menu no meu blog, pra te ser sincera devo ter feito algo errado poi ele ficou em cima do titulo, eu gostei, mas.... Oq quero?
Agradecer e saber onde errei.Pois minha filha não tem muita paciencia pra explicar!

obrigada.

Ariane disse...

Prof. Simone, vi que está usando um template da Elke (Templates e Acessórios) e acredito que seja melhor pedir orientação diretamente à ela, pois não sei se ela permite alterações nos templates que cria. abraços!

Edna Motta disse...

Oi Ariana, tudo bem?! Tenho um blog [blogednamotta.blogspot.com], ele não tem template, apenas o plano de fundo disponível no blogger. Eu coloquei uma figura no cabeçalho e quero inserir um link em cima dela, no canto... link [portifólio]. Como faço isso?! Me ajuda por favor!

MARCELO PARREIRA DE OLIVEIRA disse...

Ariane, segui seu tutorial.

Só não consegui colocar o menu centralizado.

O que posso fazer pra melhorar meu blog ? Suas dicas são muito importantes. Por favor, me dê conselhos pra melhorar o blog ...

Abraço. Fica com Deus.

http://mpoliveira.blogspot.com/

Obrigado.

LoginDownloads disse...

eu não consegui!!
onde eu tenho que colocar este segundo codigo??

Dragus disse...

Ariane, estou utilizando seus códigos para atualizar o meu blog, só que ao visualizar no IE fica completamente desconfigurado.

O que estaria acontecendo?

O endereço do blog de testes é esse aqui: http://testesequivocados.blogspot.com/

VC Rio Locadora disse...
Este comentário foi removido pelo autor.
VC Rio Locadora disse...

Olá, Ariane, td bem?Então, fiz tudo como vc mandou e funcionou, mas não estou conseguindo alinhar. Pode me dizer como resolvo isso?obrigada

Ariane disse...

VC Rio pelo que observei no código do seu template, ao invés de zero em margin, tá a letra o. Muda para margin: 0px auto 0px; e diminui o width de navigation para 500px;

Dragus pelo que vi está tudo ok no IE

Tribus Net ADM disse...

Ariane por favor necessito de sua ajuda. Fiz todo o tutorial certinho. Ele aparece todo bunitinho no Chrome, porem no IE e Firefox ele o menu fica uns 5px para cima. Como devo preceder.

Link do site
http://www.tribusnet.com.br/

Desde já agradeço a atenção!

Ariane disse...

Tribus deixa o código assim:

#navigation {
font-family:arial;
height:60px;
margin:0 auto;
overflow:hidden;
word-wrap: break-word;
width:1000px;
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:14px 0 0 20px;
}

Veja que aumentei a altura do menu para 60px; (25px é pouco) e centralizei com margin:0 auto; Em #navigation ul é que você posiciona o menu com padding. Onde está #navigation li, deixa padding: 0 10px;

Talvez resolva, só testei no Firefox.

Tribus Net ADM disse...

Ariane muito obrigado nem sei como agradecer. Ficou ótimo no firefox e IE 7. Mas no Google Chrome não fica correto. Mas tudo bem já que meus visitantes usam IE e Firefox, mas caso vc souber se existe alguma maneira ficaria bem agradecido.

Até mais você é um anjo para todos nós :)

Tribus Net ADM disse...

Ariane ja deu certo. Num passe de mágica tá pegando certo em todos os navegadores perfeitamente! Muito obrigado mesmo.