Este menú se presenta a la vista como si estuviera envolviendo el blog. Queda bien en blogs que tienen bien definido el borde del Outer Wrapper (envoltura principal del blog).
1.- Vamos a Editar HTML:
| Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
2.- Localizamos, poniéndola dentro del rectángulo de busqueda (Search), la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código:
/* Menú envolvente
----------------------------------------------- */
#menu:after, #menu:before {
content: '';
position: absolute;
}
#menu {
height:20px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #3A819D; /* Color del menú */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 #bbb;
-webkit-box-shadow: 0 2px #bbb;
}
#menu:before, #menu:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}
#menu:before {
border-width: 0 20px 10px 0;
border-right-color: #234B5B; /* Color de la sombra del doblez */
left: 0;
}
#menu:after {
border-width: 0 0 10px 20px;
border-left-color: #234B5B; /* Color de la sombra del doblez */
right: 0;
}
#menu ul {
margin-top: 0px;
}
#menu li {
list-style: none;
display: inline;
padding-right:20px;
}
#menu li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #ffffff; /* Color del texto */
font-size: 14px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}
#menu li a:hover {
font-size:16px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear; |
En las líneas con comentarios (resaltados en rojo) podemos modificar los conceptos a los que se refieren dichos comentarios: número de pixeles (xxpx) y código del color (#xxxxxx). Los comentarios los podemos eliminar, si queremos; no afectan en nada.
3.- Localizamos el siguiente código:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/>
</b:section> |
...y debajo del mismo pegamos éste:
<div id='menu'>
<ul>
<li><a href='#'>Pestaña 1</a></li>
<li><a href='#'>Pestaña 2</a></li>
<li><a href='#'>Pestaña 3</a></li>
<li><a href='#'>Pestaña 4</a></li>
<li><a href='#'>Pestaña 5</a></li>
<li><a href='#'>Pestaña 6</a></li>
</ul>
</div> |
4.- Reemplazamos # por las URLs de los enlaces, y Pestaña x por los textos que servirán de enlaces.
El menú de este tutorial está hecho para seis pestañas, pero podemos aumentar o disminuír el número, en el segundo código. Quedará ubicado debajo de la cabecera del blog, que es el sitio más apropiado.
|
12 comentarios :
¿cómo centro todo el menú en el blog?
He puesto sólo 3 pestañas, pero me las alinea a la izquierda.
Anónimo, revise, en la segunda sección del código del punto dos, esta línea:
text-align: center;
Es la línea que pone las pestañas del menú en el centro; si cambiamos center por left, las pondrá a la izquierda, y si cambiamos center por right las pondrá a la derecha, pero si no la ponemos correctamente (por ej. que le falte el guión, o los dos ountos, o el punto y coma), tal cual está en el código del tutorial, las pondrá, por defecto, a la izquierda.
Saludos.
Reciba un saludo , mis felicitaciones es super didáctico e inteligente . Esta web es para mi mi guia mi tesoro gracias por ayudarnos. Queria preguntarle ..coloque el menu envolvente mequedo precioso pero el ultimo link (contacto) no me funciona le doy clic no me lleva ala pag .. revise la url esta bien , puntos comas todo . Que puedo hacer?
acabo de comprobar que en el navegador internet explorer si funciona el link de ese boton pero en chrome y mozila no funciona
Ivonne, Este menú se ha probado con los principales navegadores y con todos funciona. Con Internete Explorer tiene la limitación que no se ve el efecto "doblez".
Revise el enlace "Contacto"; sebe ser exactamente de esta forma:
<a href="AQUÍ LA URL DE LA PÁGINA">Contacto</a>
Saludos.
HOLA PROFE LE DEJO LA URL DEL BLOG PARA QUE LO VEA CON INTERNET EXPLORER SE VE PERFECTO Y SIRVE EL LINK , LO VEA CON GOOGLE CHROME SE VE TAMBIEN LINDO SOLO QUE EL LINK NO FUNCIONA E IGUALMENTE CON MOZILLA,.
http://ueijosepiotamayo.blogspot.com/
YA REVISE LA URL EN EL MENU Y TODO ESTA BIEN
Ivonne, creo que está confundida y que la confusión puede deberse a que no es uno sino son varios blogs. La pestaña "Contacto" funciona perfectamente con todos los navegadores. El problema está en las pestañas Foro, Galería y Servicios. En el blog correspondiente a Inicio están las pestañas Foro Y Galería con la misma URL (http://ueijosepiotamayo.blogspot.com/URL), como una entrada del blog Inicio titulada URL, y que tiene el mismo contenido de la página principal del blog Inicio.
En los demás blogs están las pestañas Foro, Galería y Servicios con una URL que correspondería a una página del blog Administración titulada URL (http://adminipiotamayo.blogspot.com/URL), página que no existe.
Espero no haberla confundido más.
Saludos.
Hola profe bueno ya había eliminado el menú envolvente . Y coloque ese menú que me esta describiendo con esas pestañas foro galería y servicios que aún no le he colocado url pues tengo que crear los blogs para cada uno.- Pero si le entendi y tiene razón pero es por eso que tienen la misma url porque aún no le he creado .- Muchas gracias y seguiré con esta página suya que me ayuda muchisimo todo lo que vio en esos blogs lo he aprendido de usted . Para mi es mi geniooo y mill gracias por contestar y despejar mis dudas.-
Descubrí esta página buscando ayuda para mi blog y es una de las mejores que he visitado. Gracias por compartir sus conocimientos.
Buenos días.
Lo he probado y queda excelente el menú. Le consulto, cómo puedo anexarle submenús a este menú??
Gracias
Iván Isolani,
En cada elemento del menú, antes de la etiqueta de cierre < / li >, abre una etiqueta < ul > con su correspondiente de cierre < / ul >, por cada submenú, y entre estas dos pone cada elemento del submenú entre las etiquetas < li > y < / li >.
Lo anterior en el último código del tutorial.
Saludos.
hola soy nuevo en esto solo quisiera saber porque este menu no me funciona al momento de querer hacerlo submenu alguien que me pueda decir porque?
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.