Menu Cute Simples

Boa Tarde!! Como esta sendo a volta a aulas de vocês? eu to tranquila, minhas aulas de verdade só começaram faz alguns dias e começo de semestre é sempre tranquilo, porque entra novas aulas e novos professores que se apresentam e falam sobre sua matéria, enfim só mais para o fim do semestre vou começar a ter trabalhos e provas então essa época é sempre tranquila.

Hoje temos mais um menu, dessa vez eu crie ele então é exclusivo do blog \o/ Ele é bem simples, mas ao mesmo tempo fofo e alterando as cores fica bom com qualquer layout. Se quiserem conferir o Preview clique aqui.

Vamos ao Tutorial:

1° Passo: Vá em Modelo > Editar HTML.

2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>

3° Passo: Cole acima de "]]></b:skin>" o código:

/*-----Início do Menu Cute Simples por myfluffyrainbow.blogspot.com -----*/
.cutes {
width: 228px; /*----- Largura -----*/
text-align:center;
margin-bottom:1px;
padding:1px; font-size: 8pt;
display:inline-block;
color: #fff; /*----- Cor da Fonte -----*/
text-transform: uppercase;
background-color:#F9CDAD; /*----- Cor do Fundo -----*/
letter-spacing:1px;
-webkit-transition-duration: .80s;
}
.cutes:hover{
color: #fff; /*----- Cor da Fonte Hover -----*/
background-color:#FC9D9A; /*----- Cor do Fundo Hover -----*/
border-radius: 5px;
-webkit-transition-duration: .80s;
}
/** FIM Menu Cute Simples **/

5° Passo: Edite o código conforme seu gosto e preferencia.

6° Passo: Cole em um Gadget Java/Script o seguinte código:

<a class="cutes" href="http://www.blogger.com/Link" target="_blank">Nome</a>
<a class="cutes" href="http://www.blogger.com/Link" target="_blank">Nome</a>
<a class="cutes" href="http://www.blogger.com/Link" target="_blank">Nome</a>

7° Passo: Altere o código colocando o link e o nome do link.

Espero que tenham gostado do tutorial e do menu e se usarem deem os devidos créditos <3