Este menú tiene un look moderno, fresco y es en 3D. El estilo del menú, se asemeja mucho a los botones que usábamos para personalizar los enlaces de navegación de Blogger, ¿recuerdas?
Para crear este menú de navegación, vamos a usar el gadget de "Páginas", ya que éste tiene la característica de destacar el enlace seleccionado, cosa que también podemos hacer con el gadget de lista de enlaces modificando un poco el código, pero en este caso no habrá necesidad de hacerlo.
En la siguiente imagen puedes ver la apariencia que tendrá el menu, he destacado cómo se verá cada enlace respectivamente y sus componentes:
Haz click para ampliar
O puedes verlo en acción en la Demostración
Ventajas y características
- Es compatible con IE7, IE8, IE9 y el resto de navegadores.
- Un diseño moderno en 3D, si te interesa la versión obscura del menú (la imagen) puedes tener el menú en formato PSD en Pixeden, página donde lo obtuve.
- Se destacará el enlace seleccionado (parece estar presionado)
- Podrás editar el ancho del blog completo sin tener que preocuparte por el tamaño de la imagen del menú, ya que esta compuesto por partes. (Aplicable en las plantillas del diseñador de plantillas)
IMPORTANTE. Como en el caso del menú anterior, necesitas habilitar la sección del header, para que muestre dos gadgtes. Otra opción es eliminar el CSS que corresponde a la sección del crosscol en las nuevas plantillas (la sección que esta arriba del contenido), ya que ahí vienen ciertos estilos definidos que afectarán los resultados del menú.
Pensado que harás lo primero, necesitarás ir a la Edición de HTML de la plantilla, y buscar esta linea código:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Deberás cambiar 1 por 2, y no por yes. Una vez hecho esto, verificas en vista previa y si todo luce bien, guarda los cambios.
Ahora podrás ver una nueva area punteada al ir a la sección de Diseño, y la verás arriba de la cabecera, y es ahí donde vas a agregar el gadget con la opción de "Páginas", y luego lo arrastrarás para que quede debajo de la cabecera, si ya lo usas, sólo la arrastras.
Hecho esto, empecemos a crear el menú paso a paso ;)
Paso 1. Agregar el CSS.
Primero Agregas el CSS, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS.
#header .widget{
margin:0;
}
#PageList1 ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VW9Hkdpjsqex_GeA5kusZIHllHA1Y2IWVy57vOdH8sNGdv5I3taUqW-Y1kKp1ZTh44QFXlfc8evsClml-x8l2Lp5MKH0HKvuSa8ibOjzG8NeXoJ_63kzT7uA-q_VEp2aGYdFySZOM_I/s1600/LI-REPEAT-menu.png) repeat-x;
width:100%;
margin:0;
height:48px;
position:relative;
left:-10px;
display:block;
overflow:visible;
}
.extremo-der{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirt400mLObC2boj1LglA53spCVULCsTn6ZVeItDWUr-7bRTMWruEBiIgorlOa4NqU8uEs97RdBm2COZt8lwHdikpOUwfFlFwtgXZloGlC9EU1mouMBQ8fjkm7FVNm4RguZCYpzUPRKtYQ/s1600/menu-der.png);
position:absolute;
right:-10px;
top:0;
display:block;
width:8px;
height:48px;
}
#PageList1 ul li{
list-style:none;
float:left;
border-right: 1px solid #bbbcbc;
line-height:41px;
height:41px;
margin-top:0;
}
#PageList1 ul li a{
text-shadow:1px 1px 0 #fff;
display:block;
border-right: 1px solid #fcfcfc;
height: 40px;
padding:0 8px;
color:#777;
font-size: 1.0em;
font-weight:bold;
}
#PageList1 ul li:first-child{
text-indent:-9999px;
width:43px;
height: 48px;
border: none;
margin:0 0 0 -20px;
}
#PageList1 ul li:first-child, #PageList1 ul li.selected:first-child{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWve8S1cHTt5w3_Zs1hToIiek9N_CSZ8kW9dcFL2KRfHqV8sQe8gpoK_0_94_Kwa_fPVoAA2d9WH1DGHPBnOj2puKAAPEOM9x6LwqPFW8zwCjpwKoZRXB6hQkIe3yN1xZhMGriM-OpZ4s/s1600/inicio-mm.png) no-repeat;
}
#PageList1 ul li:first-child a{
border:none;
}
#PageList1 ul li a:hover{
color: #679e1e;
text-decoration:none;
}
#PageList1 ul li.selected {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0OC5JFpRY95xrClmpgrGC0fIKLrWE7iL-rfF80DF3y85KOXyqO9rv6Iu_WApgjUuDY6h99jV1Kq2Yvai7J4WmizFX86lRkzxdpBot4J-Kn3MsKK4bMfk3wDprVNLwiYBetXairoW2mjg/s1600/selected-s.png) repeat-x;
}
#PageList1 ul li.selected a{
padding-top:2px;
color:#424242;
margin-top:2px;
}
Nota: Si quieres cambiar el color de texto al poner el puntero del ratón encima del enlace, busca:
#PageList1 ul li a:hover{
color: #679e1e;
text-decoration:none;
}
y cambia el color en: "color: #679e1e;". Puedes consultar esta tabla de colores.
Paso 2. Guarda los cambios en "Aplicar al blog".
Paso 3. Agregar el extremo derecho del menú (la imagen).
Ve a la edición de HTML de la plantilla, marcas la casilla de "expandir plantillas de artilugios" y con la ayuda de "Crtl F" (presionas la tecla "Ctrl" y la tecla "F" al mismo tiempo) buscas esta parte de código, pegando en el campo la linea que resalté de azul:
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
Debajo del cierre de la etiqueta ul, es decir, después de "</ul>" pegas esta linea de código:
<div class='extremo-der'/>
Hecho esto, ya deberá aparecer la imagen con el extremo derecho, y que hará que se vea completo en menú. (en el CSS esta definida está parte).
Podemos hacerlo sin tocar la edición de HTML de la plantilla, usando los selectores de CSS ":before" o ":after" , el problema es que el resultado no será visible en Internet Explorer 7, es decir, no se verá la imagen del extremo derecho (se verá "mocho" el menú), así que, si podemos hacer que se vea en esa versión del navegador, ¿por qué no hacerlo?
Paso 4. Verifica el resultado en vista previa y si todo luce bien, guarda los cambios. Listo ya tienes Instalado un menu en 3D en el blog ;)
Notas Importantes (por favor léelas)
1. La imagen que usé en el enlace seleccionado, tiene fondo de color blanco, si lo vas a usar por ejemplo en un fondo gris u otro color de fondo diferente, deberás editar la imagen que a continuación te facilitaré y que tiene fondo transparente, colocando el mismo color que usas como fondo. Cuando la abras en el editor como Paint.Net o Photoshop, te darás cuenta de lo que hablo. Debe tener el mismo color de fondo de donde sea colocado de otro modo no se verá bien.
2. Para evitar que desaparezca el gadget de páginas, (ya me han comentado que tienen problemas con eso), no guardes los cambios en "Guardar disposición" al agregar una Dirección Web, cuando está seleccionada la opción "no mostrar" en: "Mostrar páginas como".
3. No le pongas título al gadget de páginas, de ese modo evitamos usar mas lineas de CSS para ocultarlo.
Si no estas familiarizado con la opción de Blogger de páginas estáticas, echa un vistazo a este post.
Te recomiendo almacenar las imágenes por ti mismo, para evitar problemas en el tiempo de carga, entre otros.
