Menu vertical "Naranzul"

1 comentó



Para organizar las secciones o categorias de tu blog, aqui tienes este menu que combina los colores azul y naranja con la imagen de una flechita en cada enlace. Este menu es ideal para ponerlo en la sidebar o columna lateral del blog. Para ello, solo tienes que copiar el codigo de abajo y añadirlo en un gadget HTML/Javascript. Sustituye lo que esta indicado en rojo por el texto y las urls de tus enlaces. Para poner mas enlaces, solo tienes que añadir la linea <li><a href="URL">TEXTO</a></li> debajo de las otras, tantas veces como quieras.






CODIGO:

<center><div id="naranzul"><ul>

<li><a href="URL">TEXTO</a></li>

 <li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>

</ul></div></center>


<style>#naranzul ul { list-style: none; margin: 0; padding: 0; } #naranzul img { border: none; } #naranzul { width: 200px; margin: 10px; } #naranzul li a { height: 32px; font-family:Helvetica; margin: 0; font-size: 15px; font-weight: bold; background: transparent; height: 24px; text-decoration: none; } #naranzul li a:link, #naranzul li a:visited { color: #FFF !important; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivi-Juxl8Z9KcHfhaVZ8g3_d5V54xsdqYfrCY9M-699gXUzWr6Gx2KYEfqZ-pNVtzkpXZj7yk1aJL3sizyj8wBsqopwEzIx9DuCp8U7xF9beismxcyvthyYwDgvMB40fS_wZPUltqjpHI/s1600/menu5.gif); padding: 8px 0 0 35px; } #naranzul li a:hover { color: #FFF !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivi-Juxl8Z9KcHfhaVZ8g3_d5V54xsdqYfrCY9M-699gXUzWr6Gx2KYEfqZ-pNVtzkpXZj7yk1aJL3sizyj8wBsqopwEzIx9DuCp8U7xF9beismxcyvthyYwDgvMB40fS_wZPUltqjpHI/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; } </style>