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.
|
