Tutorial: Colocando menu de tags fofo no blog

Olá pessoal, beleza? Hoje trouxe um tutorial muito simples pra vocês que eu achei no blog K-World, que é um blog muito fofo, cheio de tutoriais lindos. Eu achei esse bem legal pois é muito simples, basta copiar os códigos, colar e editar da forma que preferir. Vamos lá? Bora:

Primeiramente, para colocar qualquer um deles basta você ir em "Layout>Adicionar um Gadget> Código HTML" e colar o código no campo indicado, fazendo as alterações de seu gosto.

Opção 1:

CLIQUE EM "LEIA MAIS" PARA CONTINUAR.

<style>
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutags20{
background-color: #ffeaee;
width: 91%;
height: 11px;
float: left;
font: 11px arial;
color: #e6adb9;
padding: 2px 0 6px 0;
text-align: center;
margin: 1px;
margin-bottom: 4px;
border-top: 1px solid #f7d0d8;
border-bottom: 1px solid #f7d0d8;
border-left: 3px solid #f7d0d8;
border-right: 3px solid #f7d0d8;
text-shadow: 1px 1px 0 #fff2f4;
} </style>
<div class="esquerda">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>
<div class="direita">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
 

</div>

Opção 2: 

<style> 

.direita { float:right; width:49%; text-align:justify; }

.esquerda { float:left; width:49%; text-align:justify; }

#menutags20{

background-color: #e9e9e9;

width: 98%;

height: 11px;

float: left;

font: 10px arial;

color: #a2a2a2;

padding: 1px 0 4px 0;

letter-spacing: 2px;

text-align: center;

margin: 1px;

text-transform: lowercase;

margin-bottom: 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;

}

#menutags20:hover{

background-color: #525252;

width: 98%;

height: 11px;

float: left;

font: 10px arial;

color: #dad7d7;

padding: 1px 0 4px 0;

letter-spacing: 2px;

text-align: center;

margin: 1px;

text-transform: lowercase;

margin-bottom: 4px;

}

 </style>

<div class="esquerda">

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

</div>

<div class="direita">

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

<a href="SEU LINK AQUI" id="menutags20">Nome</a>

</div>

 Opção 3:

<style>

.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutags20{
background-color: #e9eef3;
width: 98%;
height: 11px;
float: left;
font: 11px trebuchet ms;
color: #b2bfcb;
padding: 1px 0 6px 0;
letter-spacing: 1px;
border-left: 1px solid #dae0e6;
border-top: 1px solid #dae0e6;
border-right: 1px solid #dae0e6;
border-bottom: 3px solid #ced5db;
text-align: center;
margin: 1px;
margin-bottom: 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-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;
}


 </style>
<div class="esquerda">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>
<div class="direita">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>

Créditos: K-World