Menu Horizontal De Color Plata


Este es un menu mas un poco curioso, tal vez por lo pequeño o por lo sencillo de su aspecto, pero eso no le quita lo interesante.

El menu se compone de codigos HTML y CSS con imagenes como fondo.

Esta es una imagen de como quedaria:


El menu lo puedes ampliar y ponerles los link que quieras, solo tendras que ampliar las etiquetas a incluidas en el codigo HTML.

Este es el codigo css que tendras que incluir en la plantilla de tu Blog justo antes de: ]]></b:skin>

Código CSS



#hmenu {
 padding: 13px 0 5px 0;
 
}

#hmenu a {
 padding: 12px 13px 2px 11px;
 text-decoration: none;
 color: #414141;
 background: #ccc url(img/hmenuarrow.gif) no-repeat top center;
 margin: 0 0 3px 1px;
 border-bottom: 4px solid #BCBCBC;
}

#hmenu a:hover {
 background: #3C6491 url(img/hmenuarrowhover.gif) no-repeat top center;
 color: #FFFFFF;
 border-bottom: 4px solid #2F4A6C;
}

Dentro de este trozo de código tendras que pegar la url de las imagens utilizadas para el menu: (img/hmenuarrow.gif).

Estas son las imagenes, guardalas en tu Disco Duro y subelas a un servidor ó a picasa que es el utilizado por Bloger.

hmenuarrow



hmenuarrowhover



Nota las imagenes son de color blanco.

Código HTML


El siguiente codigo es el que va el nav o header de tu plantilla, ubica donde lo tienes y cambialo por este, suele. ser un poco abajo del body.

 
<div id="hmenu">

 <a href="#">Inicio</a>
 <a href="#">Tema</a>
 <a href="#">Registrarse</a>
 <a href="#">Contacto</a>
 <a href="#">RSS</a>
 
</div>

Subir