Menu Bubblegum

Bom dia, estúpidos adocicados!

Trouxe um tutorial de um menu super fofinho e fácil de fazer:

Vamos conferir?

Tutorial.


1. No Blogger, vá em Modelo> Editar HTML.
2. Clique em 'Prosseguir'. Tecle Ctrl F e procure por:

]]></b:skin>

3. Logo acima dessa tag, cole:

.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;
}

4. Salve.
5. Vá para Layout. Adicione um novo 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>

6. Edite as partes em negrito e salve.

Código original por Help-4all e encontrado pelo tuto da Chassy.

Beijokas!