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/AVvXsEjgSqH215rq9pAj8c_SJ8pC7VaPlVdbbpOUJ1KwvD2w7rHn83bAXpfA7q3My49zIQWOJxrUcjBAYrarnNmClu8ynofPH_34SbDnZA9OatwhQZ48BpNDPvY0DCS-mgoeGnqwZwDx7fv6QoY/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/AVvXsEgEmCK9rTZbqRRhIzM7xlro1rlnOwoOwozfXng0U5AHSZ-87t1i92CmGwun983__LqHDU3Y13D7kefzeWVgLNld8ViLVZMOX3J78xE-U5qb6rq3wEWsCdjn-6jNhJ5chF98RwUufNb8O9w/s1600/home.png) no-repeat top center; }
#menu_Vicente li.Oferta a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbCYJoh2kI0_B-fgaUK5DvuEKvTjejfLjDOqKhIL_EK4vtv-348v6-Mg0kbrU2AWLRJlGEqLduvD9lDnTIxYQq3bP4cwvobEr-QELBLJg-PUUqtmOEo6jyJPfZa6QcB3bIO0S-aVAbjc/s1600/map.png) no-repeat top center; }
#menu_Vicente li.Servicios a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCgZ_VNUuwjOVzFsL-hmufCKlczLiCnEZNQzCey-3icpReYLtfs8Gkn8c6OAcGmYoFWYkMxANEub-Jv1TezLgX37hKACp8uIg6CHNsj1WBkx-GRPLuHH0Lp6ZXO4gehSxH6QpFe0BOR4g/s1600/image.png) no-repeat top center; }
#menu_Vicente li.Noticias a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVwNlEZm_yQOP2UEPtVa4Ql3C6MTpvmUfB6x3rMcC-6GwM_WkXX_v1aQjy2vN-q_65Z09Y-eM3sNkUpeS_GgqphQ_p1A-VP_9T_Q-TW1n0IGva2JjoICtHphbAK3960dTk4-397geOAk/s1600/people.png) no-repeat top center; }
#menu_Vicente li.Informes a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bbRbYQd8Enwm6pTWXI9gjzYZZORkQrofd1bnPQ1Gc0HaIbrNmnbvUS1a_XP3u0Nbu7Iy9HZJfTRpRmgOR4u_PTtbrQC7ZOUaysMXaZ-LR9KZG1qifxWcCwwTRGo9heolEDHxB1I5M6M/s1600/help.png) no-repeat top center; }
#menu_Vicente li.contact a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj16hQPkPDrSbnVi_rbHizJmivCqQGhL_L_hEviXA6qQ65YoG-6Dx_J9-74xwRGIKiFwSZcI2aT8tMvGCg4Fe2ZmNXelZ0vUuntoEAKagDBju23BhHk4oxk6_K-sYqIfAbiABvMep8C6Ys/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.
0 comments:
Post a Comment