Tutorial: Menu Bubble (exclusivo)

Olá pessoinhas! Como foi o dia de vocês? O meu foi normal. Sabe os marcadores que havia falado que fiz na aula? Fiz mais hoje. Não na aula, porque já estou de férias, em casa mesmo. Ficaram bonitinhos. Qualquer dia trago o tutorial para vocês. Mas serão de dois marcadores: esse e um outro.  O outro eu já fiz faz tempo, as fotos já foram tiradas também. Mas dá uma preguiça de passar pro computador... Mas eu passo, prometo.

Domingo, quem visitou o blog, viu que eu havia feito meu primeiro menu. Pois é, eu fiz, dá pra acreditar? Ele ficou tão lindinho! Pensei em não passar para vocês, deixar ele para mim mesmo, mas vocês sempre estão aqui, me apoiando. Mas já fique claro que é proibido reblogar. O SB é "registrado" no My Free Copyright, e você pode utilizar ele caso algo aconteça só pra deixar claro. Bem, ficou curioso? Veja a preview. 

1. Vá em Modelo > Editar HTML e clique nas três setinhas para abrir o <b:skin>...</b:skin>

2. Aperte CTRL+F e digite na barra de pesquisa: ]]></b:skin>

3. Acima desse código, cole:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
.Bubble {
font-family: silkscreen;
letter-spacing: 1px;
font-size: 8px;
text-transform: lowercase;
line-height: 10px;
background: #fff; /* Fundo */
color: #fff; /* Cor da fonte */
width: 36px;
height: 10px;
float: center;
padding: 4px;
text-align: center;
margin: 4px;
border: 1px solid #fff; /* Espessura, tipo e cor da borda */
border-radius: 2px;
-webkit-transition-duration: .90s;
}
.Bubble:hover {
background: #fff; /* Fundo hover */
border: 1px solid #fff; /* Espessura, tipo e cor da borda hover */
color: #fff; /* Cor da fonte hover */
border-radius: 8px;
-webkit-transition-duration: .90s;
}

Bem, eu deixei para vocês mesmos personalizarem, por isso todos os #fff. O código em si já está todo explicadinho, mas se alguém tiver dúvida, é só me perguntar. Aconselho mudar apenas o que está em negrito, se não você vai fazer caca. Vocês podem usar esta tabela de apoio, ou até mesmo o editor do blogger. Recomendo que usem cores mais escuras/fortes para o efeito em hover ficar mais legal.

Relembrando, eu criei esse menu. Ele é exclusivo.

É proibido reblogar este menu! 

Beijos e obrigada, Be.