clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

30/07/2012

Tutorial: Menu Bubblegum


Hayoooo!!! Como vão todos vocês? Trago um menu super bonitinho!!!! Ele se chama Bubblegum, foi adaptado pelo blog Sweet Poison, então todos os créditos são para as meninas de lá viu? Eu não tive como colocar imagens, mas caso queiram ver aqui esta!

Em seu HMTL procure por:

]]></b:skin>

Achou agora acima dele adicione todo esse codigo:

.bubblegum {
font-size: 12px;
font-family:georgia;
color: #fff;
float:left;
padding:4px;
text-align:center;
height:20px;
margin:2px;
background:#FF69B4;
width:25px;
box-shadow: 0 0 5px #fff;
border-radius:5px;
-webkit-border-bottom-right-radius: 45px;
-webkit-border-bottom-left-radius: 45px;
-moz-border-radius-bottomright: 45px;
-moz-border-radius-bottomleft: 45px;
border-bottom-right-radius: 45px;
border-bottom-left-radius: 45px;
filter: alpha(opacity=75);
moz-opacity:.80;
opacity:.80 ;
border-top: 3px solid #FF1493;
-webkit-transition-duration: .70s;
}

.bubblegum:hover {
color: #336666;
float:left;
padding:4px;
text-align:center;
height:55px;
margin:2px;
background:#AFEEEE;
width:25px;
box-shadow: 0 0 5px #fff;
border-radius:5px;
-webkit-border-bottom-right-radius: 45px;
-webkit-border-bottom-left-radius: 45px;
-moz-border-radius-bottomright: 45px;
-moz-border-radius-bottomleft: 45px;
border-bottom-right-radius: 45px;
border-bottom-left-radius: 45px;
filter: alpha(opacity=100);
moz-opacity:1.0;
opacity:1.0;
border-top: 7px solid #00BFFF;
-webkit-transition-duration: .70s;
}

Salve ele, e então vá para layout e adicione um gadget de HTML/Javascript e cole:

<a href="URL 1" class="bubblegum">01</a>
<a href="URL 2" class="bubblegum">02</a>
<a href="URL 3" class="bubblegum">03</a>
<a href="URL 4" class="bubblegum">04</a>

Prontinho! Viu como e lindo?

Nenhum comentário:

Antes de sair, não esqueça de comentar!