Como colocar um menu "diferente" no blog

Oi gente, tudo bem? Desculpem a ausência, nossa estava fazendo algumas encomendas.
Mas á um tempinho uma leitora perguntou como eu fazia um menu que tinha antes no blog, que eu acho muito fofo e também muito simples, fica legal na área de extras.
Vejam um exemplo desse menu:

Eu acho ele bem legal, porque quando a gente passa o mouse o gif, a linha e a cor da letra ficam diferentes.

Bom, vamos ao tutorial, se quiser aprender, clique em mais informações.

Primeiro vá em Design> Editar HTML, procure por:

]]></b:skin>

Quando encontrar cole logo ACIMA dele, esse código:

/* Cute Menu

----------------------------------------------- */

#menuextra {

display : block;

font-size: 11px;

font-family: Tahoma;

letter-spacing : 0;

border-bottom : 1px dashed #CDB7B5;

background-repeat : no-repeat;

text-indent : 5px;

vertical-align : middle;

text-decoration : none;

line-height : 15px;

margin-bottom : 1px;

background : url('URL DO MINE GIF 1') no-repeat left;

padding-left : 10px;

}

#menuextra:hover {

display : block;

text-decoration : none;

vertical-align : middle;

line-height : 15px;

border-bottom : 1px dashed #FF69B4;

background : url('URL DO MINE GIF 2') no-repeat left;

padding-left : 10px;

}

A primeira palavra em vermelho é a cor da linha pontilhada antes de passar o mouse e a segunda é quando passa o mouse.

E em roxo é o mini gif que fica ao lado do link. Escolha o seu e coloque, o primeiro é antes de passar o mouse e o segundo é depois de passar o mouse.

Agora vamos colocar onde você quer, copie o código abaixo e cole onde quiser que o seu menu apareça:

<div id="menuextra"><a href="Link ">Nome do link</a></div> <div id="menuextra"><a href="Link">Nome do link</a></div>

Onde está link você irá colocar o link, e depois onde está Nome do link vai ser o nome do link avá

E é isso espero que tenham gostado,e conseguido fazer!

Bjks