Menu Cute Transition

Oi moranguetes :3

Hoje eu tenho mais um tutorial, e é de um menu bem cute, que é inclusive o que eu vou usar em Layout que eu tô produzindo para um blog, que logo logo vou divulgar aqui!

Bom, para ver o resultado do menu é só clicar Aqui!

Bora começar?

Primeiro, você tem que saber quantas páginas vai colocar no menu, pois ele quando é grande ocupar muito espaço,e não é muito bonito,quando ele fica um em baixo do outro a não se que esteja que nem lá na Preview. Ok,vamos começar!

Modelo>Editar HTML>Procure por:

]]></b:skin>

E Acima desta tag cole este código:

/*---Início do Menu Cute trasition By: www.tutoriar.com---*/

ct {

font-family: century gothic; /* Fonte do Menu */

width: 10%; /* Tamanho do Menu */

float: left;

background:#FF82AB; /* 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: .80s; /* efeito trasition */

font-size: 10pt; /* Tamanho da fonte */

color: #000; /* Cor da fonte */

}

ct:hover {

font-family: century gothic; /* Fonte do Menu quando passa o mouse */

width: 10%; /* Tamanho do Menu quando passa o mouse */

float: left;

background:#eee; /* 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: .80s; /* efeito trasition */

font-size: 10pt; /* 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 Cute trasition By: www.tutoriar.com---*/

Modifique o menu da sua maneira! Gente, no Layout que eu tô fazendo eu coloquei o tamanho dele sem hover de 40% e com hover de 30%, então eu recomendo, porque fica bem legal!

Pronto,agora vamos aplicar!

Vá em Layout, e adicione um gadget de HTML, e nele cole isso:

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

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

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

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

Em "Link" coloque o o link da página que será redirecionada, e em "Nome" coloque o nome da página.

Como podem ver, créditos ao Tutoriar.

Beijos e espero que gostem! e não se esqueçam de comentar.