Menu Chocolate

Yoo ~ ♥

Nesses últimos dias eu estou com muita insonia, tanto que ontem fui dormir era três horas da manhã. E é exatamente por isso que estou aqui, para ver se fico cansada e vou logo me deitar (｡･ω･｡)ﾉ Já fiz algumas postagens que deixei em rascunho para postar amanhã, assim fica melhor pra mim, porque conseguirei ficar com um tempo livre para fazer outras coisa que sou obrigada a fazer, tipo estudar para as provas da próxima semana, cujos assuntos estão super difíceis, chega a me dar dor de cabeça só de pensar T_T

Então, neste post trouxe um menu bem fofo para ensinar a vocês. Realmente ele me chamou bastante atenção, o efeito hover é bem simples, mas ele tem um visual atrativo, que com certeza vai despertar interesse em qualquer um, em apenas dois passos ele já está aplicado ao seu blog, e poderá usar a vontade. Vejam a live preview aqui e continuem lendo para ver o tutorial.

1. Pesquise por ]]></b:skin> e acima da tag, cole:

.choco {

background: #AD813F;

padding: 5px;

margin: 2px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

text-align: center;

font-family: pharmacy;

font-size: 20px;

text-shadow: 1px 1px 0px #51371C;

-moz-box-shadow: inset 0px 0px 10px #51371C, 1px 1px 0px #FF9FCF, 2px 2px 0px #51371C;

-webkit-box-shadow: inset 0px 0px 10px #51371C, 1px 1px 0px #FF9FCF, 2px 2px 0px #51371C;

box-shadow: inset 0px 0px 10px #51371C, 1px 1px 0px #FF9FCF, 2px 2px 0px #51371C;

-moz-transition-duration: 1s;

-webkit-transition-duration: 1s;

display: inline;

}

.choco:hover {

-moz-opacity: 0.7;

-webkit-opacity: 0.7;

}

c {

color: #FF9FCF;

}

2. Adicione um gadget HTML/JavaScript e cole o seguinte código:

<div class="choco"><a href="LINK"><c>NOME</c></a></div>

<div class="choco"><a href="LINK"><c>NOME</c></a></div>

<div class="choco"><a href="LINK"><c>NOME</c></a></div>

Altere apenas o que se pede e salve.