Criar menu horizontal no blog

quinta-feira, 7 de fevereiro de 2013

Para fazer o menu é bem fácil:
Vá em Modelo -> "editar html" e clique em "expandir elemento de página".

Clique "Ctrl + f" e procure por "body {".
Antes dela, cole o código abaixo:


#menu{padding: 0px;
font: bold 12px Verdana; ---> estilo da fonte;
margin: 0px;
width: 650px;} ---> largura de todo o gadget;
#menu li{list-style: none;
display: inline;
margin: 0;
}
#menu li a:link, #menu li a:visited{

color: #0000FF; ---> cor do texto do menu;
text-decoration: none;
margin-right: 3px;
border: 2px solid #000000;
---> cor da borda;
padding-top: 4px;
padding-bottom: 4px;

width: 150px; ---> largura de cada caixa do menu;
display: block;
float: left;
text-align: center;
background-color: #FFFFCC;
---> cor de fundo do texto;
}
#menu li a:hover{

color: #FFFFFF; ---> cor do texto sob o mouse;
background-color: #FF9933; ---> cor de fundo do texto sob mouse;
border: 2px solid #0099FF;
}



Faça os ajustes necessários e depois salve.
Vá em "layout", "adicionar gabgets" e "html/javascript", e
cole o código abaixo:

<ul id="menu">
<li><a href="link" >Início</a></li>
<li><a href="link" >Produtos</a></li>
<li><a href="link" >Dicas</a></li>
<li><a href="link" >Contato</a></li>
<li><a href="link" >Arquivos</a></li>
</ul>


Onde está "link" você vai adicionar o endereço completo do caminho indicado entre "> <".

Exemplo:
link = http://seublog.blogspot.com e ">Início<".

Boa sorte!


Nenhum comentário:

Postar um comentário

Obrigado por sua visita!
Seu comentário será publicado e respondido o mais rápido possível.
Por favor:
- Coloque seu nome no comentário;
- Não faça spam (o comentário será excluído);