quinta-feira, 24 de maio de 2012

Tecnologia: Menu Horizontal - fixo - no topo do Blogger

Há algum tempo, eu postei como colocar um menu horizontal no Blogger, que também pode ser usado em seu site. Agora nesse tutorial vou explicar como colocar um Menu Horizontal fixo no topo do Blogger, similar a barra principal que atualmente o Facebook e o Twitter usam (Apenas exemplos). O 1° Passo é aplicas o CSS. Entre No Painel do Blogger >> Personalizar >> Avançado >> Adicionar CSS;


Cole o código abaixo:

/*MenuEmpire69
----------------------- */
#MenuEmpire69  { /*--container geral do menu--*/
border-bottom:1px solid #666;   /*--Edite cor da borda--*/
background:#fff;   /*--Edite cor de fundo--*/
padding:0px 20px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
}
#MenuEmpire69 li {
float: left;
display: block;
padding:5px;
}

#MenuEmpire69 li a, #MenuEmpire69 li a:link, #MenuEmpire69 li a:visited { /*--links do menu--*/
float: left;
display: block;
padding: 5px;
text-transform: none;
text-decoration:none;
background: #ccc;  /*--Edite cor de fundo dos links--*/
color:#000;    /*--Edite cor dos links--*/
border:1px solid #666;   /*--Edite cor de borda--*/
font-size:12px;   /*--Edite tamanho da fonte--*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#MenuEmpire69 li a:hover {   /*--links no estado hover--*/
background: #000;  /*--Edite cor de fundo dos links--*/
color:#fff;   /*--Edite cor dos links--*/
text-decoration:none;
}

#MenuEmpire69 li ul {
display: none;
}

Salve o Modelo. Agora, você vai adicionar o HTML, no código fonte do seu blog/site. Acesse em Modelo >> Editar HTML >> Procure pelo trecho (usando CTRL+F, para facilitar a busca):

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

E cole o código a seguir abaixo da tag, caso esteja lhe dando com um site, ou modelo que não contenha esse código, cole o código a seguir abaixo de <body>.

<div id='MenuEmpire69'>

<li><a href='SEU-LINK-AQUI' title='#'>Link 1</a></li>
<li><a href='SEU-LINK-AQUI' title='#'>Link 2</a></li>
<li><a href='SEU-LINK-AQUI' title='#'>Link 3</a></li>
<li><a href='SEU-LINK-AQUI' title='#'>Link 4</a></li>
<li><a href='SEU-LINK-AQUI' title='#'>Link 5</a></li>
<li><a href='SEU-LINK-AQUI' title='#'>Link 6</a></li>

</div>


Faça as substituições referentes, e pronto! Qualquer erro informe que tentaremos ajudar.

Um comentário:

  1. Anônimo21 de novembro de 2012 às 01:11

    Oi, eu gostaria de que o menu ficasse fixo na página quando o zoom for maior ou igual à página e não pendendo para a esquerda.
    Assim como está no seu site seja com zoom menor, bem menor ou igual à página.

    ResponderExcluir

Assinar: Postar comentários (Atom)