• Crie imagens .gif com fundo transparent de tamanho 64px x 106px e posicione os ícones da maneira que se segue:

• 
  
  Faça uma imagem neste modelo para cada item do menu;
• 
  
  Hospede as imagens, copie a url de cada um e no CSS do código do template (acima de ]]></b:skin>) coloque este código que corresponde à cada link do menu:

a#m1, a#m1:link, a#m1:visited, a#m1:active {

background: transparent url(url da primeira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m1:hover {background-position: left bottom;}

a#m2, a#m2:link, a#m2:visited, a#m2:active {

background: transparent url(url da segunda imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m2:hover {background-position: left bottom;}

a#m3, a#m3:link, a#m3:visited, a#m3:active {

background: transparent url(url da terceira imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m3:hover {background-position: left bottom;}

a#m4, a#m4:link, a#m4:visited, a#m4:active {

background: transparent url(url da quarta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m4:hover {background-position: left bottom;}

a#m5, a#m5:link, a#m5:visited, a#m5:active {

background: transparent url(url da quinta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m5:hover {background-position: left bottom;}

a#m6, a#m6:link, a#m6:visited, a#m6:active {

background: transparent url(url da sexta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m6:hover {background-position: left bottom;}

Para tantos forem os itens do menu, acrescente o trecho:

a#m6, a#m6:link, a#m6:visited, a#m6:active {

background: transparent url(link da sexta imagem) no-repeat left top;

display: block;

height: 54px;

width: 64px;

}

a#m6:hover {background-position: left bottom;}

Note que atribuímos uma ID para os links que compõem o menu e que, nas palavras do mestre Maujor: id deve ser única, isto é, um e somente um elemento ou seletor deve estar identificado com determinada id. Por isso, ao acrescentar novos links à sua lista, você deve criar uma nova ID (nome), ou seja, à partir de #m6 deve se seguir #m7 ou qualquer outro nome que seja único e exclusivo.

Para que você entenda o que está fazendo (e não simplesmente copie e cole sem conseguir criar variações ao seu gosto), vejamos:

a#m1, a#m1:link, a#m1:visited, a#m1:active {
background: transparent url(link da primeira imagem) no-repeat left top;
display: block;
height: 54px;
width: 64px;
}
a#m1:hover {background-position: left bottom;}

em vermelho atribuimos um identificador ID para o elemento a (link), no caso #m1;

em background definimos que nos estados a:link, a:visited e a:active a imagem apareça no topo à esquerda. Como definimos uma altura e largura para a área 'clicável' (com height e width) impedimos que o restante da imagem apareça (lembre que a imagem original tem height:106px). Ou seja, o que excede a altura de 54px não aparecerá. Veja na imagem abaixo:

Para o estado hover a posição do background muda para left bottom (em laranja) e agora o que fica escondido é a parte superior da imagem, novamente limitada pela altura estabelecida para a área do link. Veja:

Um truque simples e genial que não sofre incompatibilidade de navegadores e não causa nenhuma dor de cabeça. Enfim, algo que não fui capaz de pensar :)

Agora, para criar um menu horizontal onde os links aparecerão, acrescente também no CSS:

#navigation{

height:50px; /*altura do menu*/

width: 600px; /*área total ocupada pelo menu*/

margin:0px auto; /*margin que centraliza o menu na tela*/

background: url(http://i41.tinypic.com/690sux.jpg) no-repeat top left; /*imagem de fundo do menu*/

}

#navigation ul{

width: 400px; /*largura da área ocupada pelos ícones*/

margin: 0px auto 0; /*centralizando os ícones*/

padding: 0 0 0;

}

#navigation li{

float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/

margin-top:4px; /*margens dos ícones*/

list-style-type:none;

}

Salve as modificações. Agora no HTML do código, e aqui você escolhe onde aparecerá seu menu, acrescente:

 <div id='navigation'>
<ul>
<li><a href='Link do Blog/' id='m1' title='Home'> </a></li>
<li><a href='Link 01/' id='m2' target='_blank' title='Download'> </a></li>
<li><a href='Link 02/' id='m3' target='_blank' title='Vídeos'> </a></li>
<li><a href='Link 03/' id='m4' target='_blank' title='MP3'>
</a></li>
<li><a href='Link 04/' id='m5' target='_blank' title='Feed'>
</a></li>
<li><a href='Link 05/' id='m6' rel='nofollow' target='_blank' title='Contato'>
 </a></li>
</ul>
</div>

No caso do exemplo do Templates Novo Blogger acrescentou o código dentro do cabeçalho, assim:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Menu Hover (Cabeçalho)' type='Header'/>

</b:section>

Aqui o código do menu

</div>

Mas você pode colocar acima ou abaixo de header,como queira. Para colocar verticalmente na sidebar, basta copiar o HTML à partir de <ul> até </ul> ,abrir um elemento de página HTML/JavaScript e colar o código.