Menus Vanessa S.
Menu Horizontal DropDown
Atendendo ao pedido do Wallac, que enviou uma sugestão de artigo, neste tutorial você vai aprender a instalar um Menu Drop Down no seu blog. Este menu é bem fácil de instalar.
Para quem não sabe, Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado botão do menu, logo abaixo dele, se abrem varios sub-menus.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.[/becape]
1º passo: Aplicar estilos ao seu Menu Drop Down:
Vá em Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de ]]></b:skin>
/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 100%;height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;/*--cor do link--*/
font-weight: bold;margin: 0;padding: 0;text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;/*--tamanho da fonte do link--*/
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF; /*--edite cor do link hover--*/
margin: 0;padding: 9px 15px 8px;text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;/*--cor de fundo--*/
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;/*--cor de fundo hover--*/
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
Salve e sigamos para a 2ª parte da instalação.
2º passo: Instalar o Menu Drop Down:
Antes de prosseguir é importante que você saiba que:
- Você que deverá escolher o local mais adequado para instalar o seu menu no template.
- Não há como eu informar precisamente onde instalar o menu, a escolha do local deverá ficar por sua conta, até porque cada template é diferente um do outro.
Acesse o painel do Blogger, e vá até o menu “Modelo“, clique no botão “Editar HTML” , não precisa clicar em ‘Expandir modelos de widgets’, e procure pelo trecho referente ao código do cabeçalho.
Localizado o trecho referente a tag do cabeçalho no seu template, cole ABAIXO dela o código html do menu:
<div id='NavbarMenu'> <div id='NavbarMenuleft'> <ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li> <a href='SEU LINK AQUI'>Nome do Link 1</a> <ul> <li><a href='SEU LINK AQUI'>Nome do Link </a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> </ul> </li> <li><a href='SEU LINK AQUI'>Link 2</a> <ul> <li><a href='SEU LINK AQUI'>Nome do Link </a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> </ul> </li> <li><a href='SEU LINK AQUI'>Link 3</a> <ul> <li><a href='SEU LINK AQUI'>Nome do Link </a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> </ul> </li> <li><a href='SEU LINK AQUI'>Link 4</a> <ul> <li><a href='SEU LINK AQUI'>Nome do Link </a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> <li><a href='SEU LINK AQUI'>Nome do Link</a></li> </ul> </li> </ul> </div> </div> <div style='clear:both;'/>
Salve as modificações.
Pronto! Agora é só editar os links e nome dos botões no menu, nos locais indicados.
O trecho destacado na cor azul correspondem aos sublinks.
O trecho em vermelho corresponde ao link principal.
Abaixo seguem algumas dicas para localizar o trecho referente ao código do cabeçalho.
Designer de Modelo:
Se você quiser colocar o menu abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.
Se quiser que o menu fique visível acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.
Se estiver usando algum modelo de template do “designer de modelo do blogger”,a tag referente ao cabeçalho é: <header>
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag: <header>
Se quiser que o menu fique abaixo do cabeçalho, instale o código do 2º passo abaixo da tag: </header>
Templates mínima:
Se estiver usando algum modelo do template minima, a tag referente ao cabeçalho é: <div id=’header-wrapper’>
Caso queira que o menu fique acima do cabeçalho, basta instalar o código acima da tag <div id=’header-wrapper’>
Você pode editar as cores do seu menu, se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.
Se quiser, verifique os códigos das cores nesta Tabela de Cores HTML.
(Dica: só edite cores se você for um usuário no nível intermediário ou avançado, pois requer conhecimento maior em css.)
Artigo atualizado em 26/05/2012.
Adorei o menu, estou usando já, mas tenho uma dúvida… Eu tentei adicionar mais opções ao menu e não consegui, por que? Ele fica desconfigurado, por mais que eu copie o código direitinho… Queria colocar mais de 4 opções no meu menu :/
Se puder ajudar, agradeço.
Lamento, mas eu não tenho como te ajudar, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.
Ola
tenho uma duvida, coloquei no meu blog e ficou mt bom, desde ja tb agradeço o seu site em ajuda, no mozila ficou bem, mas no explorer fica atras do layout de mensagens, o que tenho de fazer para colocar a descer na frente das mensagens, como fica no mozila, espero ter explicado o meu problema.
obrigado
agradeço resposta
Tem que colocar certos trechos de código que há por ai em sites se procurar, para colocar no html do seu site referente ao erro do IE 🙂
pois eu ja procurei e ja experimentei varios mas continua o problema la, e n sei como revolver ou o qe colocar, qe resulte e coicida com este codigo da barra.
Como ponho o fundo do menu de outra cor, eu ja tentei eu todos os trechos referentes as cores e nao faz alteraçao nenhuma ao menu so ao sub menu dropdown 😕
Vanessa este menu é bem legal e gostaria de subdividir os submenus, por favor pode me dar uma dica de como fazer? Fiz algumas tentativas mas foi sem sucesso.
Mais uma vez muito obrigado.
“procure pelo trecho referente ao código do cabeçalho.”, nao entendi, ajudaaaaa
Esquece, isso eu ja sei, mas agora to querendo centralizar o menu, ele esta a esquerda, por favor, heeelp
Eu não percebi podes me explica o que quer dizer “procure pelo trecho referente ao código do cabeçalho” ?
eu lhe agradeço muito me ajudou pakas eu estava com problemas com o meu menu graças ao seu código eu consegui resolver
Olá Vanessa, dá pra dizer como colocar mais um sub menu?
Parabéns pelo Blog e obrigado.
Consigo fazer com que cada palavra NÃO comece com letra maiúscula?
Obrigado
Dá uma lida neste tutorial:
Text-transform:Transformação de textos
Muito obrigado.
Utilizei o seu tutorial para o menu do meu blog, mto bom.. deu certo.. tenho duas duvidas. 1- É possivel deixar a cor do item principal “acesa” quando estamos com o mouse no sub menu?? e 2- Como posso centralizar o menu?Agradeço mto se puder me responder.
Vc pode editar a cor do link -> color: #FFF; /*–cor do link–*/
Quanto a centralização, vai depender muito do local que vc está incluindo o código html do menu. Note que no código CSS o width(largura) está definido em 100%, isto significa que o menu vai ocupar toda a largura, exatamente a mesma que está definida no local onde vc está instalando. Ex: se tiver instalando o menu na área abaixo do cabeçalho e ali nesse trecho a largura estiver estipúlada em 950px, o seu menu terá 950px .
Oi Vanessa, muito obrigada por me responder..A questão da cor do link é a seguinte, quando eu passo o mouse no menu ele muda de cor e abre os sub-menus, ai se desço com o mouse no sub menu, a cor do menu principal volta a ser a que era. Não tem como deixa a cor do menu como se estivesse com o mouse em cima estando com ele nos sub menus? Se tiver meio confuso tenta ver no meu blog, acho q fica mais facil..rss Obrigada.
Olá,muito bom seu tutorial foi o único que funcionou no meu blog
Sem querer abusar mas já abusando… percebi que voce esta usando o plugin LASY LOAD para JQUERY ,voce poderia fazer um tutorial
para instalar no blogger???Já quebrei a cabeça e nao consegui 🙁
olá se vc puder me ajudar a centralizar eu agradeço pois ficou uma margem pra esquerda.
muito bom!!
NA hora de determinar onde vai ficar o menu, uma outra forma, a que eu utilizei, foi criar um gadget de HTML/JavaScript e colocar o codigo do menu nele ^^ Aí só escolher onde vai ficar o menu e colocar o gadget ^^
Funcionou lindamente aqui 😉
Também fiz isso e deu super certo!
Olá. O “mastigado” que eu tinha pedido era simplesmente saber como colocar os links nos sub-menus. Felizmente já consegui resolver. Bastava explicar ou indicar um artigo sobre Marcadores, tão simples. Mas pra quem está começando o mais simples pode parecer complicado.
Mais uma vez parabéns pelo excelente artigo, realmente está bem explicado, um grande abraço e até breve.
Oi Wanessa eu consegui colocar tambem mudar a cor… mais só aparece um sublink embaixo dos meus links,não aparece mais de um, teria como voce me ajudar que, nesse site foi o melhor que encontrei e o unico que deu certo
Ta Obrigada
Att Regina
OI! ce poderia me dizer com faço pra adicionar mais um submenu?
tou tentando assim:
Nome do Link
Cartão
NOVO SUBMENU
NOVO SUBMENU
Mas apesar de o codigo ser aceite nao fica visivel no blog depois. tem como vc me ajudar ?
Coloquei em um blog e deu certo, mas no outro não deu, por que?
E como faz para mudar a cor de fundo? O resto eu consegui mudar, menos esta.
Nos trechos “background” no código CSS.
Oi. Eu coloquei tudo direitinho, ficou no local que queria. Mas não consigo mudar os nomes. Tipo, mudo os nomes dos menus e submenus, mas quando clico não consigo postar. Só aparece página não encontrada.
Ex: Sub Link #1.2
Em endereço coloco o Título que quero. Em sub link, coloco o nome do texto? Depois de # o q devo fazer?
Colocar os links não consigo.
Daria pra “mastigar” mais um pouquinho essa parte da explicação?
Obrigado.
Pop, me desculpe, mas..mais mastigado que isso, impossível.
Em endereço vc vai colocar a url do seu link.
o meu blog nao acha a tag nao sei pq eu uso template do blogger mesmo nao e templat da net nao pq nao acha ajude pf quero muito colocar e sub menus no meu blog ok de uma olhada no meu blog:
Samuel, eu inclui no post algumas dicas para auxiliar a localização do trecho referente ao cabeçalho, para os modelos de template designer de modelo e mínima. Verifique se consegue localizar. Se mesmo assim não conseguir, lamento,mas não terei como te ajudar.
por favor nao consigo fazer no meu blog o que eu faço
Gustavo,
Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.
Oi de novo Nessa !, você já mudou a plataforma do seu blog !, mais para a pior plataforma, o WordPress, eu não gosto do WordPress, eu já tenteio usar ele é praticamente todo pago, mais isso não quer dizer que eu não posso mais lhe seguir, não é
Tudo de bom seu blog, beijo!
Valeu 1° vez que eu consigo fazer..
nos dois blogs q eu postei foi.. valeu..
@POIBrasil
Obrigado pela ajuda Nessa !
Angelo:
Sublink está na área "li ul" no código CSS…vc vai ter que acrescentar cor de background e vai testando/verificando para ver.
Oi nessa !, não preciso mais de ajuda nesse caso, já resolvi sozinho, mas agora a minha duvida é como deixar o fundo do sub-link branco quando o mouse estiver por cima, eu coloco cor de fundo mais não fuciona
não funciona,diz que há erro na linha e etc.
@Juliane:
No código CSS eu destaquei os trechos referentes a cor dos link..é só vc substituir.
como deixar as letras pretas porque nao aparece porque o meu fundo é branco
Germano:
Tenta verificar as configurações do #header para ver se não é isso. Se não for, então não sei como ajudar.
Gostei demais.. o meu ficou otimo q como eu queria. Já havia dias que tentava colocar em meu blogger e nao conseguia. valeu!
Olá.
Instalei o menu e ficou ótimo, mas não consigo fazê-lo ficar centralizado. Ele está sempre colado à esquerda da tela.
Veja em http://www.germanocwb.blogspot.com.
Já tentei trocar todos os 'left' que encontrei por 'center', e já alterei várias 'margin' para valores diferentes de zero, mas não acontece nada.
Você pode me dar alguma dica?
Parabéns pelo seu trabalho.
Obrigado
GermanoCWB
Olá , eu gostaria que explicasse como colocar mais um nível no menu. Tentei, mas não consegui. Desde já agraço, abraços.
Olá Clau sigo sempre suas dicas para blogger, consegui colocar o menu tudo certo, mas ao criar as postagens referente aos menus fica todos na mesma da pagina inicial. copiei a url da postagens e colei no link do menu de cada postagem, mas ao clicar no respectivo menu ele direciona na pagina inicial. Como resolvo isso….
No meu deu tudo certo, só que fica do lado esquerdo e não centralizado! Como faço para que fique no centro?
Oi gostaria de saber como eu faço para os menus irem para baixo do logo.. Pois eles estão no topo da pagina. Obrigada
Funcionou no meu, valeu!!!!
Eu conseguir colocar, porém os submenus não aparecem me ajuda!!!!!!!!!
Eu consegui colocar o dropdown no meu blog, mais eu queria deixar ele no centro da página, porque ele fica no lado esquerdo, e isso atrapalha. Quais códigos eu tenho que mudar ?
Curti demais esta post. Apliquei no meu blog e ficou fantástico, na minha opinião. Já recomendei aos amigos e vou colocar nos outros blogs que eu publico.
No entanto, tenho uma dúvida: como faço para deixar a fonte em "Trebuchet" no tamanho px14? Acho que combina mais com meu blog
Se não for pedir demais, dê uma olhadinha em como ficou http://www.umaredacao.com
Desde já, Obrigado.
Abraços
@Raphaela
Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.
Perfeito, coloquei no meu blog e tem multiplas possibilidades, obrigado
Nessa,
você poderia me tirar uma dúvida?
Eu já tentei colocar esse menu no meu blog, mas fica sempre acima do menu que já tem no meu blog. Você sabe qual seria o erro? Ou se é por causa do meu layout?
Brigada!
@EqualizeLeitura
Priscilla
Alguns recursos podem variar de template para template, e não há como eu saber como é o seu, sendo assim, lamento, mas não terei como te ajudar.
René
Se tiver como não sei te dizer, vc vai ter que testar e ver se consegue aplicar isso que vc quer.
Clau, porfavor, me ajude numa edição do meu menu porfavor.
Quando passo o mouse em cima de uma categoria [1], e desce o menu [2] expansivo, eu queria colocar mais uma expansão, que ao passar o mouse na expansão [2], abrisse outra, ao lado. Tem como? Brigadão =D
Clau,
No caso já está editado o background, quando eu passo o mouse no menu ele muda de cor (ficando azul), porem quando eu desço o mouse para o sub menu, a cor do menu volta a ser branco e somente o sub menu fica azul… Não tem como o menu continuar azul quando estiver passando o mouse no submenu?
Em todo caso obrigada pela atenção..
o Clérigo
Obrigada pela dica 😉
Priscilla
Vc vai ter que editar background em "#nav li a:hover, #nav li a:active ".
Deu super certo no meu blog… Muito Obrigada!!
Só uma dúvida, como eu faço para que quando eu estiver passando o mouse nos submenus o menu permaneça com a cor de quando eu passo o mouse nele??
Por favorrr se puder me responda =)
Ótima dica! Alguns comentários anteriores falaram a respeito dos submenus ficando abaixo de vídeos e posts. No meu template eu consegui corrigir isso fazendo a seguinte mudança no código CSS:
Mude essa parte
z-index: 9999;
position: absolute;
Para
z-index: 9999;
position: fixed;
Olá! Passando para deixar um feedback super positivo no tutorial! Deu tudo certo no meu blog – ainda está em fase de construção, mas com tudo instalado – e está ficando muito legal.
Obrigada!
Caracaaa, sofri muito com esse código, pra mudar as cores e tal… Mas ficou lindo! Amei <3 Obrigada!
Não deu no meu. Não existia o primeiro código descrito no passo 2. Queria muito colocar mais 3 guias ao meu site.
Eu uso o blospot. E o este meu blog foi recentemente criado.
Se houver algum outro meio, gostaria de ficar sabendo. O meu blog está ficando muito bom.
Abraços.
oi só para complementar o que eu sempre vejo nos seus post.
Qualquer codico HTML pode ser adicionado pelo gatget, e fica mais facil para você trocar o link e posicionar porque quando voc~e for mudar vai aparecer no loyoud e vc não vai ter que ficar indo em edtar HTML toda hora.
Isso serve para qualquer um slide, qulquer coisa, basta vc adcionar o css.
Não sou proficional se não eu não estaria lendo seu topico e porque e o obvio ne pra isso que existe o gatget "HTML/javascript".
Gostei dos post desse blog
sucesso ai com seu blog..
Ney
Experimenta estipular um valor em "margin" no 1º código CSS.
Daniele
Nome
Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.
Olá, adorei seu blog, só que tentei fazer o menu drop down e não deu certo, na segunda parte eu achei apenas a segunda linha do código a primeira não tem no meu html:
inseri abaixo dele o código que você indica, só que o menu fica na vertical e os sub menus ficam visíveis sempre. Você pode me ajudar??? Obrigada…bjs
Boa noite, o seu menu depois de instalado fica na posição imediatamente abaixo do cabeçalho….
Tem como alterar a posição? colocá-lo em uma altura determinada a partir do cabeçalho ou do topo?
Aguado
Olá,
Primeiramente obrigada por este tutorial, tenho procurado um assim a muito tempo e não obtive sucesso até então. Valeu mesmo! 🙂
Consegui instalar, mudar cores, etc. Tudo bacana, porém tenho uma dúvida.
Como diminuir o espaço do menu e cabeçalho? E do menu e da postagem (restando do blog)?
Se puder responder ótimo, se não beleza, já consegui instalar e está funcionando perfeitamente.
Abraço!
Obrigado pelo codigo, porém não consigo centralizar ele….. infelizmente, mas obrigado.
Esse script funciona quando o site tem domínio próprio? Obrigada!
Clau, socorro.
Há meses eu tento instalar este menu drop-down num primeiro blog, porém nunca dava certo. Aí eu tentei colocar num segundo blog de testes e funcionou.
Então, resolvi instalar o template que deu certo no blog onde não funcionava, formatando-o da mesma maneira, por preferir o template que já está em funcionamento no primeiro. Refiz todas as personalizações no segundo; tudo ia dando certo… mas quando eu fui em 'Editar HTML' para personalizar as fontes de título dos posts e dos gadgets, ele desabilitou todo o CSS do menu e eu não consegui mais fazê-lo voltar ao normal.
O que eu queria saber é por que eu não consigo deixar o blog do jeito que eu quero, porque se eu mudo a fonte dos títulos o menu não funciona; e se o menu está funcionando é porque eu não mudei as fontes.
Pode me ajudar? :3
OI, eu fiz, mas não apareceu nada no blog, o que será que deu errado?
Oi Clau!
Estou com um pequeno problema.
Quando tentei colocar o menu num blog de testes, que eu sempre uso para ver se os códigos, scripts e afins dão certo, ele funcionou; mas quando fui colocar no definitivo, o menu aparece mas as subopções não.
O que pode ter acontecido? :~
Nossa que negocio mais complicado, nao consegui fazer.
Olá Carla Blackhawk.
Estou no início da montagem de um blog, porém com as dicas dadas nesta sessão consegui facilmente criar um menu horizontal com submenus e subsubmenus, entendendo a maioria da linguagem utilizada no seu CSS. Valeu pelas dicas e gostaria de saber se você tem para indicar algum material de CSS para nível médio a avançado?
Abraço.
valeu vc mi ajudou muito eu estava procurando este tutorial a muito tempo. os seus tutoriais me ajudaram a contruir um blog que estar fazendo muito sucesso. obrigado1
Então clau, eu não encontrei o código HTML da 2ª parte.
Fiz também o que vc solicitou à Néka,(colar abaixo de do tag div ) e mesmo asssim não funciona!
O que eu faço?
Há tanto tempo eu procuro este menu, e seria plenamente grata se ele funcionasse.Obrigada.
Carla Blackhawk
Ou vc fez algo de errado, ou provavelmente deve ser algum problema relacionado ao seu template. Lamento, mas não tenho como saber o que ocorreu e não tenho como te ajudar.
Ola. Fiz tudo conforme o tuto, mas foi parar la no pé do blog e não no cabeçalho… em como mudar isso? Obrigada.
Karine Ribeiro e
Eu visualizei o menu no blog de testes com o IE8 e ele funcionou normalmente. Já verificou se pode ser a versão do IE q vc está usando? Quer uma dica? Larga o IE menina, usa o Chrome, ou firefox, são mais leves e bem melhores.
Preciso de Ajuda!
Esse menu não está funcionando no internet explorer…
Estou precisando muito disso p/o meu trabalho.
Parabéns pelo post demorei mas encontrei um bem bacana no seu blog..
Bogos
O IEca é sempre um problema! Lamento,mas não tenho como te ajudar,pq não faço ideia do que possa ter ocorrido no seu template.
olha eu aqui denovo sobre o comentario anterior eu resolvi ja mto obrigado. porem tenho uma duvida que outros ja tiveram .
meu blog ta perfeito do jeito que eu queria entretanto no Internet explorer o sub menu aparece traz do widgets da pagina.
Vc saberia tipo se isso tem haver com o template ou se tem a ver com oura coisa, que pelo menos eu possa correr atraz da irmação.
Mto obrigado Vc esta de parabens
Teh mais.
Bogos
Tente alterar os valores em "width".
olaa fikou perfito aki vc ta de parabens .
tenho uma duvida eu coloquei mais uns links ai diminuiu a tamanho delas ki parte do codigo eu almento ela.
Obrigado
Maah
Não sei te dizer,pq não há como eu saber sobre o seu template. Lamento mas não tenho como te ajudar.
o Clau …boa tarde
desculpa eu te pergunta…mais os trechos na segunda parte
eu não to conseguindo encontrar no meu blog…meu template e diferente ? ou não tem nada haver ??
Obrigado
Robson
como você pode observar, isso não aconteceu no blog que utilizei para testar e demonstrar o menu Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.
muito bom estou usando no meu blog
http://www.ebookseconcursos.blogspot.com
Olá,
Estou usando vários de seus ensinamentos no blog que estou desenvolvendo. Aos poucos estou chegando ao meu objetivo.
Com relação a este menu, consegui colocar, personalizei um monte de coisas, mas tem um problema que por mais que eu quebre a cabeça, não consegui resolver. Quando o mouse passa pelo Submenu, ele começa sobre o menu e não abaixo dele. Você tem alguma sugestão para me ajudar?
Abraço,
http://filabrasileirooriginal.blogspot.com/
tem como tirar os menus antogos q tem sempre da pagina ?
Zaraki
Eu estou criando um template exclusivo que vai ter exatamente esse menu que vc citou…então aguarde, que assim que eu tiver uma folguinha vou publicar o tutorial dele. Não sei se dará para publicar ainda este mês..pq semana que vem entrarei de férias e consequentemente, o blog tb..
Oi Tudo bem ,queria saber se da para colocar os submenus ao inves de espandirem para baixo eles deslocarem para a direita estilo desse site , http://www.passarela.com.br .
Parabens pelo seu blog e muito lindo , continue sempre assim bj
Bauru
Deve ser algum problema de configuração no local que vc instalou o menu dropdown. Olha pra ser bem sincera com vc, para os usuários que pretendem personalizar mais os templates é muito melhor usar um dos templates minima e ir personalizando ele da maneira que quer, pq esses novos designer de modelo, dificulta bastante uma personalização q não seja as pre-formatadas q o próprio modelo oferece. Sem falar no fato de q para cada modelo os códigos se diferem um do outro. Por exemplo: o código dos modelos simple são diferentes dos outros modelos, mesmo sendo designer de modelo.Sendo assim, pra nós metabloguers fica um pouco difícil de explicar recursos para estes modelos,pq não tem como a gente saber qual é o modelo q o leitor está usando, e não tem como ficar publicando um monte de códigos para cada tipo de modelo.
Eu aconselho q vc inverta, deixe o gadget de páginas abaixo do cabeçalho e coloque o menu dropdown no topo.
Clau, tentei instalar esse seu menu junto com as páginas do próprio Blogger. Desloquei para cima do header as páginas e o seu colocaria abaixo do cabeçalho. No entanto, apesar de aparecer no lugar certo, em vez do meu aparecer recolhido, ele aparece em forma de lista, um link abaixo do outro? Será que não cabe um post ensinando a instal dois menis horizontais nos novos modelos do Blogger? Abraço.
Frederico
Eu lamento, mas os códigos devem ser inseridos por partes, exatamente como está no tutorial. Se vc está com dificuldades, eu recomendo que vc use um outro tipo de menu, pois para a instalação deste menu requer um conhecimento mais avançado, ou no minimo intermediário, em html e css.
Bom dia Clau, poderia postar o código todo já num arquivo só? Estou com dificuldade para juntar tudo. Mais uma dúvida, como faço para aparecer o fundo do menu com transparência, ou seja, qdo passo o mouse em cima de um menu, conseguir ver o fundo?
E parabéns pelo site.
frederico.brigatte@itelefonica.com.br
Olá Clau!
Mais um de seus menus que uso,muito bom já fiz algumas alterações no menu.
Mais uma vez obrigado!
Oi Clau,
no meu blog só apareceram os links.
* Detalhe: um link em cima do outro
O que pode ser?!
Olá, Clau quero que você me ajude, estou com um problema em relação ao menu horizontal drop down, você poderia me ajudar a solucionar isso. Acesse meu blog de testes e veja: http://testesecretodeblog.blogspot.com/
Obrigado, contato: varinet@hotmail.com
Parabéns pelo site bem organizado
Bruno Arita
Tenta incluir valores em margin e padding no trecho dos códigos da 1º parte do tutorial e vai visualizando pra ver como fica. Outra opção tb é tentar substituir "float:left", por "center".
Mas tem um detalhe: pode ser que tenha relação com seu header, ou com o outer-wrapper, pq esse menu é pra ser instalado logo abaixo do header e dependendo dos valores q estiverem estipulado para alinhamentos no header, influencia muito na hora de instalar alguma coisa.
Não tenho como te ajudar individualmente e especificamente, salvo com essa sugestões q dei pra ver se dá certo ai.
Oii Clau, seu blog é sensacional. Eu gostaria de saber como centralizar o menu. Se voce usa notebook é mais visível o que eu quero dizer. O menu do meu blog fica alinhado na esquerda. Gostaria que ele ficasse centralizado. Tem como fazer isso?
Grande beijo e parabéns novamente.
Bruno Arita
http://www.brunoarita.blogspot.com
fabio
Se vc usa o designer de modelo, aconselho que vc dê uma lida no tutorial:
"Instalar Menu Horizontal no Designer de Modelo".
no meu blog nao tem este codigo q vc falo
vc pode me uma ajuda desde ja meu agradecimentos
fvc.vilson@gmail.com
De qualquer forma, muito obrigada, Clau!
bjs
andraD
Teste colocar o endereço da sua imagem em "background", no campo
#nav li li a, #nav li li a:link, #nav li li a:visited
M!riam
Se vc já substituiu "left" por "center" e nem assim deu certo, então não faço ideia do q deve ter ocorrido.
Oi, Clau!
Apesar da minha experiência quase nula em html e css, consegui alterar as cores e bordas do menu.
Agora quero fazer com que os títulos do menu fiquem a partir do centro em vez começarem da esquerda para direita.
Já troquei os left por center, em li e ul, fica centralizado mas dai fica aparecendo só o primeiro link, que é 'Home', os outros somem.
Tem como fazer que fiquem todos no menu a partir do centro?
Se puderes me ajudar!
Um beijoo!
Como eu troco os links do sub-menu por imagens
Valeu, Clau!
Menu instalado!
beijooo
Lia
No código da 1º parte, no trecho
#NavbarMenu {
Onde está "width: 100%;" troque o 100% pelo valor referente a largura q vc quer q seu menu tenha.
Por exemplo:
Largura máxima de 900px, coloque: width:900px;
é em width que vc deve estabelecer a largura do menu.
Oi! eu consegui instalar, mas acontece que o menu fica esticado de ponta a ponta da pagina, tirei um print:http://i52.tinypic.com/j97fw5.jpg
Alguém poderia me ajudar por favor?
?lëx S.M.
Para mudar as cores é no código CSS do 1º passo. Vc vai ter q ir alterando, testando e visualizando até ver se está mudando conforme vc quer.
hihialex.blogspot.com
(Não repare no site bobo plz)
O Menu deu certinho aqui* eu usava barra vertical ai colocei essa horizontal mais n sei onde de exato muda as cores quando tiver cabeça eu tento denovo…
(VLW mto cool o menu >_> so falta eu saber fazer o site opkdkopads)
galera, estou com este problema, poderiam me ajudar?
http://lh6.ggpht.com/_qjWvDsluR7M/THqOzYFaaSI/AAAAAAAAAuc/lF0BuiBMTF8/s640/image.jpg
a cor do menu deveria ser a daquele degrade azule preto que aparece em cima do blog e não preto como ele está na imagem.
me ajuda aew o menu fica pequeno e ele dece fica um linque em bai do outro depois que eu coloko certq quantidade de links
Olá Clau, faz um tempinho que te acompanho e já aplico algumas dicas maravilhosas tuas (outras não compreendo muito bem), mas apenas hj venho fazer meu primeiro comentário :))
Na verdade, eu fiz este menu em meu blog de testes e deu tudo certo, ficou perfeito com 'uma exceção':
– eu queria muito mudar a cor do menu, pois acho que essa não combina muito com o meu blog (perfil este, do qual te escrevo).
Meu blog foi todo personalizado por mim, e consegui mudar todas as cores que desejava, menos a deste menu, que eu queria tanto, pois em meu blog, já estou com duas 'barras' de menu, e acho q nao fica legal e ocupa muito espaço.
Poxa, falta só isso mesmo para ficar do jeito que queria.
Será que vc poderia me dar uma luz, para que eu pudesse alterar a cor, para uma que combinasse com meu blog?
Desde já, muito grata e parabéns pelo teu espaço lindo!
Paz e sucesso a ti 🙂
Beijinhos
OK Muito obrigado!!! Seu blog é 10 e estou fazendo muitas alterações através de suas dicas. Divulguei seu blog no meu forum e vou promover no twitter ok.
Valeu pela força!!!!
@godofdarkness.forumeiros.com:
Deve ser algo relacionado ao seu template. Pois eu testei no IE8 aqui e o menu está normal. Não há como eu saber especificamente o aconteceu no seu.
Por favor, se puder me ajudar, no internet explorer 8.0 o menu se esconde através das postagens.. No firefox e chrome estão normais, vove sabe me dizer o que pode ser ?
Obrigado
http://godofdarknessforum.blogspot.com
Parabéns pelo Blog!!!
Consegui fazer meu menu DropDown!!! Apanhei um pouco mas deu certo, agora só aprender a configurar….
Obrigado
http://godofdarknessforum.blogspot.com
Obrigado por este magnifico código
Tudo bem consegui instalar perfeitamente o menu so que no internet explorer os sub menu aparecem como que por baixo da postagem parecido com a questaõ do video que alguem te perguntou (no firefox ficou perfeito) se puder olhar guiabel.blogspot.com não repara que esta em construção vou continuar tentando resolver aqui mas se puder me dar uma luz agradeço.
Aew troquei o templete e voltei e consigui istalar o menu perfeitamente olha aew
http://turboperfeito.blogspot.com/
@Admin:
É só alterar no CSS. Edita o código referentes as cores e bordas no código da 1º parte.
muito chique, só deixa eu fazer uma pergunta, tem como eu tirar a lista branca que separa os principais menus?
VLW !
@Néka:
Procure apenas pela 1ª linha e cole o código do menu logo abaixo de </div>
Oi ! Não consigo encontrar o trecho que voce cita na segunda parte da instalação! Heeelp! D: AUHUEEHU brigada!
de todos os q eu ja testei esse foi o único q deu certo
@Dudu.win7:
Não tem como dar uma solução, pois para cada caso é um caso.
Por que quando passo o mouse no sub menu ele desaparece?
Isto acontece somente nos dois primeiros…que ficam justamente acima da sidebar….
Poderia me indicar uma solução?
Parabéns..seu site é muito bom..
O único que encontro dicas que realmente funcionam e sem complicação!
Sucesso!
poderai me mandar esse codigo por email fabyomelo@gmail.com
@Bruno:
Na caixa onde ficam os códigos, na parte superior do lado direito, tem um ícone. Neste ícone, se vc clicar no desenho que tem este símbolo: < > (que fica ao lado do desenho da impressora)abrirá uma janela para cópias dos códigos.
como eu copio e colo os codigos que vc põe?
@Allex:
Fico feliz que tenha dado certo…eu quem agradeço pela simpatia…obrigada e volte sempre!
muito obrigado vc é d+ a dica pra acrescentar um valor no margen-top funcionou bem obrigado + uma vez ser vc quizer se torna parti do meu circulo de amizades no msn e assim poderemos trocar experiencias. meu msn djallexmixhd@hotmail.com um forte abrço e ate +
@Marcos Danilo:
Para um bom funcionamento depende muito do modelo do template tb.
não consigui istalar o menu aparece apenas os nomes dos botoes espado pelo blog
http://blogsacra.blogspot.com/
Com o meu teve um probleminha a barra Navbar esta ficando no topo da pagina inves de estar por de baixo do menu fora isso esta funfando tudo bem mais como eu poderia arrumar isso??? Por favor deem uma olhada no meu blog
http://vampiric-lives.blogspot.com/
Parabéns para vcs era o que eu procurava consegui perfeitamente colocar o menu com submenu se quiserem conferir o resultado ai esta a url do meu blog http://www.semlimitedownload.com.br/
Como eu coloco um sub link em um menu ja pronto?
@dj allex mix da t.f:
Em #main-wraper, tenta estabelecer um valor em margin-top para que o campo de postagens desça.
oi td bem gotei muito dessa dica eu coloquei o menu em meu blog mais to com um proplema é que o sub menu fica por baixo do video eu queria saber si vc poderia solucionar esse proplema. meu blog é esse http://djallexmixdatf.blogspot.com