Menú sencillo con imágenes y texto

Ir a Diseño, Elementos de la página (vieja interfaz) y añadir un gadget HTML/Javascript.

Poner los siguientes códigos:

Estilos del menú:

<style>
#menu_Vicente {
margin-left: 70px;     /* MARGEN DESDE LA IZQUIERDA */
position:relative;
z-index:1000 }

#menu_Vicente .menu_Vicente_inner {
position:relative;
border:1px dotted #112233;       /* BORDE DEL MENÚ */
/* IMAGEN DE FONDO DEL MENÚ - SE PUEDE CAMBIAR POR UN COLOR  */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiumbYdmP-exIJk3E6ULntf0JUs2dICTvoKXL0a5igGjTEBtJPZ2PWyLJcy_r2S1aw-tImKe-H5yRsQwfK4_sjU6ETirQEXUxt5dSAK9uGwocOCj5_V2SEhwovoxMuoCsFt77gPvjXRWAQ/s1600/navigator.png);
float: left;
height: 80px;
overflow: hidden;
padding: 0 10px; }

#menu_Vicente ul {
position:relative;
height:80px;
overflow:hidden;
margin: 0 20px 0 0;
padding: 0 0 0 20px; }

#menu_Vicente li {
float: left;
border:0;
list-style: none!important;
margin: 0;
padding-top: 12px; }

#menu_Vicente li a {
color: #fff;       /* COLOR DEL TEXTO */
cursor: pointer;
display: block;
font-size: 11px;
height: 40px;
padding-top: 35px;
text-align: center;
text-decoration: none;
width: 65px; }

#menu_Vicente li a:hover {
color: #6699FF; }      /* COLOR DEL TEXTO AL APOYAR EL CURSOR */

#menu_Vicente li a.selected {
color: #6699FF; }      /* COLOR DEL TEXTO INICIO */

                       /* ACÁ CAMBIAMOS LAS IMÁGENES DEL MENÚ */
#menu_Vicente li.home a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGO7NFkbwz-_ETiBgmcR66Oszse_JdoMCdkclgHDrgvKYmKDpmnTSiTiJ2ZOFMu7eds8oZzrYStxrOdEkEye9Al_HsQf4n_Qc8Jz2WaA5EcbZ2HqDBqowWdQmagg182iwhP4QvApWy15M/s1600/home.png) no-repeat top center; }
#menu_Vicente li.Oferta a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzLRYT1UsEJHvSFmUa4kjiEliMXEcC7S9vWjJVfF29VTPO52AVg-qTBI30MqZPwbd0hd-fQQiOqMeo-u_n4Dzn8mxfwHpQyHx3HmohuF5erHEpVz-JFjK1sJ9kfLO29AjUeUtITuEdguE/s1600/map.png) no-repeat top center; }
#menu_Vicente li.Servicios a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2x4SKFYu5LTG5UskFb2FBdGSG89ZfrYtlsV2Bs1ma1g6CFu5iwCUyHaGXKxXmSnf9vJV4BufbEBe1jTg9qZGupmJE9q1C2iLhLnOchLIgI3R1jPUsIHj0RQ4R5jLeZxUz3Y6EtV2t8jw/s1600/image.png) no-repeat top center; }
#menu_Vicente li.Noticias a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYgwVLcjBrOU2HdDVm9gY-PgF_aLOmgWR1uMiUB2UsdtE7cyIPwKjvKUzbXJkJa895DNJgO6-Dx2XfNXzPAIJ7xogE2jW2t0xbXQ5iWkkTng4ztRBnFX5fVBhTiYgqiJhV4OQxcoPEYg/s1600/people.png) no-repeat top center; }
#menu_Vicente li.Informes a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgde8CiwqCZejb4b4BfThjDq88qB_MPu9CYFivrCITELdWhKWnljDtDiz6HdnCAgPnYoSK9KFoIOnh89kon1X14NEbbJWHfA8uiv0czPD982apFkKH-GuBrBVftvbuKwZMnQaRQ0KeSAAo/s1600/help.png) no-repeat top center; }
#menu_Vicente li.contact a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXD8bJizXbgbV0-meDk72NPbpUQwgowCWa59eg1izx55eKZiqKD6dS4VqOmsUJ0oZtM1lDtdfa8Yo2tguoVKLwhpIGxe83YHiVgsH9Uieuf1drd3fiKdqJf-R9ovPotBeZndtgF-72HN4/s1600/email.png) no-repeat top center; }
</style>

Enlaces del menú:

<div id="menu_Vicente">
<div class="menu_Vicente_inner">
<ul>
<li class="home">
<a class="selected" href="#">Inicio</a>
</li>
<li class="Oferta">
<a href="#">Ofertas</a>
</li>
<li class="Servicios">
<a href="#">Servicios</a>
</li>
<li class="Noticias">
<a href="#">Noticias</a>
</li>
<li class="Informes">
<a href="#">Informes</a>
</li>
<li class="contact">
<a href="#">Contacto</a>
</li>
</ul>
</div>
</div>

Cambiamos # por los enlaces de las páginas y el texto a mostrar.

Ejemplo:

<a href="http://loseasi.blogspot.com/p/contacto.html">Contacto</a>

Si queremos que la página abra en otra pestaña le agregamos target="_blank":

<a href="http://...../contacto.html" target="_blank">Contacto</a>

Mover el gadget a un lugar apropiado; por ejemplo arriba de las entradas.

• Inicio
• Ofertas
• Servicios
• Noticias
• Informes
• Contacto