Um dos pedidos mais comuns aqui no blog se refere à menus de navegação.
Em especial ao menu com abas, ou menu Dropdown. Esse menu que quando passamos o mouse as "casinhas" aparecem.
Já ensinei 1 tipo de menu em abas aqui no blog, como você pode conferir no link abaixo:
http://www.elainegaspareto.com/2013/08/menu-dropdown-com-abas-e-sub-abas.html
Ele funciona muito bem, mas como é preciso acessar o código-fonte do blog e muitas pessoas ficam inseguras quando precisam fazer isso.
Então vou compartilhar este outro menu, que será colocado de modo bem simples em seu blog, sem precisar mexer no código-fonte.
Veja como fica (é o segundo menu, ok?):
Para começar acesse a aba Layout de seu blog.
Agora clique em Adicionar um gadget.
Dentre as opções escolha HTML/JAVASCRIPT e na janela que abrir cole o seguinte código:
Agora preste atenção!
Deixei marcado no código tudo que se refere às alterações de cor, fonte e estilo.
Altere para combinar com seu blog.
Por exemplo, onde você lê:
background: #F20767; /*--cor do menu--*/
Significa que o código hexadecimal #F20767 dá a cor rosa escuro do menu. Para trocar essa cor troque o código hexadecimal que a define.
Aqui tem uma tabela de cores para você escolher as cores que deseja.
Faça isso em todas as partes sinalizadas no código.
Depois de concluir essa parte coloque o nome em cada aba e o endereço de cada uma delas. Deixei sinalizado em pink onde coloca o endereço e em azul onde coloca o nome de cada aba e sub aba.
Veja um exemplo:
<li><a href=http://www.elainegaspareto.com'>Home</a></li>
Onde em pink é o endereço para onde o link direciona e em azul é o nome que aparece na aba.
Faça isso com todas as abas e sub abas.
Depois da edição completa salve as alterações, arraste para onde deseja que fique e salve as alterações do layout.
Dica extra:
Faça antes em um blog de testes, tá?
Assim você ganha confiança para fazer no blog oficial.
Aqui no blog tem uma categoria só de menus para blog.
Veja:
Dias online
Postagens
comentários
Ôpa, só vc mesmo amiga com esse coração enorme para dar dicas excelentes para nós blogueiros, obrigadaaaaaaaaaaaaaaaa.
ResponderExcluirbeijooo.
excelente ESTOU ENTRANDO NO MERCADO
ExcluirDicas sempre legais,Elaine!um beijo,obrigado,boa noite!chica
ResponderExcluirElaine,
ResponderExcluirQuanta dica jóia. Quando tiver um tempo vou mudar tudo!!!
Depois, se eu fizer algo errado, mando um email implorando por sua ajuda, ok?!
Beijos
Olá!!!!
ResponderExcluirComo vc é "fuçona" kkkkkk!!
Elaine, me ensina a colocar resposta bem embaixo do comentário que nem vc tá fazendo agora???
Postei o meme dos 7 pecados... pirei... sou pecadora demais!
Bjks
Alê
Eu queria aprender a como mexer em todo HTML pra ficar mudando o layout do meu blog de vez em quando... rs... Mas sou uma anta nisso.
ResponderExcluirEu tenho um menu horizontal no meu blog, mas não tenho noção de como ele foi parar lá, uma amiga que fez pra mim... rs
Beijocas
Elaine o tutorial tá bem explicadinho!Muito obrigada pela generosidade.
ResponderExcluirBjos
Elaine agora é que meu msn abriu ,está frescando há vários dias, vi o seu recado lá e respondi, pelo e-mail, hoje 16/06 o prazo termina amanhã não é? graças a Deus não perdi o livro que tanto queria, estou muito feliz mesmoooooooooooo!
ResponderExcluirBeijão.
Deixei no contato de Seu Blog hj pela manhã o que você me pediu, também. Haja desespero! rsrsrsrsrs
Oi amiga, tem selinho pra vc!!!
ResponderExcluirBj
ELAINE DE DEUS...
ResponderExcluirsocorro..
quanta coisa legal mas sabe é sempre tão complicado pra mim..
sou meio topeira em assunto de computador..
mas tentarei fazer alguns sim..
já aprendi tanto com vc...
e sempre volto pra verificar suas dicas quando tenho dúvidas..hehehe
obrigada linda.
bjuivos no coração.
I would like to exchange links with your site elainegaspareto.blogspot.com
ResponderExcluirIs this possible?
Oi, Elaine!
ResponderExcluirNo meu blog de teste já tenho o linkbar instalado, mas não sei como fazer para ele ter esse 'efeito' que tem o teu. Exemplo, na opção SOBRE quando clicamos ele abre outras opções: sobre mim, sobre o blog...
como faço isso? tô pirando!
beijooo
Esse menu suspenso é uma excelente opção para quem tem muitos parceiros na barra lateral. Estou organizando meu layout e certamente um desses estará por lá.
ResponderExcluirabraços
Oi Elaine... por favor, me ajude!!!! Eu não estou conseguindo fazer o menu e não encontro onde estou errando...Não sei nem por onde começar solicitando ajuda. Pela sua experiência... me ajuda! bjs Isis
ResponderExcluireu fiz o outro menu ficou muito legal, mais algumas coisas eu não consigo fazer não sei por que.
ResponderExcluirVC CONSEGUIU MUDAR A COR DA FONTE?
Excluireu mudei, mas quando salvei nao deu certo :( continuou rosa. tenho certeza q fiz td certo. Já revisei mil vezes
ExcluirNão sei se já tinha visto esta postagem, é antiga, né?
ResponderExcluirAchei muito boa, vou fazer no Blogteste e se der certo faço no Mundial.
Valeu.
Beijos querida.
Essa postagem mim ajudou muito no inicio do meu blog e continua ajudando de vez em quando quando quero mudar venho aqui e procuro algumas dicas,..........
ResponderExcluirBJS...
http://loucasporphotoscape.blogspot.com.br/
Obrigada por compartilhar, não tinha conseguido com os outros menus, este deu certinho.
ResponderExcluirQuando reformular meu blog quero criar esse menu dropdown.
ResponderExcluirBeijinhos
Deus abençõe
Oi! Coloquei e ficou lindo. Mas não sei como colocar conteúdo nessas pastas e sub pastas. Como faço? Tem algum post aqui que ensina? Grata!
ResponderExcluirGisele, no próprio tutorial tem essa explicação.
Excluirbjssss
Olá
ResponderExcluirElaine, boa tarde
tenho sempre acompanhado seu blog. Coloquei o menu horizontal só que não abre as abas. Veja blog teste http://acessaconcursoseeempregos.blogspot.com.br/ - Aparece só os links.
Copiei o código e colei direto no HTML/JavaScript
Agradeço sua atenção!
Experimente excluir os códigos do menu nativo do Blogger, e só depois insira este.
ExcluirMas teste antes em um blog de testes, tá?
O MENU É LINDO E PERFEITO MAS NÃO CONSIGO MUDAR A COR DA FONTE DO MENU, USEI A TABELA DE CORES Q VC INDICOU E NÃO MUDA O BRANCO :(
ResponderExcluirRachel, para mudar a cor da fonte releia o tutorial. E localize no código a parte que se refere à fonte.
ExcluirSe fizer certinho conseguirá, tenho certeza.
bjsss
Consegui!!!! Obrigada!!
ResponderExcluirComo posso centralizar o menu?
Meu site de teste http://ideiadelasites.blogspot.com.br/
Este é o meu blog onde quero instalar o menu: http://ideiadela.blogspot.com.br/
Como posso colocar a borda encima e embaixo, só consegui colocar borda na direita e na esquerda....
Olá, Elaine! Seu blog é extremamente profissional. Estamos alterando novamente nosso layout e muitos dos códigos que precisávamos, encontramos aqui, funcionando perfeitamente bem. Gostaríamos de retribuir toda a ajuda de alguma forma. Parabéns pelo trabalho excepcional!! Abraços!
ResponderExcluirOi, gostaria de saber como acrescentar mais abas ao menu, pois tentei alguns metodos várias vezes mas sem sucesso. Desde já agradeço . Um beijo ! <3
ResponderExcluirAh, e também como faço para ele subir mais um pouco pois coloquei acima do cabeçaho, coloquei margin-top e não deu certo. bj
ResponderExcluirkkkkkkk... Elaine... cérebro fazendo muita sinapse!!!! Tô quebrando a cabeça... mas este meu no meu blog... vai sair!!! Owww... se vai!!!!
ResponderExcluirParece que deu certo!!!!! Adoro tudo isto!!!
ResponderExcluirObrigada minha querida!!! Não precisa nem escrever né... que eu te admiro de montão e sou sua fã!!! Você já sabe é? :)
Maravilha esse blog, gostei!
ResponderExcluirOlá Elaine,o problema de Menu, é que ele não funciona na internet Explorer 11, só no Mozilla e Chrome. Pelo menos no meu blog, não funciona, mais o Menu é Maravilhoso, temo como adaptar ele no meu blog? Design de modelo!
ResponderExcluirElaineeeee! Não está dando certo... quando coloco o código no blog não aparece em formato de menu.... snif!
ResponderExcluirOlá coloquei as abas no meu blog, porém só consigo visualizar uma sub-aba as outras não aparecem. Não consegui identificar se tenho que aumentar a caixa da sub-aba no código ou é o próprio blogger que não deixa eu fazer a alteração. http://entrelinhasdamagia.blogspot.com.br/. Colei sem alterar o código do blog de teste e houve o mesmo problema.
ResponderExcluirKallena, pode ser o lugar onde colocou o menu, pode ser seu template, pode ser algo em seu blog, etc...
ExcluirExperimente outro template, colocar em outro lugar, etc...
Eu testei no modelo Travel e Simples, e sempre deu certo...
Olá Elaine adoro suas dicas, e queria muito o menu horizontal com abas no meu blog, fiz e deu certo, porém quando coloco o link das páginas, dá que elas não existem no blog?! O que estou fazendo de errado, se puder me ajudar, serei muito grato!! BjoO grande e sucesso sempre!!
ResponderExcluirAtt; Wesley Felício
Que bom! Finalmente encontrei um código que é exatamente como quero!!
ResponderExcluirSabe-me dizer como faço para alinhar o menu ao centro da página?
Beijinhos
Elaine, eu fiz isso, só que não consigo postar nada nas páginas, já pesquisei muito e não conseguir encontrar nada assim. Você poderia me dá dicas de como faz essas postagens?
ResponderExcluirObrigada e parabéns pelo seu blog, já me ajudou bastante.
Letícia, um menu como esse funciona a partir de links. De marcadores.
ExcluirInsira marcadores em seus posts e coloque no menu os links desses marcadores.
Aqui no blog tem post que ensina a inserir marcadores, e tem outros que ensinam como inserir os links no menu :)
bjsssss
Elaine, só venho aqui pra deixar meu muitooooooo obrigada! Teu blog tá me ajudando muito!!
ResponderExcluirEliane, como faço pra colocar um link nas abas sem que seja uma página de um post do blog, pois naquela opção sem ser o do html- "páginas"- n precisa de nada é só colocar o texto na aba, muito obrigada, bjs
ResponderExcluirOlá, tudo bem?
ResponderExcluirPrimeiro, obrigada! Fiz tudo que você ensinou e deu certinho. Mas estou com problema pois não consigo alterar a cor do fundo do menu de jeito nenhum. Ele continua vermelho mesmo eu colocando código de outras cores. O que posso fazer?
Obrigada
Comigo tb acontece isso :(
ExcluirOla , o meu blog é este http://luaaa07.blogspot.pt/ eu criei separadores e queria criar subpaginas dentro deles, por exemplo carregar no Cantinho da Leitura e dentro dele estar em lista o nome das histórias que estou escrevendoe carregar nela e aparecer os capítulos, como se faz isso ?muito obrigada :)
ResponderExcluirOi, Elaine! Deixa eu te agradecer pelas suas dicas, menina! Parabéns pelo blog.. Valeu por compartilhar essas coisas que você sabe aqui com a gente! :)
ResponderExcluirBom dia. Estou voltando a mexer com blog e procurando como mudar algumas coisas no meu achei este seu blog com dicas. Este menu lá no meu blog ficou todo em branco, só aparece algo passando o mouse. Sabe me dizer o que aconteceu? Era para ficar igual a este do seu, né?
ResponderExcluirhttp://artesamaosartesanato.blogspot.com.br/
Muito grato pela generosidade em compartilhar conhecimento. Grande abraço da tripulação do Canoa Encantada Teatro de Animação!!
ResponderExcluirOla Elaine. Como faço para que o menu/submenu do blog funcione nos tablets. No tablet o submenu não está aparecendo porem no smartphone funciona perfeirtamente
ResponderExcluirVLW PELA dica : ai vai uma dica tmb acelerador de internet online
ResponderExcluirso funciona com a pag aberta (programa online) http://okspace.blogspot.com.br/ esse é da hraaaa vle a pena dar uma olhada.
Eu queria o código do seu menu, pode passar?
ResponderExcluirElaine, sempre que tenho duvidas eu corro aqui!! obrigada amoooooo suas dicas, se puder dê uma olhada no meu blog minhapalavrachave.blogspot.com
ResponderExcluirolá bom dia,
ResponderExcluirsou iniciante nesse negocio consegui colocar o menu e sub menus mas como faço para colocar as postagens dentro dos menus???
Alguém me diz onde eu mudo a cor das abas?
ResponderExcluirMuuuito obrigada, Elaine!
ResponderExcluirNão sei o que seria do meu blog sem você, sua linda!
Muito bom Elaine, já instalei o menu, mas a minha duvida é toda vez que quiser encaixar um post na categoria terei que colocar o link do assunto acessando o gadget e lincando no mesmo marcador sempre? desde já te agradeço...abraço
ResponderExcluirola Elaine.
ResponderExcluirMuito obrigado pelas dicas que tens nos oferecido!!
Tenho um pedido a fazer!
Eu tou desde procurando um Menu com os efeitos do Menu deste blog que ao rolar a pagina ele vai se encaixar no topo e quando desenrolas ele volta a posicao inicial, so que nunca encontro! seria possivel fazer um tutorial do mesmo!!
Obrigado, espero pelo FeedBack.
abracos!!
Assim que possível eu farei :)
ExcluirAtt.
Boa tarde Elaine, primeiramente quero ti agradecer por me responder sobre a hospedagem que fiz na sua seção pergunta-ê, já consegui resolver meu problema. A minha dúvida é que consegui instalar esse menu, porém gostaria de saber se tem como diminuir uma borda que fica sobrando do lado esquerdo, para que o menu fique exatamente da largura do meu cabeçalho? Desde já muito obrigada, bjsss
ResponderExcluirAna Paula, o menu vai assumir a área destinada à ele, e nesse caso seu template define essa sobra. É do seu template, infelizmente não há como alterar...
ExcluirPOR FAVOOOR! URGENTE! Agradeço o código, mas agora necessitava de adicionar um "SUB-ABA" DENTRO da "SUB-ABA". (como neste blog tem, por exemplo, "No blog tem" (ABA) -> Receitas culinárias,... (SUB-ABA) -> "Receitas Doces" ...
ResponderExcluirMiguel, veja na aba Dicas para blogs o item Menus. Lá tem um menu multinivel que poderá te ajudar.
ExcluirNão dá pra inserir sub abas nesse deste tutorial, terá que ser outro menu...
Ok!
ExcluirAgradeço imenso a sua ajuda!
Cumprimentos
ResponderExcluirOlá, Elaine. Boa tarde! Li o seu tutorial sobre menus Horizontais com sub menus. Copiei o código e testei em Blog de testes. Deu super certo. Mas minha dúvida é em relação ao meu Blog que já tem um menu pronto, mas não tem os sub menus. Nesse caso como faço? Pois já tenho os menus principais. Aguardo seu contato. Obrigado e Abraços !
Oi Elaine, venho agradecer por este tutorial mara que me deixou super feliz com o resultado no meu modesto cantinho,acabei de instalar e pulei de alegria pois eu já estava a bastante tempo batendo para lá e pra cá em busca de um que desse certo, e este, caiu como uma luva !!
ResponderExcluirGratidão pela sua generosidade em nos ensinar. Bjos
Olá Elaine Gaspareto sou iniciante como blogueiro e quero ver se consigo ter uma renda extra dessa forma, estavo todo perdido mas quando encontrei seu blog me achei e estou deixando o meu blog bacana, desejo retribuir assim como você faz, você é uma pessoa especial, a gente entra na internet todo perdido, você é o caminho, seja sempre assim obrigado.
ResponderExcluirDeu quase tudo cero , só a cor de fundo não aparece. Aconteceu isso com mais alguem? Fica só o texto ai quando passa o mouse ele dá a cor hover normal.
ResponderExcluirMexia com blogger a anos atrás e agora retornei a mexer, estava mais perdido que cego em tiroteio e achei seu site com dicas, ta de parabéns, me ajudando muito, perfeito conteúdo, continue assim, a internet precisa disso!! muita saúde e paz pra você Elaine!!
ResponderExcluirMuito obrigada!!!!
ExcluirOlá, Elaine! Consegui fazer meu menu horizontal! Muito obrigado! Porém, eu queria deixa-lo centralizado e não consegui! Pode me ajudar? Agradeço desde já!
ResponderExcluirVoce pode tentar inserir os comandos < center > no começo e fechar a tag com no final do código, mas nem sempre funciona.
ExcluirTambém pode tentar centralizar o gadget através do código-fonte (procure aqui no blog um tutorial sobre Como centralizar elementos de página) mas também pode não dar certo.
Isso acontece porque o menu sempre vai assumir a posição da área onde ele estiver e para deixa-lo centralizado teria que mexer nos valores de padding e margin, e aí é complicado explicar em detalhes pois varia de template pra template a largura total da área onde ele estiver...
Pequei algumas dicar com amigos também e vou tentar todos! Muito obrigado mais uma vez!
Excluiroi. eu não consigo abrir a ligação dos códigos das cores. Podes pff enviar-me o link. Estou com uma séria dificuldade nisso...
ResponderExcluirOlá Eliane, fiquei tão feliz em conhecer o seu blog e as suas dicas também.
ResponderExcluirEu já havia feito mudanças no meu blog, mas não estava do jeito que eu queria. Então, comecei a pesquisar e encontrei o seu site com essas dicas incríveis e tutoriais que solucionaram os meus problemas. Gosto de mexer com códigos e html sou curiosa mesmo. Estou imensamente feliz, o meu blog ficou com uma aparência linda coloquei menu horizontal, mídias sociais e muito mais. Só uma dúvida, não consegui expandir a imagem do cabeçalho de um jeito que ficasse inteira no topo da página como essa sua. Tem alguma dica para me dar ?
Vou deixar o link para você olhar quando puder
https://nandagurniakjornalistando.blogspot.com.br/
Fernanda, a solução é usar a imagem que voce quer que seja o cabeçalho como fundo e não inserir como cabeçalho.
ExcluirAí ela ocupará a largura toda. Faça o nome do blog separado, em um fundo transparente e essa sim use como cabeçalho, mas as imagens, etc... use como plano de fundo.
Mas c me deu uma ideia, vou fazer um tutorial sobre isso, nunca tinha me ocorrido que alguém tivesse essa dúvida...
bjsssss
Olá Eliane, fiquei muito feliz por responder o meu comentário vou fazer como você disse.
ExcluirLegal, faz esse tutorial sim vai ajudar outras pessoas também.
Depois te mostro o resultado. :)
Abraço e fica com Deus.
Olá Eliane, voltei como o resultado. Consegui e até me inspirei em fazer uma capa mais bonita do que aquela que havia lhe mostrado.
ResponderExcluirQuando tiver um tempinho dê uma passadinha e veja o resultado:
https://nandagurniakjornalistando.blogspot.com.br/
Muito obrigada pelas dicas e ajuda.
Sei que preciso acrescentar mais alguns detalhes no meu blog, mas é uma satisfação de ter feito algo tão bonito com as próprias mãos.
Grande abraço e fique com Deus.
Elaine,boa tarde.
ResponderExcluirConsegui colocar o menu no meu blog.
Muito obrigada beijos