Jugando un poco con el CSS y dos imagenes, me ha salido este menu tan chulo. Como veis, tiene un diseño elegante en color azul que, al pulsar sobre uno de los botones cambia de color gradualmente. Para ponerlo en vuestro blog, tan solo teneis que copiar el codigo que os facilito y añadirlo en un gadget HTML, cambiando lo que esta en rojo por las urls de los enlaces que querais poner y su respectivos nombres.
Asi te quedara:
CODIGO
<div class="hovercolor"><ul><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li></ul></div>
<style type="text/css">
.hovercolor{
width: 100%;border-top:2px solid #000000;border-bottom:2px solid #000000;
overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibnlyIdEhbEclgupRYnJHISVqr9H4L_XDkkOVB_kHbxYqAY0diIpULAhKfjNb79QNDxJ4Ek1d43_BeNpdew5o4wiuVd-s6wkbhO_A7R4SGqtJVl0aeojGGlsZ1eYitDCmEC79do51bDfM/s66/fondo%2520barra%2520menu%2520-%2520REDEANDO.jpg)repeat-x;height:60px;line-height:2.5;
}
.hovercolor ul{
margin: 0;
padding: 0;
font: bold 18px Helvetica;
list-style-type: none;
text-align: center;
}
.hovercolor li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}
.hovercolor li a{
display:inline-block;line-height:0.5em;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;border:1px solid #000000;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);
padding: 10px;
min-width:40px;
height:25px;
text-decoration: none;
color:#FEF497 !important;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hovercolor li:hover a{
color:#000000 !important;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLkuVFS86Q2EGL4MJSkH-6y4LCQEDiclbW6D5T5f9nBKTo6pty_C3SgfUeek2sBKNmIhGIa7UmHjicC0YsFjrOP1rq9tFx_QbKf-j27rD6edLcnwVYfZJwIc94rCK-OG4Itb1f-w8s3aM/s100/fondo%2520hover%2520-%2520REDEANDO.gif);cursor:pointer;
}
.hovercolor li a span{
position:relative;
top:35%;
}
</style>
