sexta-feira, 27 de janeiro de 2012

Menu simples Horizontal

Oi pessoal o tutorial de hoje foi feito pelo blog Place Fame, portanto se for usar dê os créditos. é um tutorial bem fácil e com um resultado bem legal, é um menu bem simples mas que deixa seu blog muito bonito. Vamos lá.


Vá no seu CSS (Design > Editar HTML) e proucure pela tag ]]></b:skin>, cole o código acima dela e salve.

/*** MENU SIMPLES extras-placefame.tk ***/
.menusimples {
background-color:#f8f8f8; /*** cor do fundo ***/
float:left;
text-shadow: 1px 1px 0 #E4E4E4; /*** cor da sombra da letra ***/
color:#707070; /*** cor da fonte ***/
font-variant:small-caps;
width:150px; /*** largura da aba ***/
font-size: 10pt; /*** tamanho da fonte ***/
text-align: center;
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.menusimples:hover {
background-color:#FF99CC; /*** cor do fundo ***/
float:left;
color: #fff; /*** cor da fonte ***/
text-shadow: 1px 1px 0 #acacac; /*** cor da sombra da letra ***/
-khtml-opacity: .70;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Utilização:
Adicione o Gadget abaixo do cabeçalho (como mostra aqui), e escolha HTML/Javascript e cole o código abaixo fazendo as devidas alterações.
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
<div class="menusimples"><a href="LINK_AQUI">TÍTULO_DA_PÁGINA</a></div>
Para retirar as bordas arredondadas apague as  linhas que estão na cor azul.