Adicionar Menu Horizontal fixo no topo do Blogger

Postado por Leonardo Ramos In | 3 comentários»
 Nesse tutorial vou explicar como colocar um Menu Horizontal no Topo do Blogger. O 1° Passo é aplicas o CSS. Entre No Painel do Blogger >> Personalizar >> Avançado >> Adicionar CSS;



 Cole o código abaixo:

/* NavTop Menu
----------------------- */
#navtop { /*--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%;
}
#navtop li {
float: left;
display: block;
padding:5px;
}

#navtop li a, #navtop li a:link, #navtop 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;
}
#navtop li a:hover { /*--links no estado hover--*/
background: #000; /*--Edite cor de fundo dos links--*/
color:#fff; /*--Edite cor dos links--*/
text-decoration:none;
}

#navtop li ul {
display: none;
}
Salve o Modelo. Agora esse parte é mais difícil, adicionar o HTML. Vá em Modelo >> Editar HTML >> Procure pelo trecho:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
 E cole o código abaixo:
<div id='navtop'>
 <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.

3 comentários:

Lenny Iwatani Says:
4 de julho de 2013 às 13:31

Olá Leonardo Ramos seu tutorial é muito bom, sabe eu queria colocar esse codigo mais não sei do que se trata, nem qual link se pode ser uma palavrae ser você pudesse poderia mostra uma foto ou um desenho de como ficaria para agente saber no que vai dar entende? seu tutorias são bons e bem explicado, mas para nós que somos leigo no assunto temos duvida e medo é isso te fiz um convite para participar da comunidade clube dos blogueiros, te espero por la beijo.

Beauty Studio by Karolayne Says:
14 de dezembro de 2014 às 14:16
Este comentário foi removido pelo autor.
Beauty Studio by Karolayne Says:
14 de dezembro de 2014 às 14:20

Amei <3
Foi o único que consegui !!!
Obrigada!

Postar um comentário

Assinar: Postar comentários (Atom)