Para l@s que os guste este color o posiblemente os combine con el estilo de vuestro blog o web, aqui teneis este menu tan chulo diseñado en tono violeta gradient (difuminado) con bordes redondeados. Esta integramente realizado con CSS, es decir que no utiliza ninguna imagen de fondo.
Este es el aspecto del menu, una vez acabado:
Para ponerlo en Blogger puedes añadir si quieres los dos codigos juntos en un gadget HTML/Javascript.
Y si quieres ponerlos por separado, primero añade el codigo CSS en la plantilla antes entre las etiquetas <head> y guardas.
<style type="text/css">
.violetagradius{width:100%;
height:52px;z-index:3000;
}
.izmvg{float:left;
width:40px;
height:52px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
}
.izmvg,.demvg,.violetagradius a{background: -moz-linear-gradient(bottom, #663399, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#663399), to(#FFFFFF));
border: 2px solid #444444;
}
.demvg{-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
float:left;
width:40px;
height:52px;
border-left:none;
}
.violetagradius a{float:left;
display:block;
height:52px;
border-left:none;
font-family:Helvetica;
line-height:52px;
font-size:18px;
font-weight:900;
text-decoration:none;
color:#FFFFFF !important;
padding:0px 30px 0px 30px;
border-right: 2px solid #444444;-webkit-text-shadow: 2px 1px 2px #000000;-moz-text-shadow: 2px 1px 2px #000000;text-shadow: 2px 1px 2px #000000;
}
.violetagradius a:hover{ background: -moz-linear-gradient(bottom, #441177, #FFFFFF);
background: -webkit-gradient(linear, center bottom, center top, from(#441177), to(#FFFFFF));
color:#FFFFCC !important;
}
.clear{clear:both;
}
</style>
Ahora añades el codigo HTML alli donde quieras mostrar el menu, escribiendo los enlaces donde pone URL y el texto donde esta indicado en color rojo. Si quieres añadir mas enlaces, solo tienes que poner la linea <a href="URL">TEXTO</a> a continuacion de las otras, tantas veces como quieras.
<div class="violetagradius"><span class="izmvg"></span><a href="URL">TEXTO</a><a href="URL">TEXTO</a><a href="URL">TEXTO</a><span class="demvg"></span></div>
|
