Menu de colores con CSS

 
Para los que querais poner en vuestro blog o web un menu vertical colorido y chulo, aqui teneis uno que os gustara. Para añadirlo solo tienes que seguir estos dos pasos:

Para ponerlo a nuestro blog, editamos un gadget de HTML y en su interior añadimos:
<div id="menucolor"> <ul> <li><a href="URL">ENLACE 1</a></li> <li><a href="URL" class="green">ENLACE 2</a></li> <li><a href="URL" class="blue">ENLACE 3</a></li> <li><a href="URL" class="orange">ENLACE 4</a></li> <li><a href="URL" class="brn">ENLACE 5</a></li> </ul></div>

Guardamos los cambios y en la plantilla edición de HTML justo antes de ]]></b:skin> añadimos los estilos:

{ margin:0; padding:0; } body{ background:#fff; color:#666; font:18px/18px Tahoma, Arial, Helvetica, sans-serif; } #menucolor{ background:#fff;; width:250px; } #menucolor ul{ list-style:none; } #menucolor li{ list-style:none; margin:0px 0; } #menucolor li a{ list-style:none; background:#82837c; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; text-decoration:none; border:solid #777776; border-width:0 6px 0 6px; display:block; height:30px; line-height:30px; padding:0 0 0 10px; } #menucolor li a:hover{ background:#777776; color:#fff; text-decoration:none; } #menucolor li a.green{ background:#83ad3e; border:solid #6f9234; border-width:0 6px 0 6px; } #menucolor li a:hover.green{ background:#6f9234; } #menucolor li a.blue{ background:#4396bd; border:solid #377e9f; border-width:0 6px 0 6px; }<br /> #menucolor li a:hover.blue{ background:#377e9f; } #menucolor li a.orange{ background:#ff7327; border:solid #d65611; border-width:0 6px 0 6px; } #menucolor li a:hover.orange{ background:#d65611; } #menucolor li a.brn{ background:#a53cbe; border:solid #87249f; border-width:0 6px 0 6px; } #menucolor li a:hover.brn{ background:#87249f; }

Añadimos nuestros enlaces editando el gadget de HTML y sustituyendo el texto que hará de enlace por nuestro texto, dode pone URL lo sustituimos por la url del sitio que vamos a enlazar.

Si queremos añadir más enlaces bastará con añadir tantas lineas como enlaces deseamos añadir.

<li><a href="URL">ENLACE 1</a></li>

<li><a href="URL">ENLACE 2</a></li>

(Ejemplo de como quedara)