Menu double (Adaptado + Simplificado)

Quem não ama menus? Eu amo menus! Esse menuzinho encontrei lá no Chuva de HTML, sendo uma adaptação de um menu do blog GNMH e do The Moon, então ao utilizarem, credite o trio dos blog citados, afinal só estou compartilhando aqui.

Brevia do efeito

1. Para aplica-lo é o mesmo de sempre, vá ate seu HTML e procure ]]></b:skin> e acima dele cole o código abaixo:

Códigos

.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;
}

Salve! 

2.Agora vá em Layout, e abra um novo gadget java/script e dentro dele cole:

Códigos

<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 desejar uma versão mais simplificada cole esse no lugar:

Códigos

<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>

Arrume onde se pede e salve!