Um menu é uma lista de links que organiza e agrupa os principais links do blog de forma a ajuda o leitor a se orientar e encontrar o que procura. Neste menu é interessante concentrarmos links como os da home, contato, conteúdo mais discutidos ou vistos entre outros links. Além destes benefícios ele também da um ar de elegância ao Blog deixando mais atrativo e convidativo a novas visitas, vamos a instalação:
1)Acesse o painel do Blogger (blogger.com)
2)Vá em "Layout"->"Editar HTML"
3)Procure pelo seguinte código utilize "Ctrl e F":
</head>Antes do código acima insira o próximo:<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}
#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}
#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;}
#jsddm li a:hover
{ background: #24313C;}
#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;}
#jsddm li ul li
{ float: none;
display: inline;}
#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C;}
#jsddm li ul li a:hover
{ background: #8EA344;}
</style>
<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->4)Salve as alterações
Instalando no template
1)Vá agora em "Layout"->"Elementos da página"->"Adicionar um Gadget"->Selecione "HTML/JavaScript"Como conteúdo insira o seguinte código alterando de acordo com a nota:
<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://noticiaeblog.com/">Ajuda para Blogueiros</a></li>
</ul>Nota:O símbolo "#" reference aos links, em azul são os títulos dos links que serão exibidos no menu horizontal, altere de acordo com link escolhido.
2)Salve as alterações e visualize.
Referência:Bloggerstop.net
Update: (10/11/2010) Erros corrigidos.
109 Comentários
fiz tudo certo mais não apareceu o menu vertical so o orizontal oq eu faço ???
@***** ,Tente refazer pois não há erro nenhum no tutorial
Muito bom mesmo. Utilizei no blog e funcionou perfeitamente. Recomendo!
Fiz e não aconteceu nada
http://dicasdecasamentoonline.blogspot.com/
Caraca. eu estava na net a tarde toda e não consegui nenhum codigo que funcionasse co o meu template.
soente o seu deu certo.
Agradeço desde já e te digo que levo teu link comigo.
Estou começando meu blog espero que vc goste.
http://reflexoesdeumalibriana.blogspot.com
entre lá.
Mttoo bom, recomendo!
Muito bom msm foi o únoco que deu certo!!!
Só queria saber com que faço para as o sub menu ficar por cima dos itens na tela??
WlW msm show de bola!!!
kara como eu faço pra mudar o fundo, no caso, em vez de preto colokar azul???
Adoreii ... ate coloquei o banner de vocês no meo blog .. mais ainda to começando no meo... por isso se acostumem comigo akie :D
@tatodicastro, Obrigado por inserir nosso banner agradeço muito.
Amigo, Legal!
Como eu faço para criar duas carreiras deste menu. (A quantidade de menu que eu vou dá um total de 16).
Abs,
Amigo,
Oproblema acima eu já resolvi, mas surgiu outro qu é o seguinte:
eu coloquei 9 menus horizontalmente, mas só funciona até o sétimo, você pode dar uma espiada no site: www.teste-mauluis.blogspot.com e informar o que está acontecendo. Desde já agradeço.
@MAURICIO, coloque script dentro da tag head. Sugiro que insira desde <!--jquery-DD-Menu-Starts--> dentro da head
Obrigado por compartilhar este ótimo post. Tenho uma dúvida..E se eu quizer mudar as cores das abas(janelas)? Como faço?
+uma vez obrigado e abços.
muito bom, fantástico!
Nossa...estou há cerca de 4h mexendo no template do meu blog para conseguir colocar um menu horizontal, só o seu deu certo! Mas gostaria de saber como faço para incluir o link a ser direcionado. Ex: coloquei no menu a aba "orkut", como faça pra incluir meu link?
Obrigadaaaa
Ahh perdão! Li com calma e achei minha resposta! rsrs
@Bruna
O que precisar é só comentar...
Muito bom msm foi o únoco que deu certo!!!
Só queria saber com que faço para as o sub menu ficar por cima dos itens na tela??
WlW msm show de bola!!!
Deu certo, procurei em vários sites, mas esse é mais simples e super rápido!
Finooooo . . .
Fiz no meu e funcionou certinho.
Foi o único que consegui fazer funcionar, porém com um detalhe; os links ficam ordenados na coluna direita.
Eu quero aprender fazer links com abas horizontais na parte superior do site.
Se alguém fez e deu certo de verdade por favor me ensine.
Por enquanto vou usando esse aqui.
Abraço!
Olá! Muito obrgiada pela dica!
Foi muito fácil e funcionou!
Eu só queria saber duas coisinhas, tem como mudar a formatação? Cor de fundo, de letra, tal?
E tem como linkar para uma página fora do blog? Queria fazer um link direto para minha conta no youtube, não dá?
E vc sabe de alguma forma de fazer o post em abas?
Obrigada!
Amigo, estou tentando fazer.. a princípio deu certo MAS eu preciso saber 2 coisas.
1- Como retirar a cor de fundo da barra, por exemplo. estou fazendo neste blog de testes: http://jqbrtestes.blogspot.com/
Como você pode ver a barra com uma cor diferente da barra do fundo personalizada.
2- Como faço pra aumentar o espaço de cada barra ? Pois como também é notável as palavras se perdem na barra..
Como faço essas 2 coisas ? Responda por favor amigo. (:
olá, coloquei essa barra horizontal no meu blog e ficou linda.... mas não consigo criar sub-abas dentro das que que já criei. como faço isso? abs
marymulherzinha.blogspot.com
funcionou eba mais quero mudar a cor e aumentar o espaço entre os menus como faço???
Olá,
como faço para o menu sobrepor o restante do blog?
Ele fica debaixo dos outros elementos.
Eu gostaria de criar um menu com as logomarca dos projetos para crianças veja meu blog . http://casaharmonica.blogspot.com/
ótimo tutorial! só um problema: as outras imagens do meu blog sobrepoem as abas verticais (se quiser dê uma olhada em www.tudo-para-runescape.blogspot.com . obrigado
alguem ai por favor, ajudem nós em sobrepor as sub-abas...elas ficam atras da pagina...
tou me matando, revirei todo codigo sem sucesso...por favor alguma alma caridosa, nos ajude.
Ola amigo você conseguiu resolver o problema dos SUB MENUS que fica por traz das letras? se sim me ajude por favor.
alguem ajuda, pelo amor de cristo...alguem ajude ai com os sub menus que fica atras das letras...por favor?
tem como colocar um link para fora do blog? e por favor, como eu faço para as abas verticais não fiquem atrás dos outros elementos do blog? mande um e-mail para tudopararunescape@hotmail.com . obrigado
eu resolvi o problema dos elementos das páginas que sobrepoões as abas: é só ir no código no gagdet e acrescentar, numa linha abaixo do resto, um ponto(.).
cara instalei no meu blog tudo ok mais teria como instalar dois com cores diferentes da uma olha http://baixaflex.blogspot.com/ ficou otimo mais eu preciso do menu de cima.
acho que vou fazer ums teste pra ve se da
@Abnercara deu certo achei aqui http://templateseacessorios.blogspot.com/2009/05/instalando-o-menu-horizontal-no-blogger.html
não linko ninguem nem gosto do blog assima mais fazer o que tinha lá
o meu naum deu certo..aparece sem efeito e o sub..naum vai..
Notiicias e blog poderiam poderiam fazer um template para mim se nao for pedir de mais ???? envie para lokoplaypc@gmail.com VLW ae tenho o seu banner no meu blog
OLÁ AMIGO No meu só está funcinando quando coloco na vertical.
Será que tem algo errado
Como fas para os submenus abrirem para a direita ao inves de abrirem para baixo , vc tem ideia de como ? xau
de uma olhada nessess menus que criei no blog spot e veja como ficou www.academicosdf.com deixa lá um comentario ou manda um email pra mim jonasnovais@gmail.com
@Zarakide uma olhada nessess menus que criei no blog spot e veja como ficou www.academicosdf.com deixa lá um comentario ou manda um email pra mim jonasnovais@gmail.com
@Prêmio M3de uma olhada nessess menus que criei no blog spot e veja como ficou www.academicosdf.com deixa lá um comentario ou manda um email pra mim jonasnovais@gmail.com
BOM EU QUERIA UM MENU HORISONTAL ESTILO O DESSE SITE AQUI www.passarela.com.br ELE E HORISONTAL MAS NAO DESCE PRA BAIXO ELE VAI PARA A DIREITA
Primeira mente, gostaria dar os parabéns pelo post!
Foi o único local que eu achei como adicionar um menu...
Mas preciso da ajudinha de você...
Como eu faço pra colocar todos na mesma linha? Não estou consegundo mexer na largura...
Por favor, ajude-me!
Obrigada e parabéns mais uma vez!
=]
Pra quem quiser resolver o problema da página sobrepondo o menu, é só adicionar esta tag no local onde se edita as abas:
position: relative; /* ou absolute */
z-index: 10;
Ela fica assim:
#jsddm li a
{ display: block;
background: #CDAA7D; /*#C1FFC1*/ ======== muda a cor da aba
padding: 5px 15px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;
position: relative; /* ou absolute */
z-index: 10;}
=]
Consegui colocar.
Tem como mudar o Tamanhodos quadradinhos e cor, tamanho da fonte?
Obrigado
O menu apareceu perfeitamente no meu blog... conssegui fazer tudo direitinho!!
Mas na hora de postar as coisas nas paginas não fez diferença...
As postagens foram para a pagina inicial como se não tivesse a barra de menu... O que faço???
Oi bom, deu tudo certinho, mas como faço pra postar naqela aba, e quando eu clico ela não vai o link
O único que deu certo,( depois de muitas tentativas em outros sites ) depois de inserir o menu fiz algumas modificações, vejam como ficou no blog:
http://trovaoemchamas.blogspot.com
Gostei muito mais tem um problema!!
os sub menus fica por traiz como trazelos para frente ?
Eu fiz oque pediu e deu certo ! Recomendo *
Oiee, vim aqui para pedir um super OBRIGADO pela ajuda aí, consegui fazer tudo direitinho no meu Blog, tava quase maluca porque não sabia fazer isso, e depois dessa explicação super simples eu consegui! ^^
Valeu!!!
Caracas, ficou show, melhor que a encomenda. Deu certíssimo!
Olá, tb consegui colocar a aba, mas preciso mudar a cor do fundo. ficou vermelhão!
onde faço isso?
Outra coisa: elimei as demais abas para ficar só uma, mas ela não está lincando para a página do meu blog que eu quero... como faço isso tb???
O end do blog é: http://amoregourmet.blogspot.com
Obrigada!!!!!
Tá dai como eu faço uma postagem em uma aba só, tipo as postagens ficam em todas as abas ¬¬
Eu não sei mexer NADA quando se fala em html, não entendia parte "Instalando no template". Poderia me ajudar? Estou a séculos tentando colocar as abas e não consigo. Ficarei grata.
@Natiferrazza
Olá
fiz o que vc recomendou e achei que ficou bom o resultado. Entretanto quero deixar os posts ligados nas abas. Igual com funciona em um site. Os post que estou colocando não ficam "nas caixas. Como faço? se quiser e puder de uma olhada... http://marigemmadelacruz.blogspot.com
agradeço sua atenção e colaboração ou de alguém que puder me auxiliar
Seu site foi o único que me ajudou, estou te seguindo, um abraço!
Alguém ajude a sobrepor o submenu. No mozilla funciona corretamente, mas o IExplorer e no Chrome não dá certo. Alguma dica? quem quiser dar uma olhada... www.iprestaurandovidas.blogspot.com
Massa o Menu, obrigado cara. Só fiquei com um problema, nem todos os submenus aparecem, são cortados pela metade. Como resolver isso?
Resolvi, valeu. :)
Estou com um problema na exibição deste código através do internet explorer, ele não interpreta corretamente a posição dos menus e submenus bagunçando tudo no blog ...
Pode me ajudar por favor ...
Blog : http://blogdocentraldabola.blogspot.com/
E-Mail : nunesthomaz@uol.com.br
MSN : nunesthomaz@hotmail.com
Twitter : @rafael_thomaz
Obrigado
Olá!!! Adorei a dica e já coloquei no meu blog. Mas tive um problema, os textos estão sobrepondo o menu. Como resolver o problema? Grande abraço!!!
Bom dia galera!!!
Como ajustar a barra de menu de acordo com o tamanho do banner?
O meu banner esta no centro da página, e o menu ficou bem no canto superior esquerdo.. tenho que empurrar ele pra direita para ajustar com o banner.
Como faço?
Des de já obrigado!!!
Nao estou conseguindo mudar a cor das abas, alguem pra me ajudar????ela ficam verdes, gostaria que ficassem de acordo com o fundo.
Opa tudo bem?
Fiz, até que deu certo porém quando chega a area de post o menu fica por baixo.
Tem como ajudar?
http://testewarezfilippe.blogspot.com/
é um blog para tests
há, de muita ajuda :D
ADOREEEEI,deu certo,até que enfim encontrei algo que me ajudasse *-*
boa noite
consegui incluir a aba horizontal, contudo, não estou conseguindo colocar conteudo nas abas que eu criei. Alguem pode me orientar como proceder para incluir conteudo.
Olá amigos
Parabens pelas dicas. Vocês são nota 10. Foi o unico que deu certo. Gostaria de resolver um problema. Preciso colocar mais quadros para link na mesma barra de link. Não estou conseguindo.Como faço para resolver isso. Fico grato e aguardando a ajuda. Vejam meu blog: http:\\cecilialacerda.blogspot.com
Obrigado.
Paulo
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...
muito boa a dica mais apareceu o menu vertical não horizontal
Só tenho uma dúvida:
A palavra que fica dentro da caixinha ficou muito grande para o tamanho da "caixinha". Como posso resolver?
Amigos. Coloquei do jeito que você indicou. Porém surgiram os seguintes problemas:
1. A linha (sidebar)é maior que o cabeçalho. Gostaria que ficassem iguais.
2. As abas não aparecem. Como faço para que apareçam?
Abraços.
Paulo
Eu adorei, ficou do jeito que eu queria, mudei as cores e a largura das abas porém, a grande dúvida é...como colocar conteúdo nas páginas e subpáginas??
@Tatinha
Tatinha explicou mas no meu num funfo
coloquei tudo igualsinho e as sub Abas continuam sem sobrepor o restante.
tenho que mudar mais alguma coisa?
Meus parabéns companheiro, isso é incrivel eu tive alguma difículdade em entender outros tutoriais mais quando ví o seu fiquei impressionado o scripit acima fica perfeito só alterar o nome dos menus que fica perfeito.
Como a cara colega acima disse " BLOG e TUTORIAL RECOMENDADO "
Foi perfeito e aparece de acordo com que desejo.
Parabéns.
coloquei o primeiro html e não deu certo, teve um erro 500 lá, oq ouve?
Obrigada!! Ajudou muito!
Muito bom! Parabens deu certinho .
Explorando um pouco como muda a cor e o tamanho da abas para palavras maiores.
Bjos
E Obrigada
muito bom, finalmente consegui um bom tutorial para incluir sub abas.
mas tenho um probelma, que até já foi citado... como fazer com que estas sub abas apareçam à frente das postagens do blog?
e como mudar a cor delas?
obrigada
Olá, comecei a trabalhar no menu e estava tudo bem, coloquei os link a que queria que se referissem e tudo mais. Só tem um problema. Estava organizando os submenus agorinha e quando coloquei o código pra abrir os submenus e salvei, na visualização do blog ele apareceu com os submenus como "menus" ano lado do que deveria ser o pai deles, e não consigo encontrar erro nenhum no código, está tudo igual ao do tutorial, mesmo assim, não está se comportando como submenu, porém, fica com 4 barras na página, a quem quiser ver, enquanto eu não conserto essa lasanha está aqui: http://uhmubugaifeiditao.blogspot.com/
gostaria que alguém me dissesse o que pode ser feito pra consertar isso, estou pesquisando, mas não estou encontrando nada que me diga o que fazer, porque em tese o código está correto.
ótimo tutorial. Mas o meu teve um pequeno probleminha. Nos links da vertical só o primeiro funciona e os outros não. Será porque?
Cara eu já tentei de tudo mais as minhas imagens do blog continuam sobrepondo o menu horizontal !!! Eu preciso de algumas dicas .......!!!
Coloca um vídeo explicativo aí rapaz por que sinceramente não entendi nada e mais as pessoas procuram por coisas mais completas para terminar seus trabalhos.
Deus te abençoe. Abraços!
As pessoas estão esperando por suas respostas assim como eu e garanto que se suas dicas forem as melhores as pessoas te procurarão de novo e seus trabalhos serão cada vez mais divulgados e apreciados com toda certeza ok? Até mais!
Funcionou direitinho! Muito obrigada!
Pra quem ta com dúvida, pra ele ficar na parte superior, ao invés de ficar na lateral, é só em el Elementos da página e arrastar o ícone da lateral para a segunda barrinha horizontal!
Gostaria de saber o código pra fazer abas para as abas?
Obrigado
E ae cara, vlw pelo post. Eu fiz tudo e deu certo, mas gostaria de saber como que eu faço para dividir meu blog em sessões e quando a pessoa clicar na aba ela ser redirecionada à sessão em questão. Por exemplo a sessão "musica". Pode me ajudar?
Oie, me ajuda?? Fiz tudo certinho, revisei, fiz de novo, mas não aparece o submenu, só aparece a parte do menu, será que é algum problema no meu blog? Help
ola eu ja fiz tudo agora como posso começar a ultilar meu menu, ja esta instalado, mais quando clico neles nao apareçe nada. Mande um email para meu blog
obrigada
Pessoal, acabei de solucionar com um amigo meu o problema dos elementos da página sobreporem o submenu.
É só ir em "#jsddm li ul" e nele inserir a seguinte propriedade: "z-index:99999"
Comigo deu super certo, principalmente para páginas que tenham outra animação em JQuery.
Ficou perfeito, adorei, mas tem como mudar a cor? ;)
como se muda o titulo do menu
Não sei o que estou fazendo de errado.... Não estou conseguindo... Será que vc pode dar uma olhadinha??? www.ariciamaiaartegospel.blogspot.com
Obrigada!!!
Esta foi a mensagem de erro que deu... O quê eu faço??
Mensagem de erro em XML: The markup in the document following the root element must be well-formed.
Olá, eu estou precisando urgentemente saber como faço para colocar "submenus" dentro dos "submenus". Você poderia me ajudar? Ficarei muito grato.
Eu tanbem quiria saber como para colocar "submenus" dentro dos "submenus"...
Obrigado!
Ficou muito legal... Adorei e fico devendo.
No meu blog deu tudo certo:
http://dg1.com.br/transito
não consigo colocar link nas abas por exemplo coloco musica quando clico é como de tivesse recarregado a pgina alquem me ajuda pelamor de deus
ah esqueci o meu site é http://lolmemes2012.blogspot.com.br/
como faço para colocar outro nome no menu,e como colocar as postagens?
Muito obrigada. Funcionou perfeitamente. Mas gostaria de saber, se tem como ajustar cada aba individualmente, para ficar do mesmo tamanho do nome. Por favor, responda. Desde já agradeço =)
Olá eu comecei com um blog agora e coloquei o menu nele, todo menu que eu coloco quando clico nas abas sempre aparece a seguite frase: a pagina que vc esta procurando nesse blog não existe.
Como faço pra resolver esse problema e porque aparece essa msm?
Cara, muito bom. Mas, como eu faço os links e quando eu for postar somente na aba desejada, como eu faço?
coloquei todo os passo em meu blog mais o menu na só apareceu o titulo os subtitulo não aparece como se não se estivesse nada.
Como faço pra colocar links que vão pra outras partes do blog ? Ex.: Eu coloquei uma aba de " História " ,sendo que quando clico nela vai pra outro lugar dentro do blog .
o pessoal cobrando há mais de 2 anos uma solução pros submenus q aparecem atrás dos outros objetos do blog e nada de resposta? ao menos um "estou estudando uma solução e retorno pra vocês" poderia aparecer por aqui, né?
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.