Menus Vanessa S.
Vários Menus Horizontais para blog
Resolvi postar aqui alguns modelos de menus para você poder instalar no seu template.
Atenção: Salve o seu template antes de começar.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.
Menu nº 01 – Blue:
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>
#menu{
margin:0;
padding:12px 0 12px 0;
list-style-type:none;
width:auto; /*---largura total do menu - edite se quiser---*/
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("http://4.bp.blogspot.com/-uEuEP4_agyA/T7i2zyt2deI/AAAAAAAAAG8/PKApLQcUxPM/s1600/OFF.gif") repeat-x bottom left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid #004c99;
}
#menu li{
display:block;
float:left;
margin:0;
pading:0;
}
#menu li a{
display:block;
float:left;
color:#6d7078;
text-decoration:none;
font-weight:bold;
padding:5px 20px 5px 20px;
height:28px;
background:transparent url("http://1.bp.blogspot.com/-q5zey7WTQA8/T7i20O66NlI/AAAAAAAAAHI/ylfSDewMf78/s1600/DIVIDER.gif") no-repeat top right;
}
#menu li a:hover{
background:transparent url("http://1.bp.blogspot.com/-fM6tk66aGt4/T7i20d85BiI/AAAAAAAAAHU/EqJ85CSj1hw/s1600/HOVER.gif") no-repeat top right;
}
Salve!
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.
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title=' Início'>Home</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 1</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 2 </a></li>
</ul>
</div>Visualize e salve!
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>
#menu {
margin:20px;
padding:0;
list-style-type:none;
width:auto; /*---largura total do menu - edite se quiser---*/
position:relative;
display:block;
height:27px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url(http://4.bp.blogspot.com/-4EzghmdEhAA/T7i4k2265AI/AAAAAAAAAHg/AldwyZSInQg/s1600/bg-bubplastic-button.gif) repeat-x top left ;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #4F4F4F;
border-top:2px solid #9C9C9C;
}
#menu li{
display:block;
float:left;
margin:0;
pading:0;
}
#menu li a{
float:left;
color:#ffffff;
text-decoration:none;
font-weight:normal;
padding:5px 20px 0px 20px;
margin:-12px 0 1px 0;
height:22px;
border-right:1px solid #000000;
}
#menu li a:hover{
background:transparent url("http://1.bp.blogspot.com/-kEQ7YpvHzmg/T7i4lA8qnkI/AAAAAAAAAHs/nfjaNWArSG4/s1600/bg-bubplastic-h-red.gif") no-repeat top right; }Salve as modificações.
Para o Menu acima 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.
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title=' Início'>Home</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 1 </a></li>
</ul>
</div>
Menu nº 03 – Red:
#menu {
margin:20px;
padding:0;
list-style-type:none;
width:auto; /*---largura total do menu - edite se quiser---*/
position:relative;
display:block;
height:27px;
text-transform:uppercase;
font-size:12px;
font-weight:normal;
background:transparent url(http://1.bp.blogspot.com/-kEQ7YpvHzmg/T7i4lA8qnkI/AAAAAAAAAHs/nfjaNWArSG4/s1600/bg-bubplastic-h-red.gif) repeat-x top right ;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #EE0000;
border-top:1px solid #FF0000;
}
#menu li{
display:block;
float:left;
margin:0px;
pading:10px 0 10px 0;
}
#menu li a{
float:left;
color:#CFCFCF;
text-decoration:none;
font-weight:bold;
padding:5px 20px 0px 20px;
margin:-12px 0 1px 0;
height:22px;
background:transparent url(http://1.bp.blogspot.com/-kEQ7YpvHzmg/T7i4lA8qnkI/AAAAAAAAAHs/nfjaNWArSG4/s1600/bg-bubplastic-h-red.gif) no-repeat top left ;
}
#menu li a:hover{
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;
}Salve as modificações.
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.
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title=' Início'>Home</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 1</a></li>
</ul>
</div>Menu nº 04 – Black White:
#menu {
width: auto; /*---largura total do menu - edite se quiser---*/
height: 53px;
background: #FFF url(http://1.bp.blogspot.com/-tGX-Uc0CLmw/T7i57_k3RqI/AAAAAAAAAH4/GWadAoq4M2w/s1600/1dzwib.gif) top left repeat-x;
font-size: 0.8em;
font-family: "Lucida Grande", Verdana, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;}
#menu li {
display: block;
float: left;
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;}
#menu li a {
height: 43px;
color: #777;
text-decoration: none;
display: block;
float: left;
line-height: 200%;
padding: 8px 15px 0;}
#menu li a:hover {
color: #333;background: #FFF url(http://i27.tinypic.com/1dzwib.gif) top left repeat-x;}
#menu li a.current {
color: #fff;
background: #FFF url(http://i27.tinypic.com/2qlfozn.jpg) top left repeat-x;
padding: 5px 15px 0;}Salve as modificações.
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.
<div id='menu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title=' Início'>Home</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 1</a></li>
</ul>
</div>Se quiser acrescentar mais links no menu, utilize este código:
<li><a href='inserir link aqui' title='Edit'>Link 1</a></li>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.
Estou levando.
Obrigada,bjs
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.
Obrigado!
Hugo,
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.:)
Fiz tudo certinho só que o meu fico em cima do cabeçalho quero deixa-lo em baixo como que eu faço
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
Potter
é só vc retirar a linha "background" em "#menu".
Como faço para deixar o fundo incolor?
Mr. Sam
Para vc inserir mais links tem q usar o código referente aos links. Está no final do post.
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.
Oi Clau,
Amei seu site;
mas não consegui colocar o menu no meu blog, pois ele não possui o trecho header wrapper.
Não tem outro jeito?
(eu uso o menu do flash vortex, mas eu não gosto muito.)
Abração.
Ola clau
Muito obgda. Ajustei ficou certinho. Parabéns que Deus sempre te abençoe e prospere em tudo que voce fizer.
Sayonara
É só vc incluir o valor da largura q vc quer. Onde está "width:auto;" apague a palavra "auto" e inclua o valor da largura:
width:XXXpx;
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.
Sayonara
Olá, Clau!
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?!