22/05/2014

Tutorial: Menu folhinha para sidebar.


Olá!!
Hoje eu vou trazer um tutorial pra vocês! É o menu folhinha para sidebar.
Peguei esse tutorial no Menina Princesa, e são os créditos, todos pra ela.
Caso queiram ver antes de fazer cliquem aqui ( menu pra sidebar 3).
Vamos lá!



Vá em seu html e procure pela tag:

 ]]></b:skin>

Agora coloque esse codigo acima da tag que você procurou:


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 */
}



 Então salve! Agora abra um gadget html/javascript e cole:

a href="Link"><bdg>Nome</bdg></a>
<a href="Link"><bdg>Nome</bdg></a>
<a href="Link"><bdg>Nome</bdg></a>
<a href="Link"><bdg>Nome</bdg></a>
Agora, é só colocar o link e o nome que você desejar! E pronto é só salvar!


Bom, foi isso! Até o proximo post! Comente!

Raiane

Um comentário:

  1. Esse menu é muito fofo! Adorei :D

    xoxo ✿ www.quirky-tree.com

    ResponderExcluir

-Seguindo, segue devolta?
Sigo sim, mais só se eu gostar do blog!
- Parceira? Mande pro meu email: Raianetigre@hotmail.com
-Spam? Excluido!
Beijão