Texto Hover / Novo Layout

Pois é, eu já troquei o layout de novo. É, eu sei que esse está um lixo, mas eu já disse que a minha internet também está nessas mesmas condições. Mas agora estou na casa do meu pai, a internet está ótima, e pude terminar o template. E ainda vim com um super-tutorial (tá, não é nada super, é simples, mas eu amei) que eu mesma editei, um textinho que muda quando passa o mouse, ou seja, hover. Na verdade eu peguei o menuzinho do Place Fame, e editei ele todo. Tem 3 tipinhos pra vocês escolherem. E você pode usar esse em qualquer lugar: Ou nos afiliados, nas tags, ou como um menu mesmo, o que você quiser. Bem, vamos ao tuto?

Passo 1: Escolha um menu
Disponibilizei 3 estilos de menus pra vocês: Cada um tem um código diferente. O 1º é azul, o segundo, rosinha, e o 3º é lilás. Não são só as cores diferentes, todo o estilo!
Clique aqui e veja o demo dos 3 menus, e então escolha o seu para seguir com o tutorial.

Passo 2: Instale o código


Procure no seu HTML por ]]</b:skin> e acima dele cole apenas o código correspondente ao menu que você escolheu:

Menu 1

/* ............. Texto Hover1 por girlson-line.blogspot.com.........*/
#textohover1 {
border-left: 3px solid #63B8FF;
border-bottom: 1px dashed #63B8FF;
color: #666666;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-left : 5px;
margin-bottom: 3px;
}
#textohover1:hover {
background: #63B8FF;
color: #fff;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-right : 5px;
margin-bottom: 3px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* .................. Texto Hover1............*/

Menu 2 

/* ............. Texto Hover2 por girlson-line.blogspot.com.........*/
#textohover2 {
border-top: 1px dotted #CDB38B;
background: #FFDAB9;
border-bottom: 1px dotted #CDB38B;
color: #666666;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-left : 5px;
margin-bottom: 3px;
}
#textohover2:hover {
background: #EECBAD;
color: #fff;
font-family: tahoma;
font-size: 11px;
text-align : left;
padding-bottom : 2px;
padding-right : 5px;
margin-bottom: 3px;
}
/* .................. Texto Hover2............*/

Menu 3 

/* ............. Texto Hover3 por girlson-line.blogspot.com.........*/
#textohover3 {
background: #D8BFD8;
color: #fff;
font-family: tahoma;
font-size: 11px;
text-align : right;
padding-bottom : 2px;
padding-left : 5px;
margin-bottom: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#textohover3:hover {
background: #EEE5DE;
color: #BEBEBE;
font-family: tahoma;
font-size: 11px;
text-align : right;
padding-bottom : 2px;
padding-right : 5px;
margin-bottom: 3px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* .................. Texto Hover3............*/ 

Passo 3: Coloque o menu onde quiser
Você pode pôr o menu nos posts, no gadget, em qualquer canto. Basta copiar o código abaixo, e colar onde quiser.
Menu 1

<div id="textohover1">
Seu texto ou link aqui</div>

Menu 2

<div id="textohover2">
Seu texto ou link aqui</div>

Menu 3

<div id="textohover3">
Seu texto ou link aqui</div>

Não edite nada além de onde está escrito "Seu texto ou link aqui", ou o menu ficará prejudicado. Você pode colocar em vez do texto um link. Basta usar o código: NOME


É só isso povo, espero que tenham gostado do menu que eu mesma fiz. Por favor, comentem, vocês não pensam no trabalhinho que eu tive com isso, e queria muito ouvir vocês.
Beijos.