Ensinei alguns ao longo do tempo, mas queria um que fosse bem simples de instalar e que não usasse javascript, apenas CSS e HTML.
Então compartilho com você este abaixo, que é um dos que mais uso em meus trabalhos de personalização de blogs.
Clique no botão e veja esse menu instalado em meu blog para testar tutoriais:
Para começar você precisa testar em um blog de testes.
Jamais faça experiências direto em seu blog "oficial".
E mesmo depois de testar, antes de instalar em seu blog real, faça backup dele.
Aprenda aqui:
Como fazer backup completo do blog
Precauções tomadas,é hora de por mãos à obra.Para começar leia este tutorial até o fim antes de começar.
Depois volte aqui, eu espero.
tic tac
tic tac
Leu tudo? Entendeu certinho?
Agora vamos fazer!
Instalando o menu com abas
Para começar entre no painel de seu blog, clique na aba Modelo e a seguir clique em Editar HTML.
Dentro da caixa de código tecle Ctrl-F e na barra de busca que abrir digite isso:
/* Tabs
Dê Enter e assim que localizar selecione tudo que estiver dentro dessa tag, ou seja, de /* Tabs
----------------------------------------------- */ até encontrar /* Headings (no modelo Viagem) ou /* Columns (no modelo Simples).
No lugar do código que selecionou cole o primeiro código:
Caso seu blog não tenha esse trecho cole o código que forneci acima disso:
]]></b:skin>
Visualize e se não apresentar nenhum erro, salve as alterações. Obviamente você não verá nada ainda.
Acesse a aba Design e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e na janela que abrir cole o segundo código.
Salve as alterações e veja que o menu está prontinho para ser configurado.
Vamos a isso, agora?
Configurando o menu
Onde deixei marcado em capslock no primeiro código são as áreas editáveis do menu. Você pode alterar cores, fontes, tipos de borda, etc.
Leia com atenção, é bem simples e fácil.
Agora aprenda como inserir os links nas abas:
Este menu funciona à base de links, sejam eles internos, externos, de marcadores ou de páginas estáticas.
Vamos supor que você queira colocar em uma das abas as principais categorias de seu blog.
Então você vai ao seu blog, e define quais categorias quer no menu.
Se fosse no meu eu colocaria assim:
<li><a href="#">Categorias do blog</a>
<ul>
<li><a href="http://www.elainegaspareto.com/search/label/Dicas%20para%20blogs">Dicas para blogs </a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Trabalhos%20realizados">Trabalhos realizados</a></li>
<li><a href="http://www.elainegaspareto.com/p/todas-as-cronicas.html">Crônicas</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/receitas%20daqui%20de%20casa">Receitas </a>
</li> <li><a href="http://www.elainegaspareto.com/search/label/Dicas%20da%20Elaine">Dicas da Elaine </a></li>
</ul>
</li>
Entendeu como preencher as abas?
Caso queira acrescentar mais abas em cada casa basta incluir esse trecho
<li><a href="SEU LINK AQUI">NOME DA CASA 5 </a></li>
antes do fechamento da div, ou seja, antes de
</ul>
</li>
Se quiser menos casas basta apagar as que não quer.
Se quiser mais uma aba simples basta repetir a última aba:
<li><a href="SEU LINK AQUI">NOME DA CASA 5 </a></li>Antes do fechamento da div </ul>
Leia com atenção e faça antes em um blog de testes, tá?
Para copiar todos os códigos pare o mouse sobre eles e clique no primeiro ícone que aparecer. Abrirá uma janela com o código livre para ser copiado.
Conheça a web-série Como personalizar o blog
- Como criar um blog: criação da conta Google e criação do blog
- Trocar o plano de fundo do blog e alterar largura e disposição das colunas;
- Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
- Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
- Criar um menu com abas abaixo do cabeçalho e inserir links nele;
- Inserir assinatura personalizada;
- Colocar Voltar ao topo com efeito deslizante;
- Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
- Data dos posts em formato calendário
- Número de comentários dentro de um balão
Aqui está uma coisa que eu gosto de ver nos blogues mas que nunca arriscaria a tentar pôr no meu.
ResponderExcluirEu nem sei como fazer uma cópia do blogue para o caso de algum dia ele desaparecer.
Um abraço e uma boa semana
Elvira,
ExcluirComo a Elaine já explicou, estando no Blogger, clique no nome do seu Blog, em seguida é só clicar em "Modelo" que fica do lado esquerdo, na próxima página que se abrir, ao lado direito acima, clique em Fazer Backup/Restaurar, se abrirá uma janelinha. Clique em Fazer download completo e está feito!
Abraços
Com certeza é um tutorial muito desejado por vários blogueiros (quando a gente consegue colocar marcadores em todos os posts, facilita muito a busca pelos assuntos no blog, e até pra gente ter uma noção do que já postou relacionado a determinados assuntos), e esse tipo de menu, é bem legal porque dá pra dividir um marcador em sub grupos...como colocar 'alimentação' e dividir as abas em , sei lá...'comida saudável', 'doces' :)
ResponderExcluirE realmente tem que ser muito generosa pra disponibilizar esse tipo de tutorial, que não é nada fácil encontrar, ainda mais quando se trabalha com isso, com construção de blogs/sites.
Eu só posso dizer muito obrigada Elaine por compartilhar.
Oi, Elaine! Tutorial mais uma vez completo, com certeza, que pede disponibilidade de tempo e paciência para fazer a formatação certinha. Adorei a dica...o meu faço no flashvortex, mas o procedimento é bem parecido. Um abraço!
ResponderExcluirE como fazer um menu igualzinho ao seu? Com abas, sub-abas e abas mas sub-abas? Ou seja, três níveis de abas! Obrigado!
ResponderExcluirMenina, agora você falou "grego" rsrsrsr
ResponderExcluirDifícil demais, só porque tem quie mexer no HTML, o que eu ainda não me atrevi.
Quem sabe um dia você faz para mim?
Beijos querida.
Olá Elaine muito legal seu blog com ótimo conteúdo gostaria de lhe dar os parabéns e desejar sucesso aqui no seu espaço e que DEUS ilumine ricamente e abundantemente sua vida e de seus familiares
ResponderExcluirUm grande abraço
Elaine...
ResponderExcluirmuito bem explicadinho, mas te confesso eu sem você jamais teria um desses em meu blog, rs...
Tico e teco num acompanha não menina...
Beijos e Beijocas...
o meu deu certinho,parabéns Eliane
ExcluirEssa de primeiro testa em outro blog eu já aprendi! eu juro! rsrsrsrs
ResponderExcluirParabéns pelo Tutu Elaine!
Como sempre trazendo informação na medida certinha!
bjos no coração querida!
Que Deus lhe abençoe cada dia mais e mais!
Eliane que belo tutorial. Dia desses, pesquisei sobre isso, mas não encontrei assim, tão bem explicado. Obrigada. E a propósito, agradeço também sua solidariedade expressa lá no blog quanto aos plágios que andam por aí. Na verdade, pessoas como você, que dividem com carinho e desprendimento seu saber, não dão em árvore... Por isso, faço questão de parabenizá-la pelo trabalho mais uma vez e agradecê-la por tudo.
ResponderExcluirEliane que belo tutorial. Dia desses, pesquisei sobre isso, mas não encontrei assim, tão bem explicado. Obrigada. E a propósito, agradeço também sua solidariedade expressa lá no blog quanto aos plágios que andam por aí. Na verdade, pessoas como você, que dividem com carinho e desprendimento seu saber, não dão em árvore... Por isso, faço questão de parabenizá-la pelo trabalho mais uma vez e agradecê-la por tudo.
ResponderExcluirOi querida!
ResponderExcluirEu adoro esse menu. Acho lindo e chique!
E você, mais uma vez, deu uma aula perfeita! Obrigada!
Espero que esteja tudo bem por aí! Vocês continuam em minhas preces e no meu pensamento!
Beijinhos,
Cris
Essa indireta do menu foi pra mim... hehehe
ResponderExcluirSerio Elaine, agora aprendi...
Bj e parabens pelo tutu!
Obrigada Elaine. Graças ao vídeo que me mandou, criei cópias de todos os meus blogues.
ResponderExcluirTambém fiz um blogue de testes para ver se conseguia esta história das abas, mas não fui capaz. Sempre diz que há um erro na linha 2 que não permite ver a pré visualização e por consequência também não guarda o modelo. De qualquer modo o que aprendi já foi de grande ajuda.
Um abraço e Deus a abençoe
Oi Elaine td bem?
ResponderExcluirPreciso muito da sua ajuda rsrsr
td que fiz no meu blog até hj eu aprendi com vc, mas como sou muito inexperiente
não sei como fazer quase nada, por exemplo como colocar borda... tipo separando as postagem dos gadget. por favor me ajuda!!!
Sou muito sua fan bjsss desde ja agradeço
Roberta, assim que possível vou postar sobre isso.
ExcluirObrigada pela dica.
beijossss
Oi Elaine,
ResponderExcluirAgora fiquei assustada. Sempre faço download do meu blog (template e postagens) mas nunca precisei usar. Hoje, pra tentar inserir o dropdown que você está ensinando aqui, criei um blog para testes como você aconselha, e fiz upload do backup pra brincar nele. Mas fica tudo diferente, achei que eu teria o template igualzinho ao blog ativo (com exceção das configurações ligadas ao endereço do blog). Terei que ajustar tudo manualmente de novo? Se acontecer uma tragédia e eu perder o meu blog (bato na madeira três vezes), é assim que acontece?
Estou ansiosa pra inserir a dica deste post no meu blog e vai demorar tanto pra acertar tudo no blog de testes... Adoro suas dicas, já instalei e uso várias.
Beijos
Patrícia, quando fazemos o backup do blog ele salva o modelo apenas, e isso não inclui os gadgets.
ExcluirSe fizer o backup do conteúdo ele salva os posts e os comentários. Mas os gadgets não.
Então eu sempre recomendo que gadgets mais importantes sejam salvos em blog de testes.
E sim, quando reinserimos os template fica tudo bagunçado mesmo, tem que ajeitar manualmente.
Sim, dá trabalho mas vale a pena.
beijossss
Obrigada pela dica Elaine, vou fazer também o backup dos gadgets também. Ainda bem que vi isso agora.
ExcluirEstou com mais uma dúvida aqui. No blog de testes, já consegui inserir direitinho o menu dropdown, mas se eu quiser inserir mais um submenu (adicionando mais um "ul" dentro da "li" "sub aba") teria que alterar outra parte também? Experimentei assim e não funcionou.
Ah, aproveitando o comentário testamento kkkkk, eu gostaria de saber se tem como responder a comentários sem que essa resposta seja contabilizada como mais um comentário. Sabe? A pessoa faz um coment no blog, eu respondo, e o contador indica 2 comentários. Existe como somar só o comentário externo?
Beijos
Olá Elaine,
ResponderExcluirobrigada por compartilhar seu conhecimentos. Criei um blog há poucos dias e já utilizei muitos de seus tutoriais.
Apliquei esse menu e ficou muito lindinho. Mas esse tutorial funciona para menus com 3 níveis como o seu? Nome da casa, sub aba e outra aba depois da sub aba?
Abraços,
Obrigada!
oi querida tudo bem?
ResponderExcluirtodos os tutoriais q vc coloca o cod pra localizar... eles nao existem no meu blog... aff
será q o problema sou eu? sniff
Com muito, muito custo, e muita, muita paciência, estou conseguindo deixar do jeitinho que eu quero <3 http://apenasoutrocaminho.blogspot.com.br/
ResponderExcluirSim, esse é o segredo: paciência.
ExcluirParabéns!!!
Elaine, estou deixando meu menu do jeitinho que eu gostaria, mas tem uma linha tracejada sobre os itens que está me incomodando e não descobri como tirar... Você me ajuda a tirar?
ExcluirOlha lá no blog como está: www.patriciaaprendendo.com
Beijos
Patrícia, o pontilhado é característico de seu template. Para retirar procure em seu código fonte por algo como
Excluirborder-top: dashed
e apague. Isso vai tirar o pontilhado de todos os widgets, tá? Inclusive da sidebar.
beijossss
Oi Elaine, tudo bem? Quando aperto ctrl + F pra procurar não acha nem /*tabs e nem ]]> o que faço? Obrigada
ResponderExcluirNicole, caso seu template seja modificado os códigos podem estar diferentes.
ExcluirNesse caso pode colar o que precisa dentro da folha de estilos.
Mas no caso de seu template eu achei de primeira, bem facinho.
Procure de novo, está lá, tenho certeza.
Lembre que Ctrl+F tem que ser teclado dentro da caixa de código, na barra de pesquisa que abrir, tá?
bjssss
Olá Elaine ! Tb não sou capaz de fazer isso tudo kkkk mas vou me esforçar pra aprender algo aqui com seus ensinamentos pra tentar melhorar meu blog.... mas já te mandei um e-mail hj... preciso dos seus serviços !!!!! kkkkkk bjao
ResponderExcluirLaura
Eliane, me ajuda por favor. Eu queria subir um pouco o menu, porém já alterei vários numeros e não sobe de jeito nenhum :/
ResponderExcluirNatalia, depende de qual template está usando. Em geral esse menu vai ocupar a área que era do menu de links, caso esteja usando um dos templates do Blogger.
ExcluirAcho que não dá pra subir...
Como faço para fazer uma sub-aba dentro de outra sub-aba? Como tem aqui no seu blog na aba "Saiba Mais" e "no Blog Tem"?
ResponderExcluirMia, esse menu não aceita multiníveis...
Excluirboa noite eliane, consegui colocar seu selo na minha pagina, hoje, pode visitar o blog. rosebockminhavidaapos50
ResponderExcluirnão consegui ainda colocar as saudações e nem o menu horizontal. gratidão pela ajuda. muita luz divina!
Eu praticamente fiz um novo blog com tanta dica boa que tem aqui. Mas essa das abinhas é sensacional, deixou meu blog muuuuuito mais prático. Segui passo à passo suas orientações, nunca tinha mexido no HTML (na verdade, nem sabia o que era isso), mas, depois de vários testes em outro blog, eu consegui. MUUUUUUUUUUITO OBRIGADAAA!
ResponderExcluirNão consigo procurar o termo : /* Tabs.
ResponderExcluirSempre que procuro por ele a barra de escrita torna para a caixa do HTML. :(
Logo quando dou ENTER, oque faz é mover os códigos do HTML.
HELP!!!
Olá Sofia, também tive o mesmo problema! Retire o espaço antes do /. Então vc encontrará. Continuo não conseguindo finalizar, pois está aparecendo tudo misturado no menu... e não bonitinho, no post da Elaine.
ExcluirSofia, se seu template for externo ao Blogger ele não terá esse trecho.
ExcluirNesse caso cole o código dentro da folha de estilos, conforme explico no texto.
beijos
Elaine, percebi que o erro está no momento de copiar o HTML para o blogno GADGET, ele acaba alterando, por que acontece isso?
ResponderExcluirNão sei, realmente não faço ideia, desculpe...
ExcluirOi, como eu mudo a cor dos menus pq a cor que tinha não ficou boa no meu blog o que eu faço?
ResponderExcluirNão tinha prestado atenção direito e nem entendido muito mas agora eu entendi muito obrigada!
ResponderExcluirnão consegui quanto faço fica com omenu mas mais desorganizado do q tudo acesse para ver melhor
ResponderExcluirblogdetestedeeduardopereira.blogspot.com.br
Não consegui =( As subabas ocupam o local de Abas
ResponderExcluirElaine, super Guru dos Blogs, eu até consegui fazer as abas/subabas
ResponderExcluirMinha dúvida é importar os posts para as devidas abas.... não consegui achar tutorial aqui...
Eliane, desculpe, olhei com mais atenção e achei....Obrigada!
ExcluirTenho estudado nas horas vagas, em meio a carrinhos, fraldas e peito...rs
Se quiser conhecer meu mundinho http://www.namorarsempre.com
Mas as inovações estão no blog test... progredindo!!
Bj e mais uma vez obrigada!!
Oii, muito obrigada por essas dicas tão preciosas... mas deixa eu tirar uma duvida, depois que coloco o menu, como coloco as postagens num menu, ou submenu determinado? obrigada :D
ResponderExcluirnao consigo copiar
ResponderExcluirMuito Bom mesmo seu Tutorial, mas aconteceu um probleminha e queria saber se vc consegue me ajudar, as SUB-ABAS não ficaram escondidas...o que será que está acontecendo...?
ResponderExcluirEu revisei o código, o segundo.
Excluirente de ovo, acredito que dará certo.
bjssss
Alguém me ajuda não to conseguindo colocar no meu blog não, alguém me ajuda
ResponderExcluirSegui seu tutorial: Show de bola. Funcionou tudo direitinho! Obrigado por compartilhar seu conhecimento. Gostaria de saber como faço para mudar a cor do menu dropdown.
ResponderExcluirAbraço!
Nossa amei!! O melhor post para menu! Só não segui mudar HOME para Inicio.. mudei o nome no código e salvei mas continua como HOME, poderia me ajudar?
ResponderExcluirObrigada!
Já consegui!! Muito obrigada!
ResponderExcluirBoa tarde Elaine!
ResponderExcluirConsegui colocar o menu dropdown direitinho como você explicou, mas eu queria criar mais uma aba da sub aba. Por exemplo, no seu blog tem o menu 1 "Dicas para blogs" - 2 "dicas específicas sobre:"2.1 "comentários" 2.2 "recursos e truques"....
Eu não estou conseguindo criar um submenu do submenu. Tem como você men mandar o código?
Abraços
O meu não fica no topo do blogger, ele fica na coluna da direita, meu blog tem 2 colunas, como que faço pra ajeitar ? Abraços seus tutorias são excelentes !
ResponderExcluirBreno, para que fique abaixo do cabeçalho precisa arrastar o menu para lá, onde deseja que fique,
ExcluirE não esqueça de salvar depois de arrastar.
bjssss
Parabéns! Seu blog é ótimo. Conseguimos, finalmente, colocar o nosso menu dropdonw com suas excelentes dicas.
ResponderExcluirÉ possível no menu dropdown colocar um link que mostre todos os posts de um marcador? Pois não queremos colocar muitas sub-abas numa mesma casa do menu. Se possível nos ajude.
Desde já agradecemos.
Para colocar os posts de um mesmo marcador basta copiar o link do marcador em questão e no campo Link do menu colar esse link.
ExcluirCertinho?
bjssss
Consegui fazer o menu dropdown e o fixo, mas como posso fazer o meu menu ficar como dropdown e fixo no topo?
ResponderExcluirAgradeço desde já!
Parabéns pelo blog!
Maxwel, esse menu não tem essa função.
ExcluirSeria preciso outro código, que no momento ainda não postei.
Mas fica a dica, assim que possível eu farei.
Muito obrigada pelo elogio!
eu consegui fazer tudo, mas a aba fica transparente e só as sub abas com a cor rosa no fundo, como faço pra alterar?
ResponderExcluirExperimente mudar a posição do menu, pode ser isso...
ExcluirAdorei esse tutorial, fica muito bom e deixa o blog mais fácil de acessar para os leitores :D
ResponderExcluirEu consegui fazer com que esse menu ficasse fixo no topo do blog mas eu gostaria de colocar uma caixa de pesquisa junto. Você sabe como posso fazer isso?
:D
Mayara, experimente usar este tutorial:
Excluirhttp://ciudadblogger.com/2012/04/menu-horizontal-con-subpestanas-y.html
No final do primeiro código tem esse trecho que começa com #search
E para o html tem o trecho que começa com <form action
São eles que fazem o menu ter a caixa de busca.
Espero que ajude...
bjssss
Consegui \o/.
ExcluirMuito obrigada pela ajuda, seu blog tem me ajudado muito :D
bjo
Depois de criar uma aba ''Entrevistas'' por exemplo, todas as postagens sobre entrevistas eu tenho que posta nessa aba?
ResponderExcluireu estou criando um blog de games queria saber como colocar uma aba dentro de uma sub aba exp:games para download>luta>mortal kombat, steet fight para não ter que adicionar muitas abas no menu?
ResponderExcluirNão to conseguindo editar as cores, texto, etc. Pode me ajudar? A cor do plano de fundo não altera, a fonte de texto, entre outras coisas.
ResponderExcluirElaine com é que eu coloco varios links em uma sub aba?
ResponderExcluirElaine, bom dia!
ResponderExcluirPrimeiramente parabéns pelo excelente trabalho!
Meu menu está pronto, porém eu não estou conseguindo posicioná-lo, no meu caso preciso dele á esquerda.
Qual a linha de códigos para essa configuração?
Grato desde já!
Oi, seu blog foi o único que explicou tudo completinho e consegui entender tudo. Mas no final o meu menu ficou ao lado e nao em cima como ficou no seu blog teste. O que eu fiz de errado ?
ResponderExcluirBoa tarde Elaine, quero agradecer imensamente por compartilhar seus conhecimentos. Há algum tempo planejava criar meu blogue, e esperei minhas ferias para começa-lo, quando encontrei seu blog e suas explicações não parei mais. OBRIGADO, você me ajudou e me inspirou muito. bjs no seu coração....
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOi Elaine! Adorei seu tutorial, super explicadinho! Quebrei a cabeça e consegui. O único problema é que ele fica transparente. Eu já tentei de tudo, inclusive mudar de local como você falou para alguém em um outro comentário, mas não funcionou... Será que você teria alguma luz para o meu 'problema'?
ResponderExcluirDesde já, obrigada!
Oi Elaine! Não é mais necessário. Fui fuçando e descobri que tem que colar o primeiro código devidamente alterado em "Personalizar", "Avançado" e depois "Adicionar CSS". Obrigada! :)
ResponderExcluirOlá Elaine,
ResponderExcluirdeu o maior trabalhão, foram muitos links para adicionar =D
Creio que com o tempo terei que tirar, pois as sub abas ficarão enormes.
Deixo meu muito obrigado e um beijo,
A Casa da Mãe Jana
Ola querida mais uma vez estou aqui, te enchendo de comentários, mas o que foi....é que alem de te seguir eu virei sua fã....rs
ResponderExcluirE como eu amo este mundo de blogueira, eu estou de estudando muito para fazer com que meu blog fique lindo e fofo.
E as suas dicas são de suma relevância para mim.
Tem dias que fica até as 2 da madruga lendo, estudando e aprendendo com você!
E POR ISSO... venho lhe agradecer por mais uma vez...obrigada!
Ah, que fofa você!
ExcluirPode comentar, amo comentários!!!
E saiba que eu também passo madrugadas estudando, blog é algo que quanto mais a gente aprende mais percebe que tem pra aprender...
beijossss
Elaine, adoooooooooorei! Vou tentar colocar hoje no meu blog. Mas te falar, esse é aquele menu que fica fixo no topo? Se não for, como faz pra deixar ele fixo no topo igual aquele outro que você mostrou aqui ?
ResponderExcluirBeijoo
Elaine , eu consegui... levei mais de 4 horas pra fazer ficar bonitinho como eu queria no blog de teste....
ResponderExcluirVeja: ♥♥♥ Teste♥♥♥
e Dai mudei para meu blog de Literatura: ♥♥♥ Amantes de Jane Austen ♥♥♥
e depois para meus blog de arteanato: ♥♥♥ Ateliê Arte e Carinho ♥♥♥
Veja o que voce acha.... Muito obrigada pelos tutoriais... Seu blog já está no meu Hall de Blogs de dicas de Personalização.
Por favor,me responde. Eu quero um desse jeito só que eu quero que role com a pagina,tipo o seu. Pf
ResponderExcluirLetícya, esse menu que eu uso ão tem tutorial no blog mas está à venda em minha loja vurtual.
ExcluirAqui:
http://loja.elainegaspareto.com/2015/02/menu-dropdown-multinivel.html
beijos
Oi.
ResponderExcluirEu gostava de saber como centralizar este menu.
Fiz e ficou como eu queria, só falta estar centrado.
Obrigada
Ângela, ele precisa de mais abas para centralizar, experimente inserir mais abas e ele fica melhor.
Excluirbjsss
ok obrigada :)
ExcluirOlá! Seu blog é maravilhoso! Tem me ajudado bastante. Consegui por o menu dropdown no meu blog. O meu problema são os links. Como é que faço para quando clicar numa casa esta seja redireccionada para uma pagina sobre algo especifico? Por exemplo, quando clicar na casa chamada "Beleza" esta ser redireccionada para todos os meus posts sobre beleza. Tenho que inventar um link onde diz "cole aqui o seu link" ?
ResponderExcluirJoana, releia o tutorial, tem uma parte onde explico como inserir links nas abas.
Excluirbeijosss
Ficou legal, mas tem como mudar a cor de quando passa o mouse? Pq ele fica rosa e eu queria outra cor pra combinar com o blog
ResponderExcluirBom dia!
ResponderExcluirGostaria que me ajuda-se, como faço par criar uma aba dentro da sub aba?
Desde já agradeço.
Ademacen, nesse menu não há como inserir multiniveis.
ExcluirTeria que ser outro código, outro menu.
Att.
Oi, Elaine!Desculpe incomodar, mas não acho esse tutorial em nenhum lugar!Como é que eu consigo deixar esse menu fixo?Obrigada ♥
ResponderExcluirOii, Elaine, tudo bem?
ResponderExcluirGostaria de colocar esse menu no meu blog. Mas gostaria que as sub abas dessem para um conjunto de postagens. Por exemplo: A aba principal eu colocaria como MIX e sub abas nela como TAGS, DECORAÇÃO e RECEITAS. Mas gostaria que quando alguém clicasse na sub aba TAG fosse direcionado para uma página com todas as TAGs respondidas. Como fazer isso?
Obrigada.
Olá Eliane, obrigado pelas dicas, elas tem sido muito úteis!
ResponderExcluircomo eu faço pra alterara a cor desse menu?
abraço!
OI como eu faço para tirar uma parte dele que fico sem nada
ResponderExcluirOla, boa noite...
ResponderExcluirAchei fenomenal seu blog e seus tutoriais. Parabens!
Esse menu é fenomenal, porém gostei mais ainda desse menu deslizante do seu blog...
andei pesquisando na internet e achei outros modelos parecidos em outros tutoriais, porem nenhum tao bem explicado como os seus tutoriais, alias, sem nenhuma explicaçao de como inserir no blog...
http://www.1stwebdesigner.com/create-stay-on-top-menu-css3-jquery/ e http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/
São dois modelos parecidos com o modelo que voce usa.... como faço pra inserir o primeiro no blog?
Que tal um tutorial? Acho que todos vão gostar....
Mil beijos e obrigado por tantos tutoriais maravilhosos.
Elaine, primeiro que tudo muito obrigada pelos seus tuturiais, tem me ajudado muuuuiiittooo!
ResponderExcluirQueria perguntar se já tem tuturial de como colocar esse menu Dropdown fixo no topo, ja tentei um monte deles mas nenhum fica bom.
Beijos e mais uma vez, muito obrigada pelos tuturiais!
como faço pras sub abas rem pra direita e na pra baixo??
ResponderExcluirOi Elaine, tudo bem?
ResponderExcluirGostaria de saber como deixar a fonte na cor preta, porque já tentei mexer em tudo e só fica branca...
Obrigada :)
Troque onde está marcado no código, troque #fff pelo código da cor que deseja, no caso #000
Excluirbjssss
Bom dia Elaine, queria que me tirasse uma duvida?
ResponderExcluireu usei o menu, mas não sei mudar a posição dele, está muito a direita ->, queria trazer mais para a esquerda <-
o que devo alterar no codigo?
Você já experimentou mudar a posição dele no layout?
ExcluirDependendo do template o local para colocar pode mudar...
Boa noite,ficou bom mas é diferente desse que vc esta usando acima,vc poderia me passar esse aí em cima,desde já no aguardo.
ResponderExcluirLobo, esse que eu uso não está disponível nos meus tutoriais.
ExcluirAtenciosamente
Muito interessante, era exatamente o que eu procurava, mas sou um pouco leigo no assunto por isso não estou me dando bem em configurar a aparência do menu Queria o fundo preto com as letras brancas e ao ser selecionado, que ficasse em azul, logo em seguida abrir o sub menu em fundo preto e letra branca.
ResponderExcluirMas a sua ajuda foi dada, basta agora eu me esforçar pra tentar entender.
Muitíssimo obrigado, seu blog é genial. Abraços, Elaine.
ELaine me ajuda por favor eu fiz tudo o que me disse aí mas não deu certo, eu preciso que fiquem 7 Guias e 4 subguias em cada guia no meu blog mas deu errado, as guias não aparecem todas e quando aparecem tem menos subguias do que preciso, geralmente apenas 2 porquÊ?
ResponderExcluirSegue meu log code de como está a estrutura do código.
http://www105.zippyshare.com/v/jBXB6c1S/file.html
[ Coloquei em download o arquivo TXT para não floodar seu blog]
e meu blog > http://xbox360classics.blogspot.com.br/
Oi Elaine! Obrigada pelo tutorial. Muito bom!!!
ResponderExcluirEu consegui fazer o menu seguindo seu tutorial, mas diferente de como ficou no seu demonstrativo, o menu no meu desce junto com o página... por que? Como faço pra ele ficar quietinho lá em cima?
Bruh, você confundiu os menus.
ExcluirEsse é o que aparece abaixo do nome do blog.
O que fica fixo no topo é outro, procure aqui no blog por menu fixo no topo do blog.
bjssss
Eu vi esse outro menu..mas ele não tem as sub abas ou sub menus. estou a procura de um que seja fixo,mas com sub menus,igual à esse que fica no topo do seu blog..
ExcluirOi Elaine, tudo bom?
ResponderExcluirTem como retirar as linhasinhas que separa cada nome?
Obrigada (-:
Ingrid, procure no código o trecho que define as bordas e apague-o.
Excluirbjsss
Uma delicia Eliane, estou a conseguir sem qualquer dificuldade, apenas tem um senão, não é deslizante :(
ResponderExcluirOu seja
Se a meio de uma visita o visitante quiser mudar de aba, tem que regressar ao topo o que é incómodo. Tem cura para isso?
Grata desde já
Esse menu não é fixo no topo...
ExcluirMas tem um que é, procure por Menu fixo no topo :)
beijosss
Olá Elaine. Tudo bom? Tenho uma dúvida. E como coloco o menu do blog para funcionar no modo mobile também? Tenho um modelo responsivo, porem no celular não aparece o menu. Tem como me ajudar? Grato dede já! Beijoos!!!
ResponderExcluirMuito obrigado pelas dicas.
ResponderExcluirFuncionou direitinho.
Beijão.
Nossa, eu nem sei como agradecer a esse post tão maravilhoso que deixou meu blog lindo demais e do jeitinho que eu queria!
ResponderExcluirmichellemourablog.blogspot.com
Boa tarde. Este tutorial ajudou-me imenso mas gostaria de saber como posso centrar o menu, tenho apenas 5 "casas" e gostaria que ficassem centradas e não à direita. Será que dava para explicar? Obrigada
ResponderExcluirhttp://batomebotasdatropa.blogspot.pt/
Catarina, esse menu, para centralizar, precisa mudar os valores em widht.
ExcluirPara acrescentar casas basta repetir o trecho que define as abas, colocando-o antes de fechar a div do final do menu.
bjssss
Como fazer as páginas aparecerem?
ResponderExcluirContinua dizendo que a página não existe, como resolver o problema?
ResponderExcluirReleia o tutorial, a informação que você precisa está nele.
ExcluirOla,
ResponderExcluirGostei muito da dica mas estou tendo dificuldades em centralizar o menu de acordo com o cabeçalho, ele fica um pouquinho a direita e nao na margem a esquerda, poderia me ajudar? tbm gostaria de saber como mudar o tamanho e o tipo da fonte para Open Sans.. eu mudo no codigo mas nao muda no menu. Segue se puder dar uma olhada.
http://assistirgameofthronesonlinehd.blogspot.com.br/
Eu olhei e pra mim a fonte aparece correta, open sans.
ExcluirSobre o posicionamento experimente ir alterando os valores em padding.
Aí não tem jeito, é mexer até achar onde mudar, tentativa e erro até conseguir.
Sim, dá trabalho mas com paciência vai dar certo...
Elaine por favor me da uma ajudinha?!
ResponderExcluirÉ possível colocar mais de uma postagem dentro de uma sub-aba?
ex:
*CABELOS*
-CORTES
-TENDÊNCIAS
-PENTEADOS
consigo colocar mais de um link de postagem dentro de "TENDENCIAS" por exemplo?!
Desde já gradeço!!!
beijo grande Querida!!!
Thaisa você não deve lincar a postagem e sim o link do marcador. Ex: Clica no marcador TENDENCIAS e copia o link dele para o menu. Assim, toda vez que você postar com esse marcador ele puxa direto.
ExcluirOi Elaine. Parabéns de verdade pelo trabalho que realiza aqui ;)
ResponderExcluirAdorei o tutorial e até agora está indo tudo bem. Fiquei com uma pequena dúvida: Como faço para deixar os nomes do menu e submenu em negrito?
Beijos e obrigado
Dafne, onde está font-weight: none substitua none por bold.
Excluirbjssss
Oi Elaine, muito obrigado pelo tutorial, me ajudou e muito. Mas eu gostaria de saber, caso eu queira colocar no topo do blog como um menu fixo o que eu devo fazer?
ResponderExcluirOi!
ExcluirFaz assim: coloque positin: fixed;
abaixo de #NavbarMenu {
E o segundo código, ao invés de colocar como gadget HTML cole direto no código fonte acima de ou abaixo de < body >
OI Elaine adorei seu menu, ajudou muito mais eu queria saber como coloco o meu menu centralizada, pois ficou alinhado a direita obrigado.
ResponderExcluirOlha, pra alterar o alinhamento você precisa mexer nos valores de padding e margin.
ExcluirNão tem como ensinar porque isso vai variar de acordo com a largura de cada template, tem que ir mexendo até ajustar como deseja...
elaine! eu consegui, mas fica mostrando "Mostrando postagens com marcador blog" - tem como tirar isso? obrigada desde ja :)
ResponderExcluirSim, tem sim.
ExcluirVeja:
http://www.elainegaspareto.com/2017/08/truques-para-personalizar-blog.html
Ei Elaine! Adoro as suas dicas e sempre uso em meu blog. Não entendo nada desse mundo e vc já me ajudou bastante! Instalei um de seus menus e gostaria de saber se é possível acrescentar mais sub abas dentro das sub abas rssrs entnedeu? (tipo, tem 3 partes e queria uma quarta). Não queria instalar outro menu, queria apenas acrescentar no que já tenho. Desde já obrigada!!!
ResponderExcluirAislana, infelizmente não é possível.
ExcluirO que você precisaria seria de um menu com mais níveis e não dá pra fazer isso nesse... infelizmente.
Oi, muito obrigada pelo tutorial! Já tentei várias vezes, mas com o seu finalmente consegui. Só fiquei com uma dúvida: o meu menu fica mais para à esquerda e, como não tenho tantas guias, fica sobrando um espaço vazio. Como faço para sumir com o espaço e centralizar?
ResponderExcluirIsabella, centralizar não, mas pra diminuir o espaço que sobra localize no primeiro código esse trecho: padding: 9px 15px 8px;
ExcluirEle se repete 2 vezes.
Em ambas as vezes altere o valor 15px para mais.
Quanto mais aumentar menos espaço sobrará.
Não consegui encontrar nenhum código informado. Acho que o meu template é de outro planeta. O template que estou usado é esse: MagOne Blogger Template Free Version.
ResponderExcluirEstou querendo um menu com sub-menu e um sub-menu do sub-menu, ou seja, três níveis.
Por exemplo:
FILMES
COMÉDIA
DUBLADO
LEGENDADO