Cambio VII

Previos:
Cambio I, Cambio II, Cambio III, Cambio IV, Cambio V, Cambio VI.
Continuemos con la remodelación del Blog, como en este caso tenemos 2 blogs este informativo y uno de fotos crearemos un menú que constara de 2 pestañas como se muestra a continuación en la imagen:

Este menú tiene la caracterísitca de cambiar la imagen al colocarse encima de el elemento, el código lo tome de uno que tengo en mi computadora, lo créditos de el desarrollador no los puedo dar ya que no recuerdo de donde lo saque.

Pasemos al código CSS, añadamos el siguiente código:

div#menuboton{
height: 37px;
text-align: right;
color: #ffffff;
}

div#hbuttons a{
display: block;
text-decoration: none;
font: bold 13px Verdana;
color: #ffffff;
width: 155px;
height: 35px;
float: right;
display: inline;
background-image: url(www.server.com/boton.jpg);
background-repeat: no-repeat;
padding-top: 4px;
text-align:center;
}

div#hbuttons a:hover{
background-image: url(www.server.com/boton2.jpg);
}

y añadamos el siguiente html, marcamos en rojo los cambios:

<div id="top">
<div id="margenencabezado">
</div>
<div id="logogustavo">
<img src="www.server.com/ico1.gif" alt="ico pantalla ">
<img src="www.server.com/ico2.gif" alt="ico palm ">
<img src="www.server.com/ico3.gif" alt="ico movil ">
<img src="www.server.com/ico4.gif" alt="ico notebook ">
<img src="www.server.com/barra.gif" alt="separador ">
<img src="www.server.com/logogustavo.jpg" alt="GustavoDiazS"><br>
</div>
<div id="separador">
<b>Blog personal de Gustavo Diaz, Un Blog Comun.</b>
</div>
<div id="menuboton">
<div id="hbuttons">
<a href="http://fotogustavodiazs.blogspot.com/">Fotos </a>
<a href="http://gustavodiazs.blogspot.com/">Bitacora </a>
</div>
<div style="clear: left;"></div>
</div>
</div>

Así quedaría después de las modificaciones.

Saludos.