Tutorial - Menu hover na imagem

Olá.

Como está sendo o inicio de Domingo de vocês? Eu quero aproveitar bastante esse Domingo já que é meu último dia de férias, não estou triste até por que eu quero conhecer pessoas novas. Hoje eu acordei do tipo "quero postar 1923 vezes hoje" então eu peço que por favor façam pedidos na ask. 

Hoje vim trazer um tutorial de uma coisa que eu acho vocês gostaram, pelo fato de ser muito bonito, o tutorial do menu hover na imagem, que para quem não sabe é esse menu atual. Vejam a preview maior aqui:  

1º: Vá até seu html do blog e pesquise por: ]]></b:skin> e acima disto cole o seguinte código:

/* --- Imagem ------- */

.imagem{background: url('URL da imagem') top left no-repeat; width: 220px; height: 300px;}

/* --- Menu ------- */

.menu{width: 210px; position: absolute; opacity: 0; -webkit-transition: all 1s ease; -moz-transition: 

all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; margin: 5px;}

.menu a, .menu span{background: #b7a89f; color: #ffffff; text-shadow: 1px 1px 0 #9f8b7d; text-align: center; 

font-family:"04b03", small fonts; font-size:8px; text-transform: uppercase; border-left: 4px double #9f8b7d; 

cursor: pointer; display: inline-block; margin: 1px 1px 0px 0px; padding: 5px 0; display: inline-block; width: 47%;}

/* --- Hover do menu ------- */

.imagem:hover .menu{opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}

/* --- Fonte ------ */

@font-face {font-family: "PF Tempesta Seven Condensed";

src: url('http://static.tumblr.com/8yo5xxv/b5cm22t2y/pf_tempesta_seven_condensed.ttf'); format("truetype");}

Edite como quiser, visualize se estiver tudo certo salve.

2º: Crie um novo gadget HTML e cole o seguinte código:

<div class="imagem"><div class="menu">

<a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a>

<a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a>

</div></div>

 Agora edite o que está em negrito, lembrando que no lugar de # você colar o link e em link você coloca o nome do link, exemplo: em vez de # bote http://seublog.blogspot.com/p/sobre.html e no lugar de link bota Sobre.

Espero que tenham gostado e os créditos são do Things to Help You.