26 junio 2005

Cambio VII

RedesPrevios:
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:

tabsblog

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.

3 comentarios:

almanaque do roberto dijo...

nunca ri nada igual !

Mirabai dijo...

Hola:
Me parece muy interesante y útil tu blog. Me gustó mucho.
Por cierto.. ese tal almanaque do roberto, escribió exactamente lo mismo en mi blog. :o
Saludos.

Gustavo Diaz Salazar dijo...

Bienvenidos y gracias.

Saludos.