Menu De Tags em Duas Colunas e Cores

Trouxe mais um menu super fofo, encontrei ele no blog Wonderland lá tem vários menus lindos. Bom, esse menu tem duas colunas e duas cores, vejam:

Vá em seu HTML, procure por ]]></b:skin> e acima dessa tag, cole esse código:

.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
@font-face { font-family: PF Tempesta Five Compressed; src: url('http://static.tumblr.com/79jiui3/LSSn0mwrd/pf_tempesta_five_compressed.ttf') }
#rosa {
width: 83px;
margin: 2px;
padding: 1px 0px 1px 2px;
background: #ffced4;
border: 1px solid #f7aab4;
box-shadow:inset 1px 1px 0 0 #fff;
font-family: PF Tempesta Five Compressed;
font-size: 8px;
color: #ea9ca7;
font-weigth: lighter;
text-shadow: 0px 1px 0px #fff;
-webkit-transition-duration: .1s;
}
#rosa a {
color: #ea9ca7;
}
#rosa:hover{
background: #ffd3d9;
-webkit-transition-duration: .1s;
}
#verde {
width: 83px;
margin: 2px;
padding: 1px 0px 1px 2px;
background: #d8e6d6;
border: 1px solid #c4dbc2;
box-shadow:inset 1px 1px 0 0 #fff;
font-family: PF Tempesta Five Compressed;
font-size: 8px;
font-weigth: lighter;
text-shadow: 0px 1px 0px #fff;
-webkit-transition-duration: .1s;
}
#verde a {
color: #a6c7a2;
}
#verde:hover {
background: #deebdc;
-webkit-transition-duration: .1s;
}

Agora, em um gadget HTML/JavaScript cole esse código:

<div class="esquerda">
<div id="rosa">
<a href="SEU LINK AQUI">Título da Tag</a></div>
<div id="verde">
<a href="SEU LINK AQUI">Título da Tag</a></div>
<div id="rosa">
<a href="SEU LINK AQUI">Título da Tag</a></div>
<div id="verde">
<a href="SEU LINK AQUI">Título da Tag</a></div>
</div>
<div class="direita">
<div id="rosa">
<a href="SEU LINK AQUI">Título da Tag</a></div>
<div id="verde">
<a href="SEU LINK AQUI">Título da Tag</a></div>
<div id="rosa">
<a href="SEU LINK AQUI">Título da Tag</a></div>
<div id="verde">
<a href="SEU LINK AQUI">Título da Tag</a></div>
</div>