Criar e colocar menu horizontal abaixo do título
quarta-feira, 3 de agosto de 2011
Neste tutorial vou ensinar a inserir um menu bem legal abaixo do título do blog apenas com HTML e CSS. Esse menu é simples com botões que podem ser personalizados. Um menu na parte superior da página é forma mais útil de atrair o seu visitante a navegar dentro do seu site através de categorias pré selecionadas. Primeiramente você define qual o assunto principal do seu site, depois, cria páginas com essas categorias (marcadores) e os "linka" em um botão do menu. No blog é a mesma coisa, pois cada "marcador" ou categoria é uma página e possui um endereço (link/url).
Habilitando um gadget abaixo do título do blog
1 - Primeiramente faça um backup do seu Template.
Geralmente, alguns templates não estão habilitados a criar um elemento de página abaixo do título. Para permitir que adicionemos um elemento de página abaixo do título do blog, faça o seguinte, procure pelo seguinte código no HTML do seu blog:
<!-- start header --><div id='header_wrap'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Mude maxwidgets='1', para maxwidgets='2' - você estará alterando a quantidade de elemento de página no campo Header.
ude showaddelement='no' para showaddelement='yes' - você estará permitindo que o novo elemento funcione.2 - Visualize o template para ver se tudo funciona bem, salve o template e volte para "Elementos de Página"
Criando o menu
3 - Acesse esse site para gerar o seu menu
Adicionando botões de menu
6 - Cada linha corresponde a um botão do menu.
Link Text - Nome do Botão (ex. Vídeos)8 - Para adicionar um novo botão ao seu menu, clique em: [+ Add top level navigation item] e acrescente as informações conforme explicado acima.
Address URL - Endereço do botão (ex: http://videos.site.com)
Title Attr - Nome que aparece quando se põe o mouse sobre o botão (Ex. Baixe vídeos)
Adicionando botões de submenu
9 - Para adicionar um botão de submenu ao seu menu, selecione a opção: This link contains sub-level navigation (optional) e para adicionar mais botões dentro desta mesma subcategoria, basta clicar em [+]
Adicione todos os menus e submenus desejados e assim que terminar, clique no botão: I'm done.Show me the styles.
7 - Você será redirecionado para a página onde escolherá o modelo do menu. Selecione o modelo do seu gosto, conquanto que seja horizontal, uma vez que estamos fazendo um menu horizontal. Este menu poderá ser personalizado depois.
8 - Tendo selecionado o modelo, clique em Show me the markup. Se desejar alterar o seu menu, clique em Edit the list itens.
9 - Pronto, agora foram gerados os códigos do menu. Na janela possuem dois campos, o de cima com o CSS que estiliza o seu menu e o campo de baixo com o HTML que contém uma lista com os links, títulos e informações de seu menu.
No Blogger
10 - No Layout do blog, adicione um elemento de página do tipo "HTML/Javascript" e cole tudo que está no campo The HTML dentro. Clique em "Salvar".
11 - Salve o modelo e acesse o HTML do blog. Dentro do HTML, procure pelo seguinte código:
body {Muita atenção! Cole o seu código CSS antes do código acima. Visualise o modelo, se o menu aparecer corretamente, o processo está terminado. Você poderá personalizar seu menu tanto quanto puder através do CSS, lembrando sempre de fazer um Backup anteriormente para não perder seu modelo.
Se seu menu aparecer atrás de outros elementos do layout do seu blog, você precisa adicionar no CSS dele algumas propriedades no seletor ul#main-nav conforme a seguir:
z-index: 1000;
Dicas extras
Um site muito bom para obtermos dicas de CSS para estilização, é o site do Maujor. Disponibilizarei abaixo alguns links úteis para que você possa personalizar este menu. Abraços!
Veja materias relacionadas
51 comentários:
Muito bom!
Me ajudou muito no meu blog!
Seu blog é fera!
Parabéns!
Sucesso!
Excelente,perfeito,parabéns cara,muito sucesso para você
Cara consegui fazer,porêm o menu horizontal ficou acima do titulo.Será q eu fiz alguma coisa errada.
Outra coisa , vç teria um tutorial que ensinasse colocar uma imagem no titulo do blog?
Obrigado e parabéns pelo site.
Faz assim: Acessa "Elementos de Página" do seu blog. Você verá acima do campo do título do blog um elemento de página do tipo HTML/Javascript. Clique sobre ele e arraste para um outro local da página do blog e solte. Depois, clique novamente sobre ele e arraste, só que agora, tente colocar abaixo do título do blog.
O título é um elemento de página que não dá pra mover...
Vou publicar uma postagem ensinando a mudar o título. Só alguns minutinhos..
Abraços!!
olha só tenho tentado a dias postar um menu horizontal em baixo to texto do blog mais não estou tendo sucesso,
seu blog é muito bom e ja tem me ajudado á tempo mais essa de colocar um menu não tem funcionado não sei pq, pois sigo os passos conforme esta no blog algum motivo deve ter mais nãosei qual é, sou novato e não me dou muito bem com html deve ser isso se tiver algum tempo e puder me ajudar de qualquer forma.
parabens pelo seu blog é show mesmo!
Olá amigo!
Esse menu que eu postei, é igual ao menu que eu uso em meu blog, e funciona blz..
Vou entrar em contato contigo, abraços!
Faz assim: Acessa "Elementos de Página" ...
onsegui Jonny,obrigado,assim qu o blog tiver pronto vou add seu link lá,waleu
Jonny,deu certo,queria saber como aumentar o tamanho da fonte das letras do menu.
Obs:Conforme prometido ja te add.Não leva mal a bagunça nos posts,é que eu to editando-o ainda,só quando tiver pronto é que vou postar decentemente rsrsr
Obrigado
ajudadopirata@gmail.com
Pirata. Para alterar o tamanho da fonte, é só você procurar no CSS a descrição (exemplo):
font: 12px;
ou
font: 100%;
Basta mudar o valor que está depois da palavra "font". Acima, o tamanho da fonte está definido em pixels e abaixo em porcentagem. Aumente ou diminua os valores que a fonte ficará personalidada.
Muito bom seu blog ta de parabens!
Estou aprendendo a criar tbm e suas dicas estão me ajudando muito, o blog não esta totalmente pronto mas ja da pra se ter uma noção
O site é Narufanatic.blogspot.com da um moiadinha aew
Flws!!!!
Olá, Jhonny!
Vc nem sabe há quanto tempo estava tentando aprender isso, então fiquei muito feliz quando descobri o seu blog e essa dica. - Pena que infelizmente não está dando certo no meu blog: - Os botões apareceram abaixo do título, como vc falou, mas somente no espaço correspondente à sidebar. Isto é, ficaram limitados somente à largura da sidebar. Aí, como o espaço é pequeno, ficaram duas barras em cima, mais duas embaixo e a outra embaixo de todas, porque não cabem as cinco que eu queria no mesmo espaço, na horizontal...
Deu pra entender? Se puder me ajudar com isso, vc ganhou um amigo!
Um abraço e muito obrigado por dividir os seus conhecimentos!
Olá Henrique! No que precisar estou à disposição...
Bom, o seu problema pode estar sendo causado porque a div que se encontra o seu menu pode estar dentro da div da sidebar. Você verificou se colocou o gadget que contém o código do menu abaixo do titulo do blog?
Insira o menu no seu blog e me comunique para que eu veja através do código fonte onde está o problema.
meu e-mail: contato@jhonny.com.br
Abraços!
Valeu meeeeeeeeeesmo!!!!
Já consegui resolver o problema. Ótima dica, e mais uma vez obrigado.
oii ou eu nao consigo fazer isso pois sempre aparece isso:Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: XML document structures must start and end within the same entity.
por favor mi ajuda oO valeu
Olá Juhh!
Esse problema acontece por que você colou o código na parte errada do HTML do blog.
Leia novamente a etapa 11 do tutorial, pode ser que você consiga solucionar o problema. Caso não consiga, dá um aviso que eu coloco uns exemplos com imagem no tutorial do meu blog..
Abraços!!
nossa eu so novo no blog nao entendo nada praticamente..bom euu vo deixar meu msn eu axo ki eh melhor..si vc kiser pode mi blokiar depois .mais é só pra vc mi explicar mesmo valeu...
juca-bala14@hotmail.com ;)
Olá Juca!
Infelizmente não tenho como acessar o MSN devido ao tempo, mas manda um e-mail pra mim que posso te ajudar!
contato@jhonny.com.br
Abraços!
não deu certo no meu continua do mesmop jeito sera que eu fiz algo errado??? de qualquer modo me ajuda me manda um e-mail charizard258@hotmail.com
Jhonny não consegui colocar a barra horizontal no meu blog.. ela ficou vertical apenas!!
O que eu faço???
Obrigado:-)
nao consegiu achar o codigo topico ( 1 ) la no blog.. ajudas
OI MUITO OBRIGADA ADOREI E CONSEGUI !!!!!
SEU BLOG É MUITO BOM, SEI QUE POSSO APRENDER MUITO COM VC!
SE VC PUDER ME ADD NO MSN!
carolinnemartiniano@hotmail.com
a e dá uma olhadinho no meu blog ta ficando muito bom...
http://carolmartiniano.blofspot.com
mais uma dica muito porreira, obrigado.
gostava era de saber como separar as paginas, cada uma com varios posts.
por exemplo: na barra horizontal "downloads" queria que aparecessem varios posts, mas so consigo por um post visto que cada post tem um link.
sabe como resolver?
Sim, é simples!
Ao invez de você copiar o link da postagem, copie o link dos marcadores da postagem.
Para criar um marcador, na tela em que você cria a postagem, coloque uma palavra (tag) referente ao assunto da postagem no campo "Marcadores".
Ele se transformará em link...
Entendeu?
Abraços...
muito obrigado, era muito simples, so bastava pensar um pouco, enfim é preguiça...continue com o bom trabalho =)
Ai Cara Fiz Tudo! mais deu um Erro, Ele aparece Emcima do MENU mais guando eu clico em cima do icone diz que Não existe a pagina e guando eu movo ele para abaixo do Menu fica vertical??
Opa!
Cara, ajudou muito viu!
Perdi um tempo tentando colocar um menu horizontal no meu blog. Agora é só personalizar o visual.
Vlw, parabéns.
Olá,li sua dica sobre menu horizontal.Consegui colocar no blog.O que passa é que não funciona quando clicamos no botão.Meu blog é:ateliedataika.blogspot.com
O que pode estar errado?Obrigada pelas dicas que voc~e dá em seu blog.
Ana Cristina
caraca veio..já procurei mais de 1 milhão de vezes mais não conssigo axar o tópico 4 "How many links do you want in your list?"
m ajuda veiooo...Sorry pela burrice..
qualquer coisa..meu msn:arlono@hotmail.com
conto com sua ajuda..
Agora consegui, ficou bonitinho até, mas qeria saber como posso colocar esse menu um pouquinho mais pra direita... da uma olhadinha http://blog-mell.blogspot.com/
pamellaestrela@hotmail.com
ta de parabens pelo blog
Olá Mel!!!
Para colocar para a direita, você deve observar os valores que possuem a constante LEFT.
padding-left
margin-left
Altere os valores e vá visualizando o layout, você perceberá que ele irá alterando a posição do menu.
Depois de concluido, é só salvar o template.
Obrigado pelo elogio!
Volte sempre querida!
Olá Mel!!!
Para colocar para a direita, você deve observar os valores que possuem a constante LEFT.
padding-left
margin-left
Altere os valores e vá visualizando o layout, você perceberá que ele irá alterando a posição do menu.
Depois de concluido, é só salvar o template.
Obrigado pelo elogio!
Volte sempre querida!
Obrigado você rs,
beijos
OLÁ, ESTOU TENTANDO PERSONLIZAR MEU BLOG, MAS ESTOU COM MUITAS DIFICULDADES, FIZ UM MENU SO QUE NAO CONSIGO COLOCAR NENHUM CONTEUDO DENTRO DELE, SEMPRE APARECE NA PAGINA INICIAL. COMO FAÇO? GOSTARIA DE SABER COMO COLOCO AQUELE MENU SUPERIOR, ONDE VC VAI PASSANDO O MOUSE ELE VAI DESTACANDO.MEU BLOG e? http://patriciavsilveira.blogspot.com
Cara, não estou conseguindo no meu blog. Parece que o campo background do codigo da tabela interfere no background da pagina. A cor do background muda quando eu colo o CSS que era pra ser do menu.
Eu coloco depois de fechado o primeiro campo body. Mas um interfere no outro.
Tbm naso consigo de maneira nenhuma centralizar a tabela. Se puder me ajudar agradeço.
Não consigo colocar o menu com os submenus no meu blog, usei o site que indicou mais não deu, podes facilitar meu irmão, agradeço.
Valeeu cara deu certinho .. abrass
Curit suas dicas, tem algumas coisas que nao peguei de primeira, pois é a primeira vez que em aventuro em html.
Valeu pelas dicas.
Nossa cara nem acredito que consegui fazer issoo!!! sou leiga demais, mas tudo bem devagar irei pegando as coisas, V A L E U !
Ola Jhonny
Meu nome é thays e sou completamente leiga sobre mexer com html e css de blog mas! resolvi dar a cara a
tapa e tentar, então criei um blog teste e fui a luta, queria colocar o menu horizontal no blog, e não é que eu
consegui! é claro que com a sua ajuda, achei o post que vc fez e fui seguindo passo a passo
só que agora empaquei novamente. Esta la o menu mas e agora como coloco as informações dentro de cada botão,
lembrando que não criei nada demais, botões como inicio, sobre o blog, minha história e contatos. Sera que vc pode
me dar um help?
Ao add gadget no meu blog (blogdojequi.blogspot.com) as abas do menu desapareceram. Engraçado que mesmo voltando com o backup realizado não funcionou. Ao voltar com o mesmo backup no blog de testes (testesblogdojequi.blogspot.com) as abas e subabas funcionaram normalmente, mas no blog original não. O que pode ter ocorrido? Please..Muitos leitores estão reclamando...
Olá Thays e Bernardo!
O Blogger possui duas opções de template. UMA com templates prontos, feitos pelo 'Design de Template' do próprio Blogger e OUTRA com templates baixados na internet.
Se vocês estiverem utilizando o template feito pelo DEsign de Template do Blogger, vão encontrar alguns problemas pois o código HTML dele é um pouco diferente. MAs, isso não impossibilita de ter o menu.
Vou atualizar esta postagem analisando o HTML do blog de vocês para tentar ajudar os dois.
Qualquer coisa só perguntar.
Abraços!
Ola Jhonny
Muito obrigada pela dica, mas vc sabe que quem fuça descobre né? pois é só que eu mexi e revirei para mudar a fonte e a cor da fonte da barra e n descolei nada kkkk por tanto peço mais uma vez sua ajuda para isso.
Bjoos e valeu.
Ah! mais uma coisa erunammo é a thays ou tata-nadaver como preferir.
rsrs, ok.
Então Thays, para mudar a cor você precisa achar o seletor do CSS que identifica o elemento que contém o texto que quer personalizar. Como?
Leia este post pra vc entender um pouquinho:
http://www.blogdopalito.com/2009/01/entenda-como-funciona-o-html-de-um-blog.html
Leia na parte: "Entenda a lógica CSS e HTML".
Qualquer dúvida pergunte.
Abraços!
OI sei que esse não é bem o lugar para escrever isso, mas sabe que é? perdi seu email, então vai la por um acaso vc ja fez algum post sobre como Adicione a opção “Responder Comentários” no Blogger?
Obrigada.
Thays
Valew. Quebrou meu galho. Ótimo Blog, recomendo!
www.blogdosocorrista.com
Vê lá como ficou
Então Jhonny. Tentei até mudar de Template mas o problema continua. Será que o problema é de algum código que inseri em local errado??
Obs: Já postei pergunta em 3 de agosto de 2011 20:38
Abraços,
Bernardo Vieira SIlva
Blog do Jequi
blogdojequi.blogspot.com
Thays,
eu nunca criei um post que ensine a criar o link para responder comentário. Aliás, preciso colocar essa opção no meu, rssr.
Bernardo,
o problema do seu blog é a maneira que foi estilizado o menu (CSS). No blog que aparece o submenu, perceba que tem um espaço grande entre o menu e o conteúdo, por isso o submenu aparece. Experimente (só um teste), na DIV que contém o código do seu menu colocar o CSS: position: absolute;
vai ver que o menu irá funcionar normalmente (porém em um lugar diferente na página), mas é só um teste pra ver que o menu está correto.
Abs!
Então Jhonny. Deu certo não. Na verdade o código do menu já estava em position: absolute. O engraçado é que baixei o backup do modelo do Blog (blogdojequi.blogspot.com) e instalei no blog de testes (testesblogdojequi.blogspot.com) e no blog de testes, mesmo sem o espaço entre os submenus e as postagens, os submenus aparecem.
Please....
Abraços.
Olá tudo bem? então o problema apareceu assim que eu mudei o template do blogger, uma tarja que cubria o link de outro site, no caso de canais de tv online, ficava normal em cima como os outros site usam tbm, só mantem os anuncios e tals, o meu problema é que essa tarja foi para lá em cima do site no topo, o problema pode ser visto aqui http://anrtv1.blogspot.com/p/os-simpsons.html < ou em qualquer ou canal que acessar, gostaria muuuuiiiito que voces pudessem ver isso vou mandar o codigo HTML que uso
Infelismente não da pra pode o codigo aqui no comentarios mais gostaria muito de um contato com voces
Por Favor novamente pesso que me ajudem
Postar um comentário