20/09/2012

Menu Sidebar Hover [003]


Yo meus fofuchos! Trago mas um tutorial de fazer menu de folhinha, os créditos são do blog Capture Dream. O menu realmente é muito fofo e bem simples e vale a pena usar e ai vamos tentar? Caso queira ver clique no menu de brevia mais abaixo.


1. Procure em seu HTML pela tag:

]]></b:skin> 


2. Assim que achar cole esse codigo em cima dele:

Códigos
/*---Início do Menu---*/bdg {font-family: tahoma; /* Fonte do Menu */width: 17%; /* Tamanho do Menu */float: left;background:#8EE5EE; /* Cor do fundo do Menu */padding: 5px;text-align: center;margin: 2px;-webkit-border-radius: 9px 0px 9px 0px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */font-size: 08pt; /* Tamanho da fonte */color: #fff; /* Cor da fonte */}
bdg:hover {font-family: tahoma; /* Fonte do Menu quando passa o mouse */width: 17%; /* Tamanho do Menu quando passa o mouse */float: left;background:#FF69B4; /* Cor do fundo do Menu quando passa o mouse */padding: 5px;text-align: center;margin: 2px;-webkit-border-radius: 0px 9px 0px 9px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */color: #fff; /* Cor da fonte do Menu quando passa o mouse */}/*---Fim do Menu com Efeito ---*/

3. E então salve! Agora abra um gadget HTML/JavaScript. Com ele aberto dentro dele você coloca isso:

Códigos
<a href="Link"><bdg>Nome</bdg></a>

Agora  basta você colocar o link e o nome que desejar *^^* 

3 comentários:

  1. estava mesmo procurando esse tuto, muito bom bjs e obrigado...
    http://beyond-my-glitter.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ainnnnn que cabelo maravilhoso amei a cor!!!
      Não foi nada é um prazer ajudar.

      Excluir
  2. que lindo!! eu simplesmente adorei *-* in love pelo teu blog
    http://thelittlethings4you.blogspot.com.br/

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345