Hoy os traigo este menu diseñado por mi, al que he llamado asi por los colores que he utilizado. Cuando pasas el cursor por encima, los colores del fondo y texto se invierten. Para l@s que os guste este menu tan alegre, o simplemente quede bien en vuestro blog o web y lo querais poner.
Lo primero es ir a la plantilla HTML y antes de ]]></b:skin> añadir los estilos CSS
ESTILOS
/* Menu sol y noche
diseño, design: Johnny Vega
REDEANDO - http://redeando.blogspot.com/
----------------------------------------------- */
.redeando1 {
float: left;
width: 100%;
margin: 0;
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicQf0f3-46KvhB0PLmpILrs9XcluOPVgIM63GBtNhgHlWvr754SPG32EUsWKgZ-LRqSB8lJBr-Jb-oZlZz6RheSj0RbhLW5n9a3HwVl9af6npYMyK7-wxWK2OjOwReLJZA0KseB0sIoHqN/s1600/buttonmenu.png);
font-size: 12px;
text-decoration: bold;
}
.redeando1 li {display: inline;}
.redeando1 li a, .menujohnny li a:visited {
float: left;
padding: 10px;
text-decoration: none;
color: #000;
font-size: 12px;
font-family: Arial Black;
border-right: 3px solid #131313;
border-top: 2px solid #131313;
border-bottom: 2px solid #131313;
text-shadow: 5px 1px 5px #fff;
}
.redeando1 li a:hover {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSSwxtwjvvHgH04SIxw0YjgLtnf_Fps6QajAkH3uzqNsqcJfZg7AT8jxcu1196Ujx1_YV04_fKk_7dPsWWR6d-fiMX0ZEKbokW05jEIfdZLukRsAUPTWEI2VmWStkfL988OwhyphenhyphenIREgO6mC/s1600/buttonover.png) center center repeat-x;
font-size: 12px;
text-decoration: bold;
color: #FFF545;
}
Luego, pegamos el codigo alli donde lo queramos mostrar
CODIGO
<ul class="redeando1">
<b>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
<li><a href="URL">NOMBRE</a></li>
</b>
</ul>
Sustituimos donde pone URL y NOMBRE por la direccion y titulo del enlace
y asi nos quedara, guapo ¿no?
