Tutorial para heloisa: Menu Hover

Vai em modelo >> Editar HTML >> procure por ]]></b:skin> e acima dele cole:

}

#menu a.home{

-webkit-transition-duration: .50s; 

background: url(http://data.whicdn.com/images/34760550/ka25_large.png)no-repeat; overflow: hidden; 

width: 130px; 

height: 40px; 

display: inline-block; 

} 

#menu a.home:hover{

background-position: 0 -40px;

}

#menu{

background: url(http://static.tumblr.com/jyjxgdu/2Humbnktp/menu.png) right ;

width: 110px;

float: left;

height: 20px;

font: 20px Play;

color: #fff;

padding: 2px 0 6px 0;

text-align: center;border-radius: 7px;

margin: 5px;

text-transform: uppercase;

cursor: default;

-moz-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

#menu:hover {

opacity: .95;

background: url(http://static.tumblr.com/jyjxgdu/2Humbnktp/menu.png) left ;

 color: #5f5147;

}

Agora adicione um gadget HTML e nele cole: 

<a href="http://www.imagineslp.blogspot.com.br/" id="menu">Home</a>

<a href="http://www.imagineslp.blogspot.com.br/p/blog-page.html" id="menu">Sobre mim</a>

<a href="http://www.imagineslp.blogspot.com.br/p/divulgando.html" id="menu">Divulgo</a>

<a href="http://www.kawaii-world.net/2012/11/menu-roll-right.html" id="menu">Creditos</a>

Se não der certo me avisa que procuro outro mais legal! ^-^

Kiss