Nesse tutorial vou posta um menu que fica fixado no topo do blog.
Vá em "Design - Editar HTML" e procure por:
Acima dela adicione o seguinte código:
Agora procure por
Embaixo dele cole este código:
Vá em "Design - Editar HTML" e procure por:
]]></b:skin>
Acima dela adicione o seguinte código:
/* 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;
}
Agora procure por
<body>
Embaixo dele cole este código:
<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>
Nenhum comentário:
Postar um comentário