31 janeiro 2012

Menu hover


Hoyy meus cafés com leite e biscoito!!  Dia bom?? Hoje ensinarei a colocar um menu hover -horizontal-
Para coloca-lo no blog, vá em design>editar HTML> pesquise por:
]]></b:skin>
Coloque o seginte código acima dele:
.menucherrysweet {
background-color: #E6E6FA; /* cor do fundo */
float: left;
color: #000000; /* cor da fonte */
width: 100px; /* largura do menu */
font-size: 12pt; /* tamanho da fonte */
text-align: center;
margin: 3px;
line-height:25px;
font-variant: small-caps;
margin-bottom: 1px;
-moz-border-radius: 20px; /* bordas arredondadas */
-webkit-border-radius: 20px; /* bordas arredondadas */
border-radius: 20px; /* bordas arredondadas */
-webkit-transition-duration: 1.80s;
}

.menucherrysweet:hover {
background-color: #FFE4E1; /* cor do fundo */
color: #000000; /* cor da fonte */
float: left;
-moz-border-radius: 20px; /* bordas arredondadas */
-webkit-border-radius: 20px; /* bordas arredondadas */
border-radius: 20px; /* bordas arredondadas */
-webkit-transition-duration: 1.80s;
}
Salve, agora vá em Elementos da página> Adicionar um gadget> HTML/JavaScript e cole o seguinte código:
<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINK">NOME</a></div>
<div class="menucherrysweet"><a href="LINKI">NOME</a></div>

Aqui tem quatro links, para adicionar repita de <div class ... até </div> , edite conforme indicado, beijoss!!!


3 comentários:

Luana // Sweet Dreams disse...

HOY flor! Amei seu blog segui lá o meu eu já estou seguindo eu começei meu blog á alguns dias e queria alcançar os 25 seguidores me ajuda?
http://sweetdreams-s2.blogspot.com/

Camila Barreto disse...

Poxa, valeu pelo tutorial, super simples e bem explicadinho!

Amei o blog, estou seguindo!
Um beijo!
✿Camie
Camila In Wonderland

Flávia disse...

Olá estou te convidando para participar de um concurso no meu blog:

http://www.senhoritaperfeita.blogspot.com

Seria uma honra você participar