Vários Menus Horizontais para blog - Mundo Blogger
Você está em: Início 1 Menus 2 Vários Menus Horizontais para blog 3
Resolvi postar aqui alguns modelos de menus para você poder instalar no seu template.
Atenção: Salve o seu template antes de começar.
Menu nº 01 – Blue:
Vá no menu "modelo>>editar html", e marque a opção "expandir modelos de widgets".
width:auto; /*---largura total do menu - edite se quiser---*/
background:transparent url("http://4.bp.blogspot.com/-uEuEP4_agyA/T7i2zyt2deI/AAAAAAAAAG8/PKApLQcUxPM/s1600/OFF.gif") repeat-x bottom left;
border-bottom:4px solid #004c99;
background:transparent url("http://1.bp.blogspot.com/-q5zey7WTQA8/T7i20O66NlI/AAAAAAAAAHI/ylfSDewMf78/s1600/DIVIDER.gif") no-repeat top right;
background:transparent url("http://1.bp.blogspot.com/-fM6tk66aGt4/T7i20d85BiI/AAAAAAAAAHU/EqJ85CSj1hw/s1600/HOVER.gif") no-repeat top right;
Sigamos para a 2ª parte da instalação: Instalar o menu abaixo do cabeçalho.
Volte em "modelo" >> Editar HTML >> não precisa clicar em 'Expandir modelos de widgets'
Se estiver usando algum modelo de template do "designer de modelo do blogger", procure por: <header>
e cole o código html logo ACIMA dele.
Se estiver usando modelo de template mínima ou modificados, procure por: <body>
e cole o código html logo ABAIXO dele.
<li><a href='inserir link aqui' title='Edit'>Link 2 </a></li>
Menu nº 02 – Black:
Segue abaixo o Código para o 2º menu (na cor black)
Vá no menu "modelo>>editar html", e marque a opção "expandir modelos de widgets".Copie o código abaixo e coloque-o antes de ]]></b:skin>
background:transparent url(http://4.bp.blogspot.com/-4EzghmdEhAA/T7i4k2265AI/AAAAAAAAAHg/AldwyZSInQg/s1600/bg-bubplastic-button.gif) repeat-x top left ;
border-top:2px solid #9C9C9C;
padding:5px 20px 0px 20px;
margin:-12px 0 1px 0;
background:transparent url("http://1.bp.blogspot.com/-kEQ7YpvHzmg/T7i4lA8qnkI/AAAAAAAAAHs/nfjaNWArSG4/s1600/bg-bubplastic-h-red.gif") no-repeat top right; }
Para o Menu acima do cabeçalho:
<li><a href='inserir link aqui' title='Edit'>Link 1 </a></li>
Menu nº 03 – Red:
background:transparent url(http://1.bp.blogspot.com/-kEQ7YpvHzmg/T7i4lA8qnkI/AAAAAAAAAHs/nfjaNWArSG4/s1600/bg-bubplastic-h-red.gif) repeat-x top right ;
border-bottom:1px solid #EE0000;
pading:10px 0 10px 0;
background:transparent url(http://1.bp.blogspot.com/-kEQ7YpvHzmg/T7i4lA8qnkI/AAAAAAAAAHs/nfjaNWArSG4/s1600/bg-bubplastic-h-red.gif) no-repeat top left ;
background:transparent url("http://1.bp.blogspot.com/-kEQ7YpvHzmg/T7i4lA8qnkI/AAAAAAAAAHs/nfjaNWArSG4/s1600/bg-bubplastic-h-red.gif") no-repeat top right;
font-color:#B22222;
Menu nº 04 – Black White:
width: auto; /*---largura total do menu - edite se quiser---*/
background: #FFF url(http://1.bp.blogspot.com/-tGX-Uc0CLmw/T7i57_k3RqI/AAAAAAAAAH4/GWadAoq4M2w/s1600/1dzwib.gif) top left repeat-x;
margin: 0 0 0 5px;background: #FFF url(http://4.bp.blogspot.com/-vq1rEnqSezQ/T7i6N9cWf7I/AAAAAAAAAIE/usUuDPzZ29g/s1600/current-bg.gif) top left repeat-x;}
padding: 8px 15px 0;}
color: #333;background: #FFF url(http://i27.tinypic.com/1dzwib.gif) top left repeat-x;}
background: #FFF url(http://i27.tinypic.com/2qlfozn.jpg) top left repeat-x;
padding: 5px 15px 0;}
Se quiser acrescentar mais links no menu, utilize este código:
Basta incluir o código referente a cada link que você irá adicionar.
Não esqueça de inserir seus links e titulos no menu que você escolheu
Se quiser que o menu fique visível acima da barra de cabeçalho, cole o código do menu acima da tag <div id='header-wrapper'>
Se estiver usando algum modelo de template do "designer de modelo do blogger", cole o código html do menu logo ACIMA da tag <header> para que o menu fique acima do cabeçalho.
Isto vale para todos os menus disponibilizados neste tutorial.
Bom, estão ai alguns menus, agora é só escolher e dar uma encrementada no seu blog. Fácil não? Mais fácil que isso impossível.
Clau eu estava procurando este menu faz tempo.
Encontrei vc nas pesquisas.
28/06/2012 às 3:53
me ajudo muito foi o unico tutorial que eu consegui fazer oque eu realmente queria obrigado por publicar amor
Olá. Seu blog aparece em várias buscas que fiz mas não consigo achar a solução pr meu problema: Quero centralizar o conteúdo do meu blog. Cabeçalho e posts já estão centralizados mas o menu de páginas estáticas estão alinhados à esquerda. Gostaria que eles ficassem centralizados, junto com o restante do conteúdo. Utilizo o blogspot (blogger). para ver como está basta acessar.
Para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso, e não presto consultoria individual. De qualquer forma, agradeço pelo comentário.:)
William132 disse:
21/01/2012 às 14:57
Fiz tudo certinho só que o meu fico em cima do cabeçalho quero deixa-lo em baixo como que eu faço
22/05/2011 às 0:35
Oi, eu já tinha o menu horizontal do blogger mesmo e tem uma maneira de eu ficar com esse menu que você trouxe aqui e apagar o menu do meu próprio template? se eu apagar o menu que vem no template os links que tão no outro vão se apagar também? e teria uma maneira de eu por o menu do que é do blogger acima do cabeçalho? Espero que possa me ajudar, amo seu blog! bjs
é só vc retirar a linha "background" em "#menu".
Como faço para deixar o fundo incolor?
23/12/2010 às 22:26
Para vc inserir mais links tem q usar o código referente aos links. Está no final do post.
23/12/2010 às 20:37
deu tudo certo, mas não consigo colocar mais links, só da pra ficar com os 2 que ja vem no código, aff. aparece a seguinte mensagem: Mensagem de erro em XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".
Mas ta tudo fechadinho, não sei oque ocorre, obrigado.
Carol Lemarc disse:
06/12/2010 às 0:43
Amei seu site;
mas não consegui colocar o menu no meu blog, pois ele não possui o trecho header wrapper.
(eu uso o menu do flash vortex, mas eu não gosto muito.)
05/12/2010 às 12:41
Muito obgda. Ajustei ficou certinho. Parabéns que Deus sempre te abençoe e prospere em tudo que voce fizer.
04/12/2010 às 16:59
É só vc incluir o valor da largura q vc quer. Onde está "width:auto;" apague a palavra "auto" e inclua o valor da largura:
Olá Parabéns! Suas dicas são ótimas. Há muito tempo estava procurando um menu assim. Coloquei no meu blog e ficou ótimo. Mas gostaria de saber se tem como aumentar no comprimento para ficar do tamanho do meu banner. Se puder me dar esta dica ficarei muito grata.
Sou novo no blog, primeiramente lhe dou meus parabéns pela iniciativa.
Estou com dificuldades de anexar o menu na horizontal em meu blog, pelos tutoriais que vc postou. O menu só aparece em links e ainda na vertical(um em cima do outro), não estou entendendo o erro, poderia me ajudar?!