Tutorial - Menu Stick

Nossa amo Paris, quero um dia ir lá, é tão perfeito e romântico! Ah, achei essa imagem no A era feminina, um dos blogs que eu amei visitar amei o conteúdo de lá, e todo designer! Parabéns!

Oi pessoal, eu andei pesquisando e tô super interessada em css, é como se eu tivesse me encontrado! Eu ajudei a minha irmã a criar o layout dela o blog dela é novo o nome é Meu Mundo Muito Doce, que cute né? Pois é meninas se vocês visitarem o blog dela vão ver o menu, chama-se menu Stick, eu não criei, eu achei no Tutoriar, super amei e resolvi dá umas editadas. Se caso vocês não souberem que menu eu falo é esse: #Preview Aqui#

Espero que gostem, vou passar o tutorial. Prontos?

Primeiro vão em Modelo > Editar HTML procurem por: ]]</b:skin> (pra vocês acharem é só apertar Ctrl + F)

Agora cole ACIMA, o seguinte código:

/*---Início do Menu Stick - Fakescomm - Por Malu Aguiar---*/
Stick {
font-family: century gothic; /* Fonte do Menu */
width: 10%; /* Tamanho do Menu */
float: left;
background:#C3C; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 11px;
-webkit-border-top-left-radius: 1px;/* Efeito das bordas */
border-radius: 11px;
border-top-left-radius: 1px;
-webkit-transition-duration: .20s; /* efeito trasition */
font-size: 16pt; /* Tamanho da fonte */
color: #000; /* Cor da fonte */
}
Stick:hover {
font-family: century gothic; /* Fonte do Menu quando passa o mouse */
width: 50%;
float: left;
background:#FCF; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 22px;
border-radius: 22px;
-webkit-transition-duration: .20s; /* efeito trasition */
font-size: 16pt; /* Tamanho da fonte do Menu quando passa o mouse */
font-style:bold; /* Fica em negrito quando passa o mouse */
color: #000; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu Stick - Fakescomm - Por Malu Aguiar---*/

Edite de acordo com as instruções, o próximo passo é: Vá em Layout > Adicionar Gadget > HTML/JavaScript e cole o código abaixo, e edite de acordo com as instruções!

<a href="Link"><Stick>Nome</ct></a>
<a href="Link"><Stick>Nome</ct></a>
<a href="Link"><Stick>Nome</ct></a>
<a href="Link"><Stick>Nome</ct></a>
<a href="Link"><Stick>Nome</ct></a>

Pronto! Agora deixe um comentário, vou ficar muito agradecida!