Como você notará esse é um código grande, mas basicamente ele se divide em duas partes: estilos CSS (aparência do menu) e os links que você quer colocar no menu e sub menu do blog. Então vamos falar sobre esses assuntos separadamente.
Criar e Colocar um Menu com Sub-Menu no Blog
O jeito que colocar esse código que vamos mostrar é muito simples apenas entre na pagina layout > adicionar gadget > html/javascript e cole o código completo.
<style type="text/css">
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#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;
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 {
color: #FFF; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #9F0;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
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;
background-color: #555;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #FC6;
}
#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;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereço do blog'>Home</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>
Embora seja simples de colocar existem muitas coisas que você precisa personalizar no submenu antes de colocar no seu blog então veja os detalhes abaixo.
Alterar Aparência do Menu do Blog
Será necessário entender um pouco de CSS para editá-lo, mas depois que começar verá que é mais fácil do que parece. Os estilos CSS servem para formatar texto e no caso de criar um menu podemos fazer os botões usando CSS.
Basicamente você deve procurar por background para alterar a cor de fundo do botão do menu e color para mudar a cor do texto do botão. Veja onde estão as configurações mais importantes do sub menu. Veja nos links abaixo algumas dicas úteis sobre como alterar essas cores:
Gerador de Código HTML das Cores
O que é CSS? Para que Serve e Como usar o CSS
Logo no começo do código temos o estilo da barra de menu completa.
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
Então como falamos altere background: #555; (cor de fundo) e color: #FFF; (cor das letras). Claro que você pode mudar outras coisas como o tipo e tamanho das letras. Além disso, quando mais você souber sobre CSS poderá fazer outros testes para personalizar seu menu. Leia mais dicas sobre:
Código das Cores
Colocar ou alterar as bordas
Cores dos Botões do Sub-Menu
Em varias partes do código você poderá notar a indicação edite a cor do link, portanto só precisa alterar as cores naqueles locais. Veja abaixo uma relação com o nome de alguns dos estilos e o que eles controlam:
#nav li a:hover, #nav li a:active - cor do menu quando abre o sub menu.
#nav li a, #nav li a:link, #nav li a:visited - Cores dos botões do sub menu
#nav li a:hover, #nav li a:active - Cores dos botões do submenu quando o mouse está sobre eles.
Colocar ou Alterar os links do Sub-Menu
Vamos usar como exemplo apenas um trecho do código do submenu para explicar como você deve modificá-lo no seu blog.
<li><a href='#'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
Na primeira linha você deve somente alterar o texto LINK1. Esse é o texto que aparece no menu. Usando como exemplo um blog sobre programação da televisão então escreveríamos filmes no lugar de LINK1.
As outras linhas do código:
<li><a href='url da pagina'>LINK</a></li>
É uma repetição para cada tipo de filme (continuando nosso exemplo), então o código ficaria assim:
<li><a href='url da pagina'>Comédia</a></li>
<li><a href='url da pagina'>Suspense</a></li>
E quantas outras opções você desejar. Lembrando que onde está url da pagina você deve colocar o link para uma pagina do seu blog que fala sobre aquele assunto.
As outras partes deste submenu são apenas repetições deste trecho e você poderá editá-las sempre problemas.
Veja outras dicas úteis para seu blog:
Como Fazer um Menu Vertical Fixo no Blogger
Criar Banner para Blogs: Programas e Sites para Editar Imagens
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript
Para terminar apenas mais uma dica para colocar o menu com submenu no seu blog. Justamente por ser um código com muitas possibilidades de alterações nós recomendamos que coloque o código no seu blog e faça as alterações aos poucos, sempre salvando uma copia do código que funcionou do jeito que você quer, assim se errar algo não perderá muito tempo e trabalho.
Olá Fabiano este seu blog sempre tem sido a minha salvação no meu blog!!
ResponderExcluirOlha vê se me podes ajudar mais uma vez: queria por na barra lateral do blog uma aplicação que já tenho visto tipo mural onde pomos imagens e ela rola tipo escada....
sabes o que é?
podes me ajudar? já tentei com alguns exemplos que vi na net mas não consigo...
obrigada
veja neste link se é isso que está procurando:
ResponderExcluirBanners deslizando
Você pode me ajudar com meu blog?!
ResponderExcluirLucas qual o problema no seu blog?
ResponderExcluirNão tô conseguindo editar o html?!
ResponderExcluirmas não consegue entrar na pagina editar html? dá erro na hora de salvar a alteração?... tente explicar melhor.
ResponderExcluirexclua seus histórico de internet pode ser erro no carregamento da pagina.
Eu instalei um novo template, ai eu quero editar o html dele. Exemplo no blog tem o nome "Editar#" ai eu quero trocar esse "Editar#" pelo nome "Filmes Adultos" mais quando pressiono CTRL+F e digito o "Editar#", não aparecer nenhum resultado.
ResponderExcluirtalvez esse editar esteja dentro de um gadget e não no html do blog. Clique para editar os gadgets de html/javascript que tiver na sua pagina ou o gadget de menu
ResponderExcluirOk. Você pode me ajudar novamente? É por que minhas postagens populares não está mostrando as imagens!
ResponderExcluirLucas nas postagens populares quando dá erro o motivo pode ser o feed do blog configurado errado ou se você usar imagens hospedadas fora do blogger em suas postagens.
ResponderExcluiroutra coisa é que as miniaturas são somente de imagens se a postagem tiver um vídeo então não aparece a miniatura no gadget postagens populares
Ola.
ResponderExcluirgostaria de saber como consigo retirar a linha que divide os nomes no menu, da barra principal.
Obrigada.
procure por border-right: 1px solid #fff; e apague
ResponderExcluirveja aqui outras dicas sobre editar botões em CSS: Fazer botão
Boa tarde.
ResponderExcluirEstou tentando colocar o Gadget, tudo ocorre bem ate o procedimento de colagem do código disponibilizado, porém quando vou salvar nada acontece, e quando dou um ENTER, aparece esta mensagem:
"Invalid widget: HTML1
Error 400"
Fico grato caso me ajude!!
Abraços
Marcio você deve ter apagado algo por engano no seu html ou seu template tem algum erro, mas não tem nada a ver com esse código.
ResponderExcluirnormalemente o pior que pode acontecer com um gadget de html/javascript que falamos para usar e o código não funcionar e não aparecer nada no lugar do gadget.
tente excluir seu histórico de internet pode ser um erro no carregamento da pagina na hora de editar o gadget.
Estou usando um template que não é do blogger, encontrei em outro site que tinha modelos de template, e peguei para o meu blog. Será quem isso pode estar impedindo de colocar gadget?
ResponderExcluirprovavelmente esse template tem algum erro que impede que adicione novos gadgets... acho melhor trocar por outro ou pode fazer testes no html até achar o erro (mas pode dar muito trabalho achar o problema)
ResponderExcluirOla Fabiano ..o pouco que já fiz sou muito grato ...a vc ... podes me ajudar como faço para colocar essa opção que tem no seu , (gostou compartilhe ) agradeço.
ResponderExcluirJosé
ResponderExcluirneste link tem o código completo:
Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais
mas se você quiser pode personalizar os botões do addthis que desejar. (funciona também com outros tipos de botões)
Para uma iniciante como eu é dificil
ResponderExcluireu consegui !
ResponderExcluirmuito Obrigada pela você ajudou bastante ;)))
bjs.
Eu consegui !
ResponderExcluirMuito obrigada pela você ajudou bastante. bjs ;'))
Eu não estou conseguindo, quando eu coloco o mouse em cima não aparece o submenu embaixo
ResponderExcluirEu não estou conseguindo, quando eu coloco o mouse em cima não aparece o submenu embaixo
ResponderExcluiresse código é cheio de detalhes...
Excluirveja se não apagou algum sinal por engano: / " > < ' ....
Tive o mesmo problema, mas encontrei a solução, o problema era com o no Modelo que usei do próprio blogger.
ExcluirComo ajeitei? Fui no código do HTML e aonde tem o /* Tabs em algumas linhas dps tinha "overflow: hidden;" ai eu só fiz colocar "overflow: visible;"
Abraço.
Aconteceu exatamente o mesmo comigo, e fiz o mesmo procedimento que o amigo Buffadão Games, funcionou normalmente.
ExcluirOlá Fabiano! Tudo bem?
ResponderExcluirQuero lhe dizer que este tutorial foi o melhor que já vi até hoje. Fiz algumas alterações no código para colocar apenas dois botões do menu, personalizei e ficou ótimo, só não sei se vou ter problemas por ter mudado algumas partes do código . Gostaria muito que você visse o resultado.
Um grande abraço,
Zélia Dantas
não há problemas em alterar o código. Se ele funcionar é porque você não fez nada de errado.
Excluirapenas tenha cuidado com detalhes como sinais de < >' / e outros para não apagar por engano.
Boa tarde, como adicionar postagens no menu e submenus criados no blog ? não acho a explicação em nenhum lugar. nem no próprio blogger.
ResponderExcluirobrigada
você adiciona as postagens nos links do menu onde aparece
Excluir< a href='url da pagina' >LINK< /a >
mas tem que fazer manualmente cada link
Olá Fabiano, também gostaria de adicionar post no menu, mas só consegui escrever um post. Como faço pra escrever outros post no mesmo menu, exemplo LOOKS?
ExcluirOlá Fabiano, tudo bem?
ResponderExcluirNão sei o que aconteceu, Qyuando foi reinstalar o código para aumentar as guias, não consigo mais retirar aquela cor verde (hover) e preta do sub-menu. Mesmo alterando pela cor do blog, ela permanece. Já refiz várias, vezes, limpei cache, atualizei e nada. O que será?
o problema é que está misturando dois códigos de menus.
Excluiro lugar onde adicionou o gadget pega a configuração do menu padrão do blogger por isso está gerando erros por causa do css
.tabs-inner .widget li a
e outros similares a esses.
a questão é que se pagar perderá a formatação padrão do menu do blogger. Minha sugestão é usar somente uma barra de menu
Olá Fabiano vc poderia me ajuda, eu fiz tudo certinho, como diz no tutorial, fiz as configurações mais não aparece os sub menus completo, só aparece 1 os outros são cortados, sabe me dizer o que deu errado, até mesmo o do seu modelo quando colo no meu blog aparece cortado, tipo ele tá lá mais não aparece... =(
ResponderExcluirinfelizmente esse código é cheio de detalhes, por exemplo na hora de editar os links se faltar ou sobrar algum sinal de " / < > ' ou qualquer outro gera erro.
Excluiroutro detalhe importante é não misturar " com ' tem pode usar qualquer um dos dois mas tem que ser todos do mesmo.
Então o código está certinho , eu descobri que se eu colocar ele antes dá pagina de postagem ele fica assim mais se eu colocar ele depois da pagina ele fica certo, você conhece algum jeito de arrumar esse erro?
ExcluirOlha meu blog, com ele no inicio e depois da página de postagem...
http://narllaoliveirafotografia.blogspot.com.br/
o menu no inicio provavelmente gerou conflito com o código padrão do menu do blogger
Excluiro trecho tabs-inner aparece diversas vezes no seu html (CSS) mas não sei dizer se apagar isso resolverá o problema pois o template é personalizado e só fazendo testes até achar o erro.
minha sugestão é se for editar isso salve uma cópia do html do blog para editar para evitar estragar o template.
também seria possível colocar a mesma configuração de CSS nos trechos tabs-inner, mas como falei anteriormente só é possível saber o resultado fazendo testes.
ExcluirMais para eu fazer esses testes eu vou editar o HTML do blog inteiro ou só o que eu fiz do menu?
ExcluirBom eu fiz o teste do tabs-inner apaguei todos do html e não funcionou vc poderia me dizer como eu faço pra colocar a mesma configuração de CSS nos trechos tabs-inner ? Desculpe o incomodo, se puder me ajudar serei muito grata, o seu blog foi o único que me ajudou a criar o menu com sub menu
ResponderExcluircolocar a mesma configuração é procurar pelo estilo tabs-inner a e colocar nele o mesmo que está em #nav li a.
Excluirmas já que é um template personalizado acho que a melhor opção seria usar um menu comum no inicio do blog sem o submenu para evitar erros porque as vezes você ajusta para um navegador e quando vai testar em outro ficou bem diferente
Fabiano, eu entendi como fazer o menu e o submenu. Mas como alimentá-lo? se escrevo uma postagem, como inserir ela para ir para um menu ou submenu? obrigada, Patricia
ResponderExcluiresse menu tem que editar manualmente.
Excluirno código você encontrará diversas vezes o texto: url da pagina e LINK, então deve substitui-los pelos endereços das paginas o nome dos links (texto que aparece no menu)
estou tendo dificuldade de incluir as paginas no submenu, aparece a pagina igual quando estamos configurando, como faço para indicar a url da pagina, ou qual url deve ser incluida
ResponderExcluira url que deve adicionar é o endereço de uma pagina do seu blog
ResponderExcluirOlá fabiano eu coloquei o código no meu blog agora eu gostaria de saber como que eu faço para encurtar a tabela ou para acrescentar mais linhas para que não fique feioso assim.De uma olhadinha básica http://loucurasalucinantes.blogspot.com.br/
ResponderExcluirprecisa alterar o código onde aparece a palavra LINK e url da pagina, seguindo o modelo que falamos no post
ExcluirOlá Fabiano. Pode me informar como adiciono um menu do sub-menu? Obrigada!
ResponderExcluirveja na parte do tutorial que fala sobre: Colocar ou Alterar os links do Sub-Menu
Excluirvocê pode fazer aquilo em qualquer item do submenu
Acho que não me expressei bem, o que quero é que tenha um menu, sub-menu e dentro deste sub-menu ter mais opções, por exemplo: produtos (que seria o menu), roupas (que seria sub-menu) e dentro do sub-menu roupas quero adicionar menus com blusas, saias, etc. Assim, quando se clicar em roupas aparecerão outros menus com os itens. Deu pra entender? Seria um "sub-sub-menu". O template que estou testando é o Galauness, ele já tem menu com sub-menus e eu já aprendi a editá-los, quero saber como criar "sub-sub-menus". Acho que agora expressei melhor o que quero saber. Obrigada!
Excluiré possível adaptar esse código mas são muitas mudanças... então veja nos links abaixo outros menus de 3 níveis como você citou:
Excluirhttp://www.davidchc.com.br/tutoriais/css-tutoriais/sub-menu-com-3-niveis-com-css/
http://codepen.io/philhoyt/pen/ujHzd
Ok, vou testar. Obrigada!
Excluirolá eu até que consegui, to ajeitando o menu... mas gostaria que o texto ficasse alinhado no centro do menu ...
ResponderExcluirvc pode me ajudar.....???
obrigadaaaa
tente adicionar o código text-align:center;
ResponderExcluirno trecho:
#nav li a, #nav li a:link, #nav li a:visited {
comigo nao funcionou, existe outro modo? obrigada
ExcluirBom dia, Fabiano! Eu testei esse tutorial e acontece assim... ao visualizar o blog, o menu fica ''invisivel aos olhos'' e aparece somente a parte na qual eu passar o mouse por cima''... mas eu fiquei muito feliz que acertei de primeira com a estrutura do menu.
ResponderExcluirO que pode estar acontecendo? Ainda não alterei nenhuma cor, apenas adicionei os links correspondentes.
Se vc puder abrir o link da imagem abaixo, pode observar o que descrevo... somente fica visivel a parte do menu que é ''tocada'' pelo mouse
http://1.bp.blogspot.com/-IRirjcF8ZvA/VLMukVmjVfI/AAAAAAABUmY/-zSr2li_Z10/s1600/cats.jpg
Agradecida.
pode ser qualquer detalhe.
Excluirveja se não apagou algum sinal por engano, como por exemplo aspas, barra ou qualquer outra coisa na parte dos links
Existe algum local no código desse tutorial onde eu posso alterar, para que o menu fique um pouco mais ''largo''? É porque ele não alcança o tamanho do banner do meu blog.
ResponderExcluir[Pensei na palavra ''width: que está no estilo da barra, mas ali já consta 100%] .
E uma segunda dúvida... tentei de todas as maneiras encontrar sozinha, mas não consegui....
Nos botões do menu, quando o cursor passa por cima, ele fica na cor verde.
Gostaria de trocar essa cor.
Tentei a linda:
#nav li a:hover, #nav li a:active - cor do menu quando abre o sub menu.
mas o que sofre a mudança são as letras, e não o fundo da cor do botão.
Eu agradeço muito se puder me dar mais essa orientação, fiz todo o possivel para descobrir sozinha, mas não tive sucesso.
Obrigada.
nesta mesma linha #nav li a:hover, #nav li a:active
ResponderExcluirvocê pode adicionar color:#000; com a cor que desejar.
sobre o tamanho total do menu, veja aqui:
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
este 150 é a largura de cada botão, então altere até ajustar o tamanho total do menu. Acho que essa é uma das maneiras mais simples de fazer.
Muito obrigada, de verdade!
ResponderExcluirValeuuuuuuuu.. a tempos tento colocar um menu com submenu, em linha horizontal, só tinha conseguido na vertical. Obrigada, fiz e deu certo, agora só me falta colocar as categorias... Pois tudo é meio complicado pra mim.. mas aos poucos vou conseguindo. Ainda bem q tem pessoas como vc q se dispõe a postar dicas! :) DEUS TE ABENÇOE!
ResponderExcluirSua dica foi excelente, há muito tempo eu venho procurando um bom menu drop down, e enfim achei
ResponderExcluirOlá Fabiano. O menu é genial. Porém estou com o mesmo problema de uma amiga, que comentou a postagem há bastante tempo. Quando está abaixo da header, os submenus ficam cortados, apenas algumas opções aparecem. Em outros locais eles abrem normalmente, mas, eu preciso dele abaixo da header.
ResponderExcluirEu acredito que seja algum impedimento de que os submenus se expando por cima da área de postagem,
Adicionei várias tags
ao final do código, e cria-se um grande espaço vazio abaixo do menu. Dessa forma, os submenus abrem normalmente, mas aquele espaço compromete muito a estética.
Poderia me ajudar?
Obrigado.
se o menu funciona diferente abaixo da header deve ser porque tem algum estilo CSS interferindo (configurado de outra forma no estilo header), infelizmente o blogger tem alguns códigos CSS que não aparecem no template mas são carregados automaticamente.
ResponderExcluirinfelizmente nestes casos é bem difícil corrigir e não funciona em todos os navegadores
qual o endereço do blog que está com esse problema?
Ola Caro Dono do Site kkk...
ResponderExcluirSeu site sempre me salva diariamente, so que hoje estou com um problema nesse seu Menu, Coloquei ele perfeitamente igual no tutorial, soque ele está fikando em cima do "Browse" do meu blog, como faço pra chegar ele um pouco pra direita?
esse código é normal o submenu aparecer abaixo do link.
Excluirtente procurar um código de submenu que já apareça ao lado senão precisará fazer muitos ajustes....
infelizmente não tenho um código pronto para lhe mostrar.
Como muda a letra?
ResponderExcluirno código tem font-family: .....
Excluirisso aparece no começo que é o estilo de fonte do menu completo e depois no meio que é o menu que aparece.
veja aqui:Como Formatar o Texto do Blog
Olá Fabiano. Como faço para que os items do submenu fiquem de 2 em 2 e lado a lado? Obrigada! Exemplo: (Menu principal) PRODUTOS
ResponderExcluir(Submenu) Produto 1 Produto 3 Produto 5
Produto 2 Produto 4 Produto 6 (assim por diante)
neste exemplo que citou você criou apenas um item no menu (produtos) e colocou todos os outros no submenu.
ResponderExcluirse quiser separado terá que criar 2 ou mais itens no menu e depois colocar o submenu em cada um deles.
como fizemos no tutorial usando a palavra link1, link2 ....
Olá Fabiano, eu coloquei espaços entre os submenus do exemplo para que ficassem como quero fazer, mas a msg aqui ao ser publicada não assumiu os espaços, então vou te passar o link de um site que tem o menu e submenu que quero fazer: http://www.lelis.com.br/shoponline/. O menu principal tem 1 submenu com itens de 2 em 2 (um embaixo do outro) e ficam lado a lado. Obrigada.
Excluirseu template é muito modificado por isso as vezes é difícil adicionar códigos.
Excluirpara corrigir espaço no menu teria que alterar o CSS dos links e talvez outras coisas o que poderia prejudicar o template.
Vou continuar pesquisando então. De qualquer forma, obrigada por responder.
ExcluirBoa noite irmão. Primeiramente parabéns pelo trabalho. O menu funcionou perfeitamente. Uma pergunta: Como faço para acrescentar um segundo submenu. Tipo: Coloquei o mouse sobre o menu, ele abre o submenu e qnd colocar o ponteiro sobre ele abre outro. Acho que deu pra explicar. rsrsrsrssr
ResponderExcluirAbraços
entendi sua pergunta, mas não tenho código pronto para colocar 2 níveis de submenu.
Excluirtem que alterar vários trechos do código então é mais fácil procurar um código pronto
Valeu!! Obrigado
ResponderExcluirBom dia Fabiano!
ResponderExcluirParabéns pelo site. estou tentando criar um submenu. copei o html disponibilizado e colei no html/javascript do blogger. o menu aparece perfeitamente e muito bonito, mas os subnenus não aprecem. onde estou errando?
desde já agradeço pela atenção
Francisco
entrei no seu blog agora e notei que faltou alterar o link no submenu, por exemplo:
Excluir< li >< a href="#" > Alan Camargo< /a >< /li >
no lugar deste sinal de #, você deve colocar o endereço da pagina que seja abrir para esse link, por exemplo:
< li >< a href="http://nespefe.blogspot.com.br/2015/06/texto-dia-2506.html" > Alan Camargo< /a >< /li >
Obrigado! vou tentar aqui!
ExcluirCara!! Parabéns pelos seus poster!! Estava precisando criar um blog com cara de email... Não conseguia colocar submenus (subpáginas) você salvou a pátria!!
ResponderExcluiroi
ResponderExcluiros submenus esta funcionando porem do quarto submenu em diante não aparece mais.
pode me explicar o porque?
provavelmente na hora de editar o código, adicionar mais itens você apagou algo por engano.
Excluireste código de submenu tem muitos detalhes e códigos parecidos li ul infinitas vezes e se trocar ou colocar a mais pode fazer o menu dar erro
este código tem muitos detalhes por isso as vezes dá erro.
ResponderExcluirpor exemplo, quando vai colocar os links do seu blog, alterar algo no estilo CSS, adicionar ou retirar itens no menu. Qualquer letra ou sinal faltando ou sobrando pode fazer o código dar errado.
já vi outros códigos de submenu mas não todos parecidos com este.
Bom dia Fabiano,
ResponderExcluirHá alguns anos utilizo bem satisfatoriamente o sub menu que você publicou em 2009 (http://www.dicasparablogs.com.br/2009/05/como-colocar-submenu-no-blog.html). Infelizmente parou de funcionar há algumas semanas.
Estou batalhando com este novo que você postou mas a configuração me parece bem mais complicada. (http://www.sistemaronin.com/)
Ex:
1- A barra de menu fica transparente.
2- A largura de cada ítem não está padronizada.
3- Faltam as bordas superiores e inferiores.
No fim, até preferia ficar com o cód. antigo. Notei que nem o exemplo disponibilizado funciona mais.
Obrigado pelo apoio!
vou testar alguns códigos e publicar um novo tutorial sobre o assunto...
ResponderExcluiro mesmo vale para o outro comentário na postagem:
Como Colocar Submenu no Blog
Muito obrigado Fabiano!
ResponderExcluirVou aguardar...
Olá Fabiano,
ResponderExcluirSuei bastante e consegui avanços nos ajustes que queria, entretanto resta um:
- Algumas palavras ítens (as maiores) precisam ficar mais centralizadas. Parece que já começam com alguma espécie de margem a esq. Poderia me informar onde está esse ajuste?
Muito obrigado!
no código tem:
Excluirpadding: 9px 15px 8px;
isso são margens e aparecem varias vezes no código. Se você quiser tente trocar todos por esse aqui:
padding: 1px 2px 3px 4px;
veja qual lado cada numero controla:
1 - em cima
2 - lado direito
3 - em baixo
4 - lado esquerdo
e claro ajuste cada valor como desejar
como já falei este trecho aparece varias vezes no código (ele controla o link e quando o mouse está sobre o link) então quando substituir use valores iguais como está no código senão o menu vai ficar "dando um pulo" ao passar a o mouse, por exemplo se deixar 20 px de margem esquerda tem que ser em todos os lugares que este código aparece.
Excluirnão publiquei seu outro comentário porque você colocou seu email nele.
Excluirtente colocar o código text-align:left; dentro da primeira linha do css
#NavbarMenu {..
as vezes seu blog já tem outros CSS configurando links e isso atrapalha um pouco
Olá Fabiano,
ExcluirRefiz todo o processo, revendo cód. por cód. e deu mais certo agora.
Os dois ajustes de padding que você colocou já eram suficientes.
O "problema" agora são as margens. No post de 2009 ficavam iguais, e agora ficam mais grossas porque se encontram a esq. de uma e dir. de outra.
Muito obrigado pela atenção!
que bom que deu certo...
Excluirestou terminado de testar um outro código e vou publicar logo, mas é bom saber que você resolveu o problema
Oi Fabiano, Muito bacana seu blog, tô aprendendo muito com ele, mas preciso de uma ajuda!
ResponderExcluirNão consigo centralizar o menu de jeito nenhum.
Li com calma todos os comentários, e nada.
Pode me ajudar?
logo no começo do código tem
Excluir#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;
tente trocar esse margin: 0 por margin:auto;text-align:center;
aqui tem um novo tutorial sobre:
Como Colocar Submenu no Blogger
talvez ache este mais fácil
Isso foi a primeira coisa que tentei e nada!
ExcluirJá coloquei largura pra ver se resolvia, nada!
Já fiz mil alterações no código e nada!!
Já me estressei e desisto!!
qual o endereço do blog ?
ExcluirOi Fabiano, meu blog ainda não está no ar, mas já alterei de todas as formas que sabia o código, e a planilha insiste em ficar à esquerda. Já usei margin:auto, margin:0 auto, já coloquei tamanho, eu preciso que ela fique ao centro da página, mas caso ela precise de uma largura específica, essa seria de 1.100px, porque tô com problema, o menu do blogger, não me permite abrir um link externo em uma nova aba, o que pra mim é super ruim, por isso queria substituir o menu do blogger por esse, não sei se existe algum erro no código ou algo que trava essa edição.
Excluir#NavbarMenu {
background: #FFF;
color: #000000;
font-size: 14px;
font-family: Open Sans
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: center;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: center;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: #000000; /*--edite cor do link--*/
display: block;
font-size: 14px;
font-family: Open Sans;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 0px solid #FFF;
}
#nav li a:hover, #nav li a:active {
color: #000000; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #FFF;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #000000; /*--cor do link--*/
font-size: 14px;
font-family: Open Sans;
font-weight: normal;
text-transform:capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 0px solid #FFF;
border-left: 0px
solid #FFF;
border-right: 0px solid #FFF;
background-color: #FFF;
}
#nav li li a:hover, #nav li li a:active {
color: #000000; /*--cor do link--*/
padding: 7px 10px;
background-color: #FFF;
}
#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;}
[...]
achar o código sem testar online é bem difícil.
Excluirsugiro que apronte tudo para colocar o blog online e depois que estiver use o inspecionar elementos para testar e achar o erro.
pode ser algum padding ou margin com 0 px que não deixa centralizar, além de varios outros códigos css do blogger.
na pagina layout ao arrastar o gadget você perceberá que existem duas linhas para colocar gadgets no topo da pagina ocupando a largura total do blog, teste trocar o gadget de lugar. (caso o seu template seja deste tipo).
o blog não precisa estar perfeito para você colocar online. Acredite mesmo de pois de anos com seu blog você achará coisas nele que precisa corrigir ou melhorar.
Oi Fabiano!!
ExcluirEntão, não consegui deixar esse menu ao centro no topo da página, então optei pelo menu do blogger, já mudei o menu de lugar também, mas não resolveu, mas se você notar no rodapé do blog, lá no final, usei esse menu que você passou com uma barra de pesquisa, e pra mim ficou ótimo no rodapé.
Que pena que não consegui centralizá-lo, mas se quiser, dá uma olhada no blog, entrou no ar hoje! www.costurandonuvens.com.br
Outra coisa que não consegui fazer, foi colocar cor no fundo do menu, e fazê-lo ter o mesmo comprimento do header, testei com ambos os menus e não consegui, ficou um espaço entre o menu e o header.
Quando não era uma coisa, era outra, mas tá bom, o que importa é o conteúdo do blog, e esses pequenos desafios vou resolvendo com o tempo.
Pra quem não mexia no blogger há mais de 10 anos, até que meu blog não ficou ruim kkkk
Muito obrigado pela paciência em me ajudar!!!
Tenho aprendido muito com seu blog!!
Beijão!!
antes de responder quero comentar sobre as imagens que você postou no blog. Elas estão no formato .png que é muito pesado, faça um teste salvando uma delas no formato .jpg
Excluirvocê verá que não perde qualidade e a imagem fica mais leve e o blog carrega mais rápido.
sobre o seu menu procuro no html o trecho de CSS
.tabs-inner .widget ul {
margin-top: 0;
margin-left: -30px;
margin-right: -30px;
}
apague as linhas
background: transparent none repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: 1px solid transparent;
e coloque
background-color: #ccc;
depois nas linhas
margin-left: -30px;
margin-right: -30px;
altere estes valor de margem para 10px (numero positivo e não negativo como está no seu blog)
então faça os ajustes de largura e cor de fundo do menu, mas eu achei que ficou muito bom do jeito que está.
Olá! Primeiramente quero parabenizar pelo blog, é muito explicativo, bem feito, bem organizado! Me ajudou muito!
ResponderExcluirPor favor, estou quebrando a cabeça. Passei a usar o Blogger, e tenho noções bem básicas de HTML(básico do básico). Instalei um template personalizado, com um submenu. Fiz as alterações no menu e no sub menu. Agora minha pergunta, como faço para postar e deixar meus posts as paginas que quero?
Detalhe : no menu do Blogger, em opções : Páginas, as paginas estão desmarcadas, mas no blog está tudo ok, as paginas estao aparecendo normalmente com os menus.
Quando edito no HTML, consegui colocar um link de um post em uma das paginas, mas e os demais posts? o que vou fazer?
Se houvesse uma opção de classificar um menu quando postar, seria mais facil :/
Ah, acabei de lembrar, na area de layout>Paginas>Editar ,todo mundo fala que é só clicar em "Lista de links – mover o gadget para a coluna lateral" e posso editar o submenu, sendo que nem é um link, nao tem como clicar. Nossa.. minha cabeça esta muito confusa, por favor me ajude.
Não sei se expliquei bem, porque só pela situação ja embaralhou minha cabeça, mas da pra ter uma idéia pelo meu blog : http://beckyspy.blogspot.com.br/ Aparentemente esta ok, mas nao consigo colocar os posts dentro das páginas, apenas 1 post, mas vou precisar postar mais futuramente...
O código de um submenu por exemplo esta assim : < l i>< a class ='drop-ctg' h ref='# '>Beleza< / a >
< u l >
< li> < a href=' # '>Maquiagem < / li>
< li>< a href =' http ://beckyspy.blogspot.com.br/2015/11/cabelo- colorido. html ' > Cabelo < / li>
< / li>
Att,
Rebeca
este tipo de menu é para colocar apenas um post em cada pagina ou item do menu.
Excluiro menu é feito manualmente então toda vez que quiser trocar um item do menu precisará editar o html dele. Não tem como fazer de forma automática
como você mesma falou já está cansada de mexer neste menu. Então se está funcionando sugiro que esqueça disso por uns dias e depois verá que está mais fácil fazer as alterações que deseja.
Poxa que pena, queria tanto fazer um sub menu para que pudesse deixar mais organizado meus posts...
ExcluirVou dar uma olhada depois então, isso me deixou muito cansada :(
Muito obrigada!
Mais uma vez parabéns! :)
o menu vai organizar alguns posts ou pagina do blog que você queira destacar, mas este tipo de menu não é para posts recentes (senão terá que atualizar sempre).
Excluirolá, eu coloquei o codigo no meu, mais quando eu adiciono o link, ele aparece invisivel, e só aparece quando passa o mouse por cima, algueem tem noção do que seja?
ResponderExcluiras cores de fundo do menu não são iguais do seu blog?
Excluirou então pode ser algum detalhe do código errado, infelizmente é difícil de achar pode ser um sinal apagado por engano, misturar os sinais ' e " nos links
Olá como faço para criar um terceiros nivel de menu nesse script que você postou?
ResponderExcluirvocê teria que adicionar mais um nível no css e no html, talvez seja mais fácil achar um código pronto de 3 níveis.
Excluirsão varias alterações no código e não tenho como fazer e testar no momento
Fabiano aonde eu insiro um comando para que esse MENU fique compativel com os tablets? Ele funciona perfeitamente em smartphones mas no tablet só aparece o menu principal. Os submenus não!
Excluirnão testei este código em tablet, então se está funcionando no computador e não no tablet talvez não seja possível usar este tipo de submenu.
Excluirinfelizmente não tenho os códigos para tablet
NAO PEGA MAIS AFF
ResponderExcluirEU ADICIONO ELE NO MEU BLOG E ELE NÃO APARECE
ResponderExcluirveja aqui outro código:
ExcluirComo Colocar Submenu no Blogger
talvez ache este mais fácil de usar
Cara, tu salvou minha vida!kkkkkkkk...
ResponderExcluirAmeii o resultado!
Legal cara, obrigado mesmo por disponibilizar esse menu, a tempos procurava um assim, muito bacana, é simples e prático.
ResponderExcluirSucesso pra você!!!
PODES ME AJUDAR COM ADICIONAR LINKS NO MEU BLOG?
ResponderExcluirque tipo de link quer adicionar? no menu?
ResponderExcluiros sub menus nao estao funcionando oq eu preciso fazer??
ResponderExcluirestes códigos tem muitos detalhes.. tem que verificar se não apagou nenhum sinal por engano na hora de editar os links do menu..
ResponderExcluirse quiser veja aqui outro código para submenu
http://www.dicasparablogs.com.br/2015/10/como-colocar-submenu-no-blogger.html
Boa tarde! Usei o código e funcionou perfeitamente. Gostaria de saber se você tem algum tutorial para eu usar esse mesmo menu fixo no topo da página, mesmo quando estou rolando a página. Obrigada!
ResponderExcluir
ResponderExcluirtente esse código:
position: fixed;
right: 0;
top: 50%;
adicione no começo do CSS, aqui:
#NavbarMenu {
position: fixed;
left: 0;
top: 0;
........ e todo resto do código como está no tutorial.
isso deve fixar no topo da pagina.
oi gostei muito desse post e de outros que já li gostaria de perguntar como criar uma galeria de fotos em slide no blog?
ResponderExcluirtem um gadget de slides padrão no blogger, mas as imagens são pequenas.
Excluirsenão gostar veja aqui:
http://www.dicasparablogs.com.br/2013/09/colocar-slide-blogger-slides-postagens-recentes.html
Bom Dia! eu só não estou conseguindo mudar a cor das letras, ponho os códigos e nada, será que to fazendo algum procedimento errado? estou colocando como html.
ResponderExcluira cor e fontes tem a explicação no tutorial, por exemplo:
Excluir#nav li a:hover, #nav li a:active é quando o mouse está sobre o menu
a linha:
#nav li a, #nav li a:link, #nav li a:visited é a aparência normal do menu quando o mouse não está sobre ele
então precisa trocar o nome, cores ou tamanho das fontes nestes trecho do codigo
Obrigado pela atenção Fabiano, eu fiz umas edições aqui e conseguir. Muito Obrigado.
ExcluirOlá! Seu blog é um dos que têm me ajudado a personalizar meu blog. Eu coloquei há tempos um menu fixo no topo da página. Como é possível colocar submenus com ele já no topo? Por gentileza explique de modo simples pq sou básica.rsrs Muito grata.
ResponderExcluirse já tem um menu e quer colocar um submenu o melhor a fazer é trocar o código. Apagar o menu e colocar o submenu no lugar.
Excluiradaptar um código em cima de outro dá muito mais trabalho do que apagar um e colocar outro código.
claro que se for fazer a troca sugiro que salve os códigos do menu que está usando agora, assim se não gostar do resultado depois da mudança poderá voltar ao seu menu atual com mais facilidade.
Amigo surgiu uma duvida sobre um problema aqui. é que o menu está ok porem quando mudo a resolução para maior o menu vai ficando abaixo e desaparecendo. e quando eu coloco para longe ele fica sobrando um pouco. não tem como colocar um código pra ele redimensionar o menu automaticamente modificando o tamanho das letras? eu não estou utilizando um perfil simples e sim um template. veja em: http://mundodamusica2017.blogspot.com.br/
ResponderExcluirvocê pode usar as larguras e tamanho de fontes em %
ResponderExcluirou usar o código @media screen and
isto permite usar tamanhos de fonte diferentes conforme o tamanho da tela.
por exemplo:
@media screen (max-width:959px){
.posts {font-size:12px;}
}
@media screen (min-width:960px){
.posts {font-size:16px;}
}
isso faz o texto ficar no tamanho 12px em telas até 959 de largura e 16px acima de 960
cuidado com as chaves { } veja que tem um par de chaves mais que o normal que é justamente o que define qual trecho de css será aplicado naquela condição (tela menor que 959 ou maior que 960
você pode usar o css dos menus ou qualquer outra coisa neste código
aqui tem um tutorial sobre isso
https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries
Muito obrigada assim é muito mais facil do que fazer com etiquetas!!
ResponderExcluirComo coloco Arquivo nos sub menus?
ResponderExcluirnão tem um código especifico para os arquivos no submenu, ou seja, terá que colocar os links manualmente (um por um)
ResponderExcluirOla gostei muito do blog me ajudou muito também, conteúdos bem explicados fácil de entender .
ResponderExcluir