19/09/2012

Tutorial: Menu Blueberry

||

Trago um menu zinho muito kawaii que achei então decidi posta-lo aqui e claro dando todos os créditos a Miki Candy então vamos lá?

Eu não pude fazer uma imagem de demostração mas coloquei no blog de demostração, aqui esta

Se quiser tentar vá para dentro do seu HTML e procure por

]]></b:skin>

Assim que o achar acima dele cole o próximo código

/* Menu Blueberry by Miki Candy */
blueberry{
color: #fff; /* cor da fonte quando passa o mouse */
text-align:center;
font-size: 11px; /* Tamanho da fonte do menu */
background: #3FCFAD ; /* Fundo do menu */
padding: 2px;
float: left;
margin: 2px;
cursor: crosshair; /*cursor */
width: 45%; /* tamanho do menu */
-webkit-transition-duration: .80s;
border:1px dotted #D682DE; /* bordas */
border-radius: 10px; /*---- bordas arredondadas ----*/
}
blueberry:hover{
background:#D682DE; /* fundo do menu quando passa o mouse */
border:1px solid #3FCFAD; /* bordas quando passa o mouse */
color: #fff; /* cor da fonte quando passa o mouse */
-webkit-transition-duration: .80s;
border-radius: 5px; /*---- bordas arredondadas ----*/
}

Para finalizar vá ate o seu layout e abra um gadget HTML/Java Script, e dentro cole o próximo código

<div>
<a href="URL"><blueberry>NOME </blueberry></a>
<a href="URL"><blueberry>NOME </blueberry></a>
<a href="URL"><blueberry>NOME </blueberry></a>
<a href="URL"><blueberry>NOME </blueberry></a>
</div>

Prontinhos! Beijos e ate a próxima bye bye

3 comentários:

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram