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:

Postar um comentário

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