23 de jun. de 2012

Menu de Barrinhas

Oi gente!
Achei um tutorial bem bacana no Cupcake of Shine, é o menu de barrinhas com efeito hover. Eu, provavelmente, irei usar, quando tivermos mais páginas.
Tutorial:
Vá em Layout>Adicionar um Gadget>HTML/JavaScript.
Cole esse código:
<style type="text/css">
#menuzinho {
display: block;
width: 100%;
height: 19px; /* ALTURA DO MENU /*
width:178px /* LARGURA DO MENU /*
vertical-align: middle;
font-family: Verdana, Arial, sans-serif;
font-size: 10px; /* TAMANHO DA FONTE */
font-weight: bold;
color: #000000; /* COR DA FONTE */
text-indent: 5px;
line-height: 17px;
margin-bottom: 3px;
margin-left: -1px;
background-color:#DDA0DD; /* COR DO FUNDO */
}
#menuzinho:hover {
display: block;
color: #FFFFFF; /* COR DA LETRA QUANDO PASSA O MOUSE */
background-color: #DA70D6; /* COR DO FUNDO QUANDO PASSA O MOUSE */
}
</style>
<style type="text/css"></style>
<a id="menuzinho" href="LINK AQUI/">NOME DO LINK AQUI</a>
Para você personalizar o código, eu recomendo usar o Color Picker ou essa tabela de cores.
Em LINK AQUI, você coloca o link da página. NOME DO LINK AQUI coloque o nome da sua página. Caso queira mais páginas, sempre coloque no final do código isso:
<a id="menuzinho" href="LINK AQUI/">NOME DO LINK AQUI</a>
Exemplo de como fica o menu:

Créditos ao CS. 
Beijinhos, Luh

Nenhum comentário:

Postar um comentário

Layout Free Cutest por Adália Sá - Todos os direitos reservados - Hospedado por Blogger