terça-feira, 6 de novembro de 2012

Menu rolante no topo do blog


Oie  paçoquitas hoje vou ensinar a fazer o menu do blog ;)
vamos começar !
Primeiro faça o upload do seu template ;)

01- estilos css:

abra o design do blog > modelo > Editar Html > Prosseguir.
Não precisa clicar em expandir modelo.
Aperte CTRL+F e procure pela tag :
]]></b:sckin>
e cole ACIMA dela 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;
}                                                  

Edite as cores que estão em Vermelho! de acordo com seu gosto!

2- inserir o código HTML:

agora inserindo o código Html para que fique visível no topo do blog, 
Procure por <body>
e cole ABAIXO dele o seguinte 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>
Insira seus Links nos locais em VERMELHO.
Obs : se estiver usando designer de modelo do blog cole o código HTML
 ACIMA da tag <header> 

Visualize e se estiver tudo certo salve.
kissu~

Nenhum comentário:

Postar um comentário