Todos os templates do Designer de Modelo do Blogger possuem em sua configuração um menu simples, de links ou de páginas.
Esse menu é assim, veja no print de um dos modelos Travel:
O menu funciona mas é bem simples.
Então hoje vou ensinar 2 personalizações diferentes, que funcionam em todos os modelos do Design de Modelo, menos os de Visualização dinâmica.
Vamos aprender?
Antes de mais nada edite a navbar do blog escolhendo a opção Desativado.
Vá em Layout/Navbar e faça a alteração.
Depois você precisa ter o menu instalado em seu blog.
Para isso clique em Layout, e a seguir clique em Adicionar um gadget.
Escolha a opção Páginas.
Caso você tenha páginas já criadas em seu blog elas aparecerão ao escolher essa opção de gadget.
E recentemente o Blogger adicionou uma nova funcionalidade ao gadget Páginas, que é a possibilidade de incluir nele links externos, não somente as páginas estáticas.
Veja o print:
Então dá pra ter um menu legal apenas personalizando o que já existe no blog, não é incrível?
Personalizar o menu de páginas do Blogger - Modelo acima do cabeçalho
A seguir clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que expandir digite /* Tabs e tecle Enter para localizar.
Substitua tudo o que estiver contido nessa classe, entre /* Tabs e /* Headings por este código:
Veja o print:
Depois de substituir salve as alterações.
Se tudo deu certo o seu menu estará agora acima do cabeçalho, no topo, ocupando 100% da largura do blog e com o texto centralizado.
Para alterar cores e fontes vá ao seu painel, clique em Modelo/Personalizar e a seguir na opção Avançado selecione trabalhar a opção Plano de fundo das guias e Texto das guias.
Importante:
Como você vê ele ficará no topo, acima do cabeçalho, mas não ficará fixo, ok? Ele rolará com a página.
Se desejar um menu fixo no topo do blog leia este tutorial:
Menu horizontal fixo no topo do blog com ícones de redes sociais
Personalizar o menu de páginas do Blogger - Modelo com abas separadas e com efeito
Assim:
Para ter essa versão proceda exatamente como expliquei em relação ao outro modelo.
Mas na hora de substituir o código no template use este:
- Faça sempre essas experiências em um blog de testes e só faça em seu blog depois de dominar completamente;
- Caso seu blog use um template modificado esse tutorial não se aplica;
- Caso você já tenha feito alterações no código original do menu do Blogger precisará substituir as alterações antigas pelas novas;
- Esse tutorial só funciona para o menu nativo do Blogger;
- Aqui tem um monte de menus que já ensinei caso prefira um mais elaborado.
Caso você queira ter em seu blog mas não consiga sozinho ou não tenha tempo e paciência para fazer entre em contato comigo e combinamos o valor, eu deixo prontinho em seu blog por um preço super acessível!
Gostou?
Que tal compartilhar o tutorial, ou curtir... ou recomendar no G+...
Óooooootima explicacao! Adorei demais! Vou tentar fazer no meu, mas acho que não vai funcionar, porque meu blog é de template diferente dos do blogger. Enfim.. Tentarei.
ResponderExcluirwww.penseicerto.blogspot.com
ÊEEBAAAAAAAA era tudo que eu tava precisando!!!!!! Muito muito obrigada Elaine que Deus abençoe você com muita saúde e disposição para alegrar nossas vidas com esses tutoriais maravilhosos!!!
ResponderExcluirMUITO FELIZZZZZZZZZ!!
Adorei! Obrigado por essas dicas.
ResponderExcluirElaine!!! Você é muito TOP!! Eu olho seus post há um tempo, e na verdade antes, quando eu preciso de ajuda para personalizar meu template e pesuisava no Google, seu site sempre aparecia lá. =)
ResponderExcluirAgora nem pesquiso mais no Google, aqui eu encontro tuuudoo! Você é ninja, kkkkk.
Oi Elaine!Gosto muito das suas dicas, mas como eu não entendo nada destes termos,fico com medo de mexer e perder o blog.Beijo
ResponderExcluirOlá Elaine!! Blogueira iniciante vem aqui, viu!! Adorando suas dicas, suas ideias, bem bacana mesmo!!
ResponderExcluirPara mim deu certo, apenas fiquei com uma dúvida, como relaciono as minhas páginas (links) fixas com o conteúdo que já tenho no blog ?!
Oi elaine, queria fazer um menu igual a esse atual do blog. Abaixo do cabeçalho mas que rola com a barra. Poderia explicar? Obrigada
ResponderExcluirElaine o meu ficou fixo!!! como faz para ele não ficar fixo...estou confusa...quero que suma quando eu rolo a pagina para baixo...não quero que o menu venha junto!!
ResponderExcluirAcredito que seja porque seu template já é modificado e já possui o código de um outro menu, este sim, fixo.
ExcluirTeria que retirar o código antigo para que o novo possa funcionar.
beijos
Olá !!
ResponderExcluirEu ameii coloquei no meu blog e deu super certo, só ajustei as larguras para ficar mais fininho hahaha :D
eu simplesmente amei Obrigada !!
Blog Mulher de Salto Fino
Absolutamente tudo o que eu estava precisando e procurando códigos à séculos. Obrigada Elaine, e parabéns pelo trabalho!
ResponderExcluirElaine, estou procurando pelo Ctrl+F o Tabs e o Heading, mas nunca encontro. Já conferi se fui no lugar certo ou se errei alguma coisa, mas não vai D:
ResponderExcluirOi Elayne! Elayne, como que faz se eu tiver dois gadgets de página e quiser que apenas um fique lá em cima centralizado?
ResponderExcluirElaine, eu não consigo encontrar o /* Tabs e o Heading, me ajuda linda !!
ResponderExcluirEu gostei do primeiro menu mas fico um quadrado muito grande como eu diminuo?
ResponderExcluirensina como colocar categorias personalizada no blog?
ResponderExcluirValeu , me ajudou muito Grande abraço :D vou deixar aqui meu blog http://goodfakeoficial.blogspot.com.br/
ResponderExcluirOpa, foi de grande ajuda para meu novo blog
ResponderExcluirinjecaocerebral.blogspot.com
Adorei as dicas..consegui aplica-las de um modo bem bacana no meu blog. parabens. ja adicionei sua pagina aos meus favoritos
ResponderExcluirComo posso alterar a cor do meu modelo 1 ?
ResponderExcluirNão consegui encontrar /*Tabs :(
ResponderExcluirOlá Elaine adorei seus tutoriais, mas estou com um probleminha.
ResponderExcluirCriei a minha barra de menu com paginas de links mas quando coloco uma pagina estática (Contato) os outros links do menu se repetem e desorganizam todo o menu.
Procurei pra ver se achava a solução do problema mas infelizmente não consegui.
Se puder me ajudar, ficarei muito grata :)
Desde já muito Obrigada !!
Elaine, como sempre, seus tutoriais "matadores". Ficou excelente!
ResponderExcluirMuito obrigado. Seu trabalho é 10!
www.mais40bemcuidado.com.br
Oi bom dia Elaine,eu amei suas dicas,mais ainda estou com muita dificuldade em colocar no topo por exemplo;SOBRE,CONTATOS DICAS... E nao consigo ver as respostas a estas perguntas que faço.Agradeço.
ResponderExcluirNilza, nem sempre eu consigo responder tudo, falta tempo, conforme explico no campo acima da área dos comentários.
ExcluirQuando houver resposta ela estará imediatamente abaixo do comentário feito.
Mas repito: faço o possível, mas nem sempre dou conta... desculpe...
Olá, Elaine!
ResponderExcluirAdoro as suas dicas e no meu blog coloquei o menu de páginas no top e a deslizar por toda a página só que agora queria que o menu de páginas ficasse abaixo do cabeçalho e que desliza-se ao longo da página...como faço isso?
Aguardo pela resposta
Beijinhos
Blog / Facebook / Instagram
Funcionou e ficou demais, obrigadaaaaaaa. Adoro seu blog e suas dicas, menina você é demais!
ResponderExcluirOi Elaine! Muito obrigada pela dica!! Tentei mudar a fonte, mas não consegui... como que faz?
ResponderExcluirBianca, você altera em Modelo/Avançados, pelo painel do blog.
ExcluirMuito bom sua explicação, ficou perfeito no meu blog, ficou muito show!!!
ResponderExcluirwhatsappcentral.blogspot.com
como faz para colocar essa mini imagem que fica na aba
ResponderExcluirObrigado pela dica, já estou seguindo.
ResponderExcluirOII criei um blog tambem pode passar lá??
ResponderExcluirtudo na moda chama se você puder passa la e divulga amo vc muito mesmo
Ei Elaine,
ResponderExcluirParabéns, seu conteúdo é maravilhoso, tudo muito bem explicado.
Sigo muitas das suas dicas.
Acabei de incluir esse menu no meu blog e amei!
www.vireimoda.com
como mudar a fonte do menu do blog com o layout gratis da elaine?
ResponderExcluirOi Elaine, esse post foi muito útil pra mim, vou me empenhar mais para melhorar a interface do meu blog.
ResponderExcluirObrigada
bjs
http://myblogcarinaribeiro.blogspot.com.br/
O artigo ficou muito bom, detalhado e eficiente. Parabéns!
ResponderExcluirElaine, este tutorial me ajudou muito, obrigada. Gostaria de saber se tem como colocar a barra de pesquisa junto com o menu no topo.
ResponderExcluirJuliane, no menu de páginas não.
ExcluirMas tem alguns menus no blog, veja se algum dá certo...
De todo modo vou ver se acho um e posto assim que der.
bjsss
Eu também estou buscando isso. E com redes sociais tb. Este menu é perfeito pois nao tem java ;-)
ExcluirObrigadão!
ResponderExcluirOlá, tenho um problema. Meu blogger tem domínio próprio. Quando adiciono link externo diz que a página não existe por causa do DNS. Vi que na imagem colocaste portfólio. (Nome do site) fiz assim e continua igual. Qual o motivo?
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirBlog muito bom. Didático, prático e eficaz.
ResponderExcluirComo consigo diminuir as letras ou espaço entre as páginas? Só consigo colocar 8 páginas e a outra fica em baixo...
ResponderExcluirMaravilhoso. Obrigada!
ResponderExcluirObrigado pelas dicas! Estou tentando fazer um menu com sub-abas deste jeito,mas não estou conseguindo. Tem como através do widget Páginas?
ResponderExcluirObrigada pelas dicas... Conseguir utilizar no meu blog e ficou ótimo.
ResponderExcluirOie!Eu queria dizer q no meu quando eu fui personalizar não apareceu "TABS" não!
ResponderExcluirYina, eu olhei seu blog e tem sim.
ExcluirEstá acima de .tabs-outer {
Todo template nativo do Blogger que não tnha tido essa área modificada tem essa tag.
bjsssss
Olá, Elaine. tudo bem? fui mudar o template do meu blog, fiz os testes e estava tudo certinho, mas quando mudei, o menu não funcionava mais, ela continua lá, mas quando vou clicar, não tem como :/ fiquei bem triste com isso.
ResponderExcluirvocê pode me ajudar com suas dicas?
se quiser dar uma olhada para entender o erro: http://www.recortesemacao.com.br/
Desde já, agradeço.
Lívia, não vai dar certo porque seu template é baixado da internet.
ExcluirSó funciona para os templates nativos do Blogger. Templates do Designer de Modelo, conforme explico no post...
Olá Elaine! Mesmo não conhecendo pessoalmente, digo-lhe que você foi uma benção. Todo o seu Blog, é um verdadeiro MILAGRE. Muito obrigada por partilhar o que sabe conosco. Desejo-lhe tudo de bom...
ResponderExcluirMeu blog melhorou muito primeiramente graças a Deus, e sua ajuda. Realizei muitas das coisas que queria vindo aqui te visitar. Ainda assim tenho uma dúvida.
Se eu retirar minha sidebar original do blog, depois como faço para encontrar onde fazer NOVA POSTAGEM? Perdoe-me a ignorância. rsrsrs ESTE É MEU 1 COMENTÁRIO AQUI; NÃO IREI MAIS https://poesiaseraridades.blogspot.com.br/ESQUECER! BEIJINHOS...
Priscila, boa noite
ExcluirMuito obrigada pela visita e pelo elogio!!!
Se você retirar a navbar, quer dizer?
Se for, ao retira-la você pode entrar no painel do Blogger pelo endereço http://www.blogger.com
Aí, no painel, tem o item Postagens, e ao clicar verá como fazer nova postagem.
Simples e facinho...
Certinho?
beijossss
Obrigado Elaine! Me ajudou muito, se quiserem da uma olhada como ficou meu blogger após eu aplicar a explicação da Elaine: http://boruto-conexao.blogspot.com.br/
ResponderExcluirComo fixar a primeira página do blog. Faço a barra de menus mas a página de abertura nunca é a página principal.
ResponderExcluirOi Elaine! Tudo bem?
ResponderExcluirSeu blog me tem sido muito útil na personalização do meu template! Desculpe o incômodo, mas tive um problema com o modelo 1: ele rola junto com a página e eu gostaria que ele não fizesse isso. Tentei de diversas maneiras e nada deu certo, se puder me responder agradeço!
Gislaine precisa trocar o comando
Excluirposition: relative;
por
position: fixed;
Eu ja tenho um blog com menus de paginas etáticas quero colocar sub menu nele e não consigo
ResponderExcluirOlá, gostei das dicas, mas eu gostaria mesmo é de saber como fazer que nem o teu menu, que a gente passa o cursor em cima e abre uma outra lista de páginas.
ResponderExcluirTem como fazer isso no blog ou é só em site.
Abraços
Fabio, aqui no blog há vários tutoriais que ensinam menus assim.
ExcluirVeja ali no menu, na aba Dicas para blogs, a sub aba Dicas específicas/Menus
Algum com certeza será o que vc precisa.
Atenciosamente
Olá, poderia me ajudar por favor? Baixei um Tamplate seu. Sou Blogueira! Quero editar o menu. não consigo, sou nova no blogger. estou aprendendo sobre os códigos ainda! Me ajuda.
ResponderExcluirMirele, pesquise aqui no blog "editar menu" e vai aparecer uns posts onde explico como editar o menu que instalei nesse template em particular.
ExcluirBasicamente é sempre a mesma forma de editar, então não tem erro...
bjssss
Infelizmente não aparece esse "Tabs" e nem esse "headings".
ResponderExcluir