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/AVvXsEiywcNCQk7GZ4v9ExGPdBFuPQfdMchSbDxl-Jbc_vu2vjBqLH1DxRFK-qZf-4CBAkx8Fcabk4PYRvsFw_PzFL0xzILReK-OrzciDBUcQ5s3ejVR-3YSUOv_9bFHDKv21YCKErPbEaJTLZo/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/AVvXsEjMXm16iFE8wHlTUdCX6VFAkuaQsNOzoL6qy6Ak-PeNt5-jTtTR5ccG9psqutV979rWzEgvVo3fa4B7XaSgPWbJEI81OpARVxsNtUTm5Gv7WDMj9ntGi7zsRt1xQBCNh3rCeNkSWp7e77k/s1600/home.png) no-repeat top center; }
#menu_Vicente li.Oferta a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHMmL7VQbCULEHdXbG26OlBhXn3M_GRfuDgy6SDgKh8ycdHb7LchKOCapvItb-BbK7gGCXAOJhyMhqVr5kK_N8hZV988exyc2fMNlNNG6zpm5f49YvincdwAt9Elson-4JI80cUaeKqmU/s1600/map.png) no-repeat top center; }
#menu_Vicente li.Servicios a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPBv6lBzgDFHmGG_bPDkwxRfM1oQc8Ts2nS51lMO3W0Fm-7SgmZ5HTEts0tihTdIxsOWYUIxbjGZBg1iPi48mRGD-hVBJImdegR8DqxaTm3l8oETCqOwyi2JxnMfsPKXjoe735JJnavyA/s1600/image.png) no-repeat top center; }
#menu_Vicente li.Noticias a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfRYOq5pvoRC3Ly5bHomS0xL75AsQOelgX-zk3djQWuMOczFNS1QrMGMVe43ceT7qrvJ3cTQL3cuToFFg9sAtrHvWvD9yokwMNq4WN1SwMPFAVMk5-RwREYBH_GX4gR55kwjaDxTNvAY/s1600/people.png) no-repeat top center; }
#menu_Vicente li.Informes a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgG4tyh-lwupGELdCGrOZCQtq35kZLloRNV0HlkWJ7p4ZR5URYkHqy7mE2mT-L62LV1ag5G5j8rgBGq8lu-ao0WQQRanF8G1TRyk0B6CqGA5wAyKE259x-IEqj6wRnp9D5FRL5uXWEu8/s1600/help.png) no-repeat top center; }
#menu_Vicente li.contact a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRHaR3h__DGWAnWwQZz9buK6OcoN_8fb1lussbPNUxif3vVjU3K8J63AAELhtUjRRO3BHRnZ1uzJsItdyNNmUY4O8aOWseOzFTNPI0q7sTZm4M1-Ht_Q3JfUoam_o3noi7pY9rWwuDCpk/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.
No hay comentarios:
Publicar un comentario