Menu double [adaptado]

Para quem tinha prometido postar ontem, nem dei as caras, não foi? Ah, e comentadoras recentes - eu tenho lido tudo, só ainda não respondi, mas fico contente por estarem a gostar do meu trabalho e vou já visitar os vossos blogs ;) O menu de hoje, estou também a usar no meu blog principal. Para fazer misturei o menu double do Diário de uma otome - cliquem no nome para ir ao tutorial original - e um modelo que não consegui achar de novo, mas tenho quase a certeza que era do The moon reverse ou do GNMH. Então quem eventualmente reconhecer o modelo (adaptei ligeiramente, porém), por favor avise-me para colocar os créditos devidos :) Trago dois modos de ele ser usado no gadget, um mais elaborado e que é a graça do menu, e um outro muito mais simples. O código para adicionar no HTML do blog é igual para ambos

Prévia: www

Tutorial

Procure por /b:skin e em cima cole:

.dd1{

width:30%;

padding: 5px 0 4px 0;

margin: 0 0 4px 4px;

float: left;

height: 17px;

text-align: center;

font-size: 13px;

background: #d3ebe8;

border: 1px solid #c5dbd8;

outline: solid 1px #fff;

outline-offset: -4px;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

.dd1:hover{

outline: solid 0px none;

opacity: 0.5;

outline-offset: -20px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

text-shadow: 1px 1px 0 #514758;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

.dd1 a{

color: #b8b78a;

text-shadow: 1px 1px 0 #fff;

text-decoration: none;

}

.dd2{

width:30%;

padding: 5px 0 4px 0;

margin: 0 0 4px 4px;

float: left;

height: 17px;

text-align: center;

font-size: 13px;

background: #e3d1c3;

border: 1px solid #d4c2b4;

outline: solid 1px #fff;

outline-offset: -4px;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

.dd2:hover{

outline: solid 0px none;

opacity: 0.5;

outline-offset: -20px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

text-shadow: 1px 1px 0 #514758;

-moz-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

.dd2 a{

color: #ba9e96;

text-shadow: 1px 1px 0 #fff;

text-decoration: none;

}

Cole num gadget HTML/Javascript:

<a href="LINK"><div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME">NOME</div></a>
<a href="LINK"><div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'">#</div></a>
<a href="LINK"><div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME'">NOME</div></a>
<br />
<a href="LINK"><div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'">#</div></a>
<a href="LINK"><div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME'">NOME</div></a>
<a href="LINK"><div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'">#</div></a>
<br />
<a href="LINK"><div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME">NOME</div></a>
<a href="LINK"><div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'">#</div></a>
<a href="LINK"><div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME'">NOME</div></a>

Se quiser a versão mais simples (www), cole antes isto no gadget:

<div class="dd1"><a href="LINK"> NOME </a></div>

<div class="dd2"><a href="LINK"> NOME </a></div>

<div class="dd1"><a href="LINK"> NOME </a></div>

<div class="dd2"><a href="LINK"> NOME </a></div>

<div class="dd1"><a href="LINK"> NOME </a></div>

<div class="dd2"><a href="LINK"> NOME </a></div>

<div class="dd1"><a href="LINK"> NOME </a></div>

<div class="dd2"><a href="LINK"> NOME </a></div>

<div class="dd1"><a href="LINK"> NOME </a></div>

Voilá, era tudo!