Tutorial: Menu Blue Dream

Hi! Tudo bem?

Hoje eu trago um tutorial (nunca postei um tutorial aqui.... é, bom, não me lembro disso), de como colocar o menu Blue Dream no blog.
Originalmente ele é azul, mas a cor, quem escolhe é você!

Bom, primeiramente, eu gostaria de créditar o tuto ao blog KW.

Agora, sim.

Vamos lá?




AH, a imagem do menu:

IMAGEM DE KW.

Fofo, não?
Tuto:

Primeiro:  Pegue o código abaixo. Ele corresponde a fonte do menu. (Caso não queira, ignore essa etapa).

@font-face {  font-family: 'Play';  font-style: normal;  font-weight: 400;  src: local('Play'), url(http://themes.googleusercontent.com/static/fonts/play/v3/-SXnV4mZjf4oh1IBw13WZw.woff) format('woff');}

SALVE.

Segundo:   Pegue este outro código. Ele corresponde á personalização do menu, como cores e etc.

soleil {font-family: 'Play'; font-size: 8px; text-transform: uppercase;  margin-bottom: 1px;  text-indent : 20px; height:15px;-webkit-transition-duration: .30s; background : #eee;padding:2px;padding-left: -15px; padding-top: 5px; text-shadow: 1px 1px 1px #fff; letter-spacing: 1px; border-radius: 10px; margin-bottom: 2px;}

.soleil a {color: #888;}.soleil a:hover {color: #fff;}.soleil:hover { background : #000080; color: #fff;-webkit-transition-duration: .30s; ;text-shadow: 1px 1px 1px #b6c6d3;}

Personalize o que quiser. Em seguida, salve.

Terceiro: Adicione um novo gadget de HTML e cole o seguinte código:

<div class="soleil"> <a href="http://url">NOME DO LINK</a></div>

<div class="soleil"> <a href="http://url">NOME DO LINK</a></div>

E salve.

É só isso.

Créditos ao KW.

Bjs,

Laura